jquerymobile and AJAX

Question

seems to me that I didn't fully understand the concept behind jquerymobile, because I have no idea how to solve this issue.

What I want to do is load some HTML Content via AJAX, according to location.hash, put it into a new page and load this page.

But if I create a page myself by using the pagebeforechange event, jquerymobile just ignores it, creates its own div and my content won't be displayed.

How do I have to do it?

Edit: This is how I am currently doing it, but it wont't work.

$(function() {

    getPageContent(top.location.href, false);

    $(document).bind( "pagebeforechange", function( e, data ) {

            getPageContent(data.toPage, true);
    });


});



function getPageContent(pageUrl, changedPage) {

    var re = /.*\/#(.*)/;
    var result;


    result = re.exec(pageUrl);


    window.page = result[1].substr(0,3);
    window.id = result[1].substr(3);



    window.ajaxUrl = "request.php?page="+window.page+"&id="+window.id;

    $.ajax({

        url: window.ajaxUrl,

        success: function(data) {

            if(data.error) {
                alert(data.error);
            }
            else if(data.data) {
                if(changedPage) {
                    changePage(data.data));
                }
                else {
                    $('#content[role="main"]').html(atob(data.data));
                    setupPage();
                }

            }
            else {
                alert("UNKNOWN ERROR: "+data);
            }       
        }

    });

}

function changePage(html) {


    var div = "<div></div>";

    var newPage = $(div).attr("data-role", "page").attr("data-url", window.page+window.id);

    var header = $(div).attr("data-role", "header");
    var content = $(div).attr("data-role", "content");
    var footer = $(div).attr("data-role", "footer");

    $("body").append(newPage);
    newPage.append(header, content, footer);

    content.html(html);

    newPage.page();
}

Answer 1

It does this for you automatically - just make a regular link to the page and jquery mobile will shwo the loading spinner, load it in the background via ajax, then transition to the new page.

Make sure all your pages are decide with unique IDs and data-role='page'. Check out the start guide here: http://jquerymobile.com/demos/1.1.0/docs/about/getting-started.html

Answer 2

Complete edit of the whole answer:

First. Set your body id to id=body. Then when you want to load the new page and change to it, use an ajax call like this:

$.get(window.ajaxUrl, function(data){
    $('#body').append("<div id='newPage' data-role='page'></div>"); //Creates a new page.
    $('#newPage').html(data); //Loads the html content into the new page.
    $.mobile.changePage('#newPage'); //Navigates to the new page.
}

This sends an ajax call with the method GET to the url found in your window.ajaxUrl. If the call is successful, it creates a new page named "newPage", and fills it with the data received from the ajax call. Then redirects to the newly created page.

This jsFiddle shows the basics of how it works. However, it doesn't use any ajax call.

Answer 3

You have to refresh the page with jQueryMobile :

 $("#your-page").trigger("create");

--Edit

<script> 
     $("#thepage").live("pageshow", function(){
        $("#thepage).trigger("create");
       });
</script>

Change the content of #thepage before 'pageshow' event