Databases
StackOverflow2013
Postsdbo
POjQuery Mobile Styling Loaded Content from Another File
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery Mobile Styling Loaded Content from Another File
    text
    copied!<p>I am looking to find a way to have jQuery Mobile render data being loaded onto the page. I know that very similar topics has been discussed mn the past, but nothing seems to be a perfect match (or close enough to result in me finding an answer).</p> <p>The issue is that jQuery mobile will dynamically apply classes to HTML elements when a page is loaded. Content being pulled in through JavaScript does not get transformed because the process is run before the JavaScript content is placed onto the page. The fix for this supposedly is to use the .trigger('create') function. It seems though that this doesn't work when you use the load() function to pull content from external pages.</p> <p>I am able to get the data from the twitter.html file (example below) just fine, it just isn't being formatted via jQuery Mobile</p> <p>To help demonstrate my point, I've tried to put together some starter examples of the script. Unfortunately because I am loading an external file there is no easy way to represent this issue without saving the files to your computer to test them out.</p> <p><strong>Main file</strong> (index.html)</p> <pre><code>&lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1" /&gt; &lt;script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="http://jquerymobile.com/demos/1.1.1/js/jquery.mobile-1.1.1.js" type="text/javascript"&gt;&lt;/script&gt; &lt;link rel="stylesheet" type="text/css" href="http://jquerymobile.com/demos/1.1.1/css/themes/default/jquery.mobile-1.1.1.css" /&gt; &lt;script type='text/javascript'&gt;//&lt;![CDATA[ $(window).load(function(){ $(document).ready(function(){ $('#container').load('twitter.html'); $('#container').trigger('create'); }); });//]]&gt; &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div data-role="page" class="type-home"&gt; &lt;div data-role="content"&gt; &lt;!-- Load the Twitter Data --&gt; &lt;div id="container"&gt;&lt;/div&gt; &lt;ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f"&gt; &lt;li data-role="list-divider"&gt;Sample&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Ignore this&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;And look for Twitter data above&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt;&lt;!--/content--&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><strong>File being called</strong> (twitter.html)</p> <pre><code>&lt;script type="text/javascript" charset="utf-8"&gt; jQuery(document).ready(function($) { var url = "http://search.twitter.com/search.json?callback=?&amp;rpp=10&amp;q='jquery'"; $.getJSON( url, function( data ) { var twitterList = $( "&lt;ul data-role='listview' data-inset='true' data-theme='c' data-dividertheme='b' /&gt;" ); $.each( data.results, function( index, item ) { $( "&lt;li /&gt;", { "text" : item.text } ) .appendTo( twitterList ); }); $( "#tweets" ).fadeOut( "fast", function(){ $( this ).empty() .append( twitterList ) .fadeIn( "slow" ); }); }); }); &lt;/script&gt; &lt;div id="tweets"&gt;Loading Tweets...&lt;/div&gt; </code></pre> <p>Can anyone provide an example of a working method to call a file in this way?</p> <p><strong>Pages that I've looked into related to this:</strong></p> <p>I have like 10 pages to reference, but I'm a noob on this site so I am limited to just 2.</p> <ol> <li><a href="http://blog.stikki.me/2011/08/18/loading-dynamic-content-in-jquery-mobile-with-jquerys-load-function/" rel="nofollow">http://blog.stikki.me/2011/08/18/loading-dynamic-content-in-jquery-mobile-with-jquerys-load-function/</a></li> <li><a href="http://blog.dkferguson.com/index.cfm/2011/3/15/jQuery-Mobile-styling-loaded-content" rel="nofollow">http://blog.dkferguson.com/index.cfm/2011/3/15/jQuery-Mobile-styling-loaded-content</a></li> </ol> <p>I've literally spent the past 7 hours trying to work this out, so any help would be greatly appreciated. I am brand new to the world of JavaScript, so please take it easy on me.</p>
 

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