jquery mobile - loading content into a div

Question

Jquery Mobile works by “hijacking” a page and loading content and injecting it into the page.

It seems that this creates a problem when i try to inject other content into the page.

I have my index.html and then a page2.html file. I'm setting up jquery mobile in the normal fashion wrapping the contents of each page in a div like so:

<div id="container" data-role="page">
   // my content
<a href="page2.html">go to page 2</a>
</div>

when the user taps go to page 2, it does the nice slide effect. The url in the location bar looks like this: index.html#page2.html

jquery mobile inject the content of the page using the anchors and applies the transition. nice so everthing works great up to the next part.

On page2.html, i have a section that is loading some external data and injecting it into a div.

<a href="http://www.somedomain.com/myata.php" class="ajaxtrigger" data-role="none">mydata</a>
<div id="target"></div>
<script src="js/code.js"></script>
<script src="js/loader.js"></script>
<script type="text/javascript">
$(document).ready(function(){
     $('.ajaxtrigger').trigger('click');
});
</script>

The problem i am having is that when i enable the transitions in jquery mobile this script doesn't work. It won't load the data into the div. bummer.

Anyone know what i need to do to get it to trigger and load the content into that div?

Answer 1

Are you trying to use $(document).ready(function(){ $('.ajaxtrigger').trigger('click'); }); to capture the click/tap to page2 in index.html, and then insert data onto page2.html?

If so, that wont work, as you cant pass data between pages in that manner. Try giving page2.html's main div an id of #page2 and use the pagebeforeshow method (http://jquerymobile.com/test/#/test/docs/api/events.html)

$('div#page2').live('pagebeforeshow',function(event, ui){
  $('div#page2 div#ajax_loaded_content').load('url_to_load_from.php');
});

Answer 2

I'm having a similar issue (as mentioned in the comment above) and I just figured it out (at least for me). When jQuery Mobile loads the next page via ajax, it keeps the previous page in the DOM so that the back button will work correctly. The problem now is that if you use javascript on the second page to reference any of the DOM elements (particularly by ID) you have to take into account that the elements from the previous page are still in the DOM. Since IDs are designed to be unique, document.getElementById() isn't as reliable and so $("#myDiv") isn't either.

What I just started doing is referencing the DOM elements by class name (e.g. $(".myDivClass")) since css classes are designed NOT to be unique and that seems to do the trick. The side effect is that whatever changes you make in javascript will be made to all hidden pages as well but it gets the job done. Another idea that's coming to mind as I'm typing this is to give each <div data-role="page"> a unique ID and from now on query elements using $("#myUniquePage #myInnerDiv") instead of $("#myInnerDiv").

Hopefully that helps.

Answer 3

Try this:

$('page2.html').bind('pageshow', function() {
   $('.ajaxtrigger').trigger('click');
});

Answer 4

Another option would be to generate a unique id for the DOM element you want to manipulate on each page load, so that you don't have the problem with duplicate ids that Adam describes. I've done this in C# (w/Razor syntax) like so:

@{ string headerAutoGenSym = "header_" + new System.Random().Next(1000000000); }
@section header
{
    <div id="@headerAutoGenSym"></div>

    <script type="text/javascript">
        $(function () {
            $(document).bind("pageinit", function () {
                $.get(
                    '@Url.Action("myAjaxURL")',
                    function (data) {
                        $('#@headerAutoGenSym').append(data);
                    }
                );
            });
        });
    </script>
}