Jquery xml file provides information details page pulls all info instead of selected_问答_开发者

Jquery xml file provides information details page pulls all info instead of selected

开发者 https://www.devze.com 2023-04-08 12:32 出处：网络

I am trying to build on some basic ideas. I have an xml file which I have no problems loading onto a list type menu . My xml file has about 300 records and each record contains approviamtely 45 fields. (LASTNAME, FIRSTNAME, ADDRESS, etc). I can get the list menu created but I cannot manage figure out how to load the details page for only the person picked from the menu list item. I have googled and I am this is complete user error on my part. Any help would be greatly appreciated.

<body> 
 <script type="text/javascript">
  $.ajax({
               type: "GET",
               url: "COMBINED.xml",
               dataType: "xml",
               success: function(xml) {
                   $(xml).find('COMBINED').each(function(){
                       var id = $(this).attr('ID')

                       var JPG = $(this).find('JPG', 'FIRSTNAME').text()

                       var FIRSTNAME = $(this).find('FIRSTNAME').text()
                       var LASTNAME = $(this).find('LASTNAME').text()
                       var SCHOOL = $(this).find('SCHOOL').text()
                       var DISABILITY = $(th开发者_JS百科is).find('DISABILITY').text()
                       var TITLE = $(this).find('TITLE').text()





      $('<li></li>').html('<a href="#DETAILSPAGE"'+id+'">'+FIRSTNAME +' '+ LASTNAME + '<p>'+SCHOOL+ '</p></a>').appendTo('#LIST');
   var $divToAppend=  $('#DETAILS')
   var detailsitem=$('<div></div>').attr('id','#DETAILSPAGE').html("<h1></h1>");

  $('<li></li>').html(DISABILITY).appendTo('#DETAILS' )

  })
      ;}

      })
      </script>

  <div data-role="page" id="page" data-theme="b">
      <div data-role="header">
          <h1>Page One</h1>
      </div>
      <div data-role="content"> 
          <ul data-role="listview">
              <li><a href="#LISTPAGE">Page Two</a></li>
              <li><a href="#page3">Page Three</a></li>
              <li><a href="#page4">Page Four</a></li>
          </ul>     
      </div>
      <div data-role="footer">
          <h4>Page Footer</h4>
      </div>
  </div>

  <div data-role="page" id="LISTPAGE">
      <div data-role="header">
          <h1>Page Two</h1>
      </div>
      <div data-role="content">
      <ul data-role="listview" id="LIST"></ul>
      </div>
      <div data-role="footer">
          <h4>Page Footer</h4>
      </div>
  </div>

  <div data-role="page" id="DETAILSPAGE">
      <div data-role="header">
          <h1>Page Three</h1>
      </div>
      <div data-role="content" >    
<ul data-role="listview" id="DETAILS"></ul>

      </div>
      <div data-role="footer">
          <h4>Page Footer</h4>
      </div>
  </div>


  </body>
  </html>

Here is what worked: After setting up variables with the information. Had some great help from a great book Jay Blanchard's Applied Jquery Book.

  $('<li class="memberInfo" name="'+thisID+'"></li>').html(THISMEMBERDETAIL).appendTo('#DETAILS');

     $('a').live('click', function(){
    /* get the name attribute of the link clicked */
    var thisMemberID = $(this).attr('name');
    /* if any previous member info was showing, hide it */
    $('.memberInfo').hide();
    /* show the current member info */
    $('li[name="'+thisMemberID+'"]').show();
       });
   });