.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>

Answer 1

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>