Issues With .mobile.loadpage And External Page In Jquery Mobile

In my jquery mobile application I have one page that I want to load external content. Trying to follow the docs, and my code doesn't produce any script errors, but my external cont

Solution 1:

To bind events in jQuery Mobile, use pagecreate which is equivalent to .ready(). To load an external page, use .pagecontainer("load", "target", { options }) as .loadPage() is deprecated and will be removed in jQM 1.5.

In your case, $.mobile.pageContainer is $("#staff-directory-container"). And note that Ajax should be enabled.

$(document).on("pagecreate", "#pageID", function () {
  $("#loadBtn").on("click", function () {
    /* define new pagecontainer then load */
    $.mobile.pageContainer = $("#staff-directory-container").pagecontainer();
    $.mobile.pageContainer.pagecontainer("load", "myContent.html");
  });
});