.load() info is not recognizing the CSS styles

Question

I am making an HTML5 app, and I am loading data from a database into the HTML by using the .load() function of jQuery. The function work great, but the problem is that the HTML code loaded is it not modified by the style sheet (jQuery Mobile). The reason that I am doing this is because I would be using PhoneGap Build to get an android app.

Here is my code break into pieces:

HEAD:

<head> 
<title>Parking Lot App</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" />
<link rel="stylesheet" href="themes/florida_tech.min.css" />

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

<script type="text/javascript">
    $(document).ready(function(){
    $( "#maps" ).get( "map_list.php");
    window.setTimeout(function(){ document.location.reload(true); }, 10000);
    });
</script>

</head>

BODY:

<body>  

    <!-- HOME PAGE -->
    <div data-role="page" id="home_page" class="name"  data-theme="a">

    <!-- HEADER HOME PAGE -->

<div data-role='header' id='header'>
    <h2>
    Parking Lot App
    </h2>
    <a href='index.html' data-iconpos='notext' data-icon='home'></a>
</div>

    <!-- CONTENT HOME PAGE -->
<div data-role="content" data-theme="a" id="maps">

</div>

    <!-- FOOTER HOME PAGE -->

<div data-role="footer" data-position="fixed">
    <h3> Senior Design Project </h3>
</div>

</div> <!-- END OF HOME PAGE -->

</body>

And finally the file (after loading) that I am having trouble with, MAP_LIST.PHP:

<ul data-role="listview" data-inset="true" data-divider-theme="a" data-count-theme="b">
<li data-role="list-divider"> Parking Lots </li>
<li>
    <a href="#mapdata1" 
    data-inline="true"

    > Parking Lot 1
    <span class="ui-li-count">0</span></a></li><li><a href='#info'> Help </a></li>
</ul>

I was wondering if there is another/better way to paste the data from the database into my HTML code so that the styling would modify the code.

insdie "MAP_LIST.PHP", specifically, inside `ul` `$("ul").listview()`. — Omar, Apr 10 '14 at 16:38
@Omar - It answers this perfectly, when adding dynamic content in jQuery Mobile one has to trigger the "create" method to update. — adeneo, Apr 10 '14 at 16:39
@adeneo when using `.append()` isn't the same as using `.load()` or `.get()`. test yourself. — Omar, Apr 10 '14 at 16:41
@Omar what do you mean by `$("ul").listview()`? your answer kind of confused me. — JoseD, Apr 10 '14 at 16:55
He's quoting directly from the dupe, which he claims isn't a dupe, where you can use `$('ul').listview('refresh');` to refresh the list. — adeneo, Apr 10 '14 at 17:04
@Omar I added the JS .trigger("create) in my MAP_LIST.PHP, and it worked once the html file loaded it. Thanks a lot — JoseD, Apr 10 '14 at 17:09
@adeneo thanks for the help as well. Both of your comments were helpful — JoseD, Apr 10 '14 at 17:10
@adeneo event `.listview("refresh")` won't work as long as the listview isn't _created_ / _initiated_. — Omar, Apr 10 '14 at 17:21

Omar · Answer 1 · 2014-04-10T17:23:15.563

1

When using .load() or .get() isn't the same as using insertion functions e.g. append() / prepend(). The former functions use Ajax to pull data, so you need to call enhancement after Ajax call is done.

Using .get()

$.get("URL", function (data) {
   var list = $(data).find("#listID");
   $("#target_div").append(list);
   $("#listID").listview();
}, "html");

Inside URL, give listview an id.

Demo - Code

edited Apr 10 '14 at 17:23

answered Apr 10 '14 at 17:14

Omar

32,302
9
69
112

.load() info is not recognizing the CSS styles

1 Answers1