Databases
StackOverflow2013
Postsdbo
POjQuery .appendTo() on a <ul> not working
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery .appendTo() on a <ul> not working
    text
    copied!<p>A friend helped me with this code. It works perfect in HTML without jQTouch or JQM. When put in JQM the details section is not showing up on the next page. What am I doing wrong? </p> <p>This is my jQuery mobile outlay. Very simple just trying to get the details page (Pagethree) to show up. Currently it reverts back to the first page but the url is listed properly.</p> <pre><code>$(document).ready(function() { $.ajax({ type: "GET", url: "COMBINED.xml", dataType: "xml", success: function(xml) { $(xml).find('MEMBERS').each(function(){ /* * set up list page * gather all variables and format into single variable * for ease of editing */ var thisID = 'DETAILSPAGE'+$(this).find('ID').text(); var FIRSTNAME = $(this).find('FIRSTNAME').text() var LASTNAME = $(this).find('LASTNAME').text() var PARTY = $(this).find('PARTY').text() var DISTRICT = $(this).find('DISTRICT').text() var TITLE = $(this).find('TITLE').text() var THISMEMBER = FIRSTNAME +' ' + LASTNAME +'&lt;br /&gt;' + TITLE +'-District '+ DISTRICT +', ' + PARTY; $('&lt;li&gt;&lt;/li&gt;').html('&lt;a href="#'+thisID+'"&gt;'+THISMEMBER+'&lt;/a&gt;').appendTo('#LIST'); /* set up details page */ var EMAIL = $(this).find('EMAIL').text(); var OCCUPATION = $(this).find('OCCUPATION').text(); var EDUCATION = $(this).find('EDUCATION').text(); var THISMEMBERDETAIL = '&lt;strong&gt;'+FIRSTNAME+' '+LASTNAME+'&lt;/strong&gt;&lt;br /&gt;' + EMAIL+'&lt;br /&gt;' + OCCUPATION+'&lt;br /&gt;' + EDUCATION; $('&lt;a class="memberInfo" name="'+thisID+'"&gt;&lt;/a&gt;').html(THISMEMBERDETAIL).appendTo('#DETAILS'); }); } }); /* toggle function */ $('a').live('click', function(){ /* get rid of the pound sign */ var href = $(this).attr('href'); var details = href.substring(1); /* if any previous member info was showing, hide it */ $('.memberInfo').hide(); /* show the current member info */ $('a[name="'+details+'"]').show(); }); }); </code></pre> <p><strong>CSS</strong></p> <pre><code>.memberInfo { /* start with all member info hidden */ display: none; } </code></pre> <p><strong>HTML</strong></p> <pre><code>&lt;div data-role="page" id="page" data-theme="b" &gt; &lt;div data-role="header"&gt; &lt;h1&gt;Page One&lt;/h1&gt; &lt;/div&gt; &lt;div data-role="content"&gt; &lt;ul data-role="listview"&gt; &lt;li&gt;&lt;a href="#LISTPAGE"&gt;Page Two&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#page3"&gt;Page Three&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#page4"&gt;Page Four&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div data-role="footer"&gt; &lt;h4&gt;Page Footer&lt;/h4&gt; &lt;/div&gt; &lt;/div&gt; &lt;div data-role="page" id="LISTPAGE"&gt; &lt;div data-role="header"&gt; &lt;h1&gt;Page Two&lt;/h1&gt; &lt;/div&gt; &lt;div data-role="content"&gt; &lt;ul data-role="listview" id="LIST"&gt;&lt;/ul&gt; &lt;/div&gt; &lt;div data-role="footer"&gt; &lt;h4&gt;Page Footer&lt;/h4&gt; &lt;/div&gt; &lt;/div&gt; &lt;div data-role="page" id="DETAILSPAGE"&gt; &lt;div data-role="header"&gt; &lt;h1&gt;Page Three&lt;/h1&gt; &lt;/div&gt; &lt;div data-role="content" &gt; &lt;ul data-role="listview" id="DETAILS"&gt;&lt;/ul&gt; &lt;/div&gt; &lt;div data-role="footer"&gt; &lt;h4&gt;Page Footer&lt;/h4&gt; &lt;/div&gt; &lt;/div&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload