.get() method in jquery mobile doesn't load when changing pages

Question

I have a mobile application built with phonegap and I'm using jquery mobile. On the first page I have link to another, href="page2.html".

When the second page loads, I am using .get() to retrieve xml data and convert it to json using xml2json.js. The page works properly if I make this page the index and load it up when the application is opened, so I know the script is working. However, when loading it via link from another page, the .get() method doesn't seem to load up any data.

<script type="text/javascript" src="cordova-2.4.0.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
        <script type="text/javascript" src="js/jquery.xml2json.js"></script>
        <script type="text/javascript">
            $.get('http://domain.com/app/getfacilities/?org=mysite', function(xml){
                  var facilities = $.xml2json(xml);
                  for (i=0; i<=facilities.facility.length; i++){
                    var locName = facilities.facility[i].name;
                    var id = facilities.facility[i].id;
                    $("#fieldList").append("<li><a href='#'>" + locName + "</a></li>").listview('refresh');
                  }
                  });
            </script>
        <script type="text/javascript">
            app.initialize();
        </script>

Those script tags (in your page2.html), are they part of a HEAD or BODY? — Gajotres, Apr 17 '13 at 15:40

andleer · Accepted Answer · 2013-04-18T15:54:18.390

0

You need to place your <script> tag inside of your <div data-role="page"> tag. <script> tags that reside outside of your <div data-role="page"> tag will only be loaded on your first/initial page load which seems consistent with what your are experiencing.

<div data-role="page">
    <script>
        // js script here
    </script>
</div>

edited Apr 18 '13 at 15:54

answered Apr 17 '13 at 18:03

andleer

22,388
8
62
82

Bummer, still not working. When using jqmobile and phonegap together, do I have to include all of this script on each page that I create? I've built apps with Nimblekit and that was pretty straight forward. I feel like I'm missing something here :-(. – Mark Kamyszek Apr 17 '13 at 19:43
Excellent, this worked. Just removed all of the scripts from the page and included the .get() method in the body. Tks, @andleer! – Mark Kamyszek Apr 18 '13 at 11:43

.get() method in jquery mobile doesn't load when changing pages

1 Answers1