Jquery Mobile, Change Part Of A Page

I'm trying to change a part of a page, I know that this has been asked before but I cannot really find a good solution to my issue. The red colour is the part of the page I want t

Solution 1:

I have done my own ajax loadpage that works but is there a way to use the jquery mobile internal since it feels like a hack.

jQuery Mobile is based on Ajax Navigation; it uses Ajax to retrieve pages, load them into DOM and then initialize them before showing them. This been said, when you use Ajax to load external data, you are doing it the right way.

You can use $.ajax(), .load() or $.get(). However, bear in mind that you need to manually initialize data retrieved - in case it contains jQM widgets - using enhancement methods e.g. .enhanceWithin().

Should I load script for each page, using the main-page header to load all of them at once or is there a way to load the script when that content is loaded.

As you're using Single Page Model, it is safer (maybe you should) load all JS libraries and style sheets in head for each and every page. Nevertheless, jQM will load those links only once on first page's initialization, the rest of pages will be loaded/retrieved via Ajax. jQM loads first data-role=page it finds in any external page and neglects any thing else.

Why to load all JS and style sheets? Is to get jQM working again in case a user refreshes current page. In this case, the current refreshed / reloaded page becomes first page.

Binding events and adding listeners:

When using jQM, you need to stay away from .ready() and/or $(function(){}) and use Page Events. Except for some cases e.g. using External toolbars, panels or popups. Those External widgets need to be initialized manually on first run before page is loaded.

$(function () {
  $("#ExternalPanel").panel();
});

As for adding listeners, use pagecreate event.

$(document).on("pagecreate", "#pageID", function () {
  $("foo").off("click").on("click", function () {
    /* do something */
  });
});

You need to remove .off() previous bindings and then .on() add them again, since external pages go through pagecreate whenever they are shown. Because jQM removes external pages from DOM once hidden.

One final point on appending elements to active page. You need to be specific as where you want to add those elements retrieved by Ajax.

var activePage = $.mobile.pageContainer.pagecontainer("getActivePage");
$.get("URL", function (data) {
    $("#foo", activePage).html(data).enhanceWithin();
}, "html");

Demo - Code