Question

As I know that in JQuery Mobile, every page changing is equivalent to create new “page” div, Can we just change a portion in the “content” of the page, something like subpage?

Answer 1

1. jQuery Mobile doesn’t require you to manage pages by creating additional div element in the same HTML file – you can do it perfectly fine in a different HTML file and make a transition to it (perhaps with data-prefetch attribute set) using <a>.

2. Nothing prevents you from writing a jQuery plug-in, jQuery UI plug-in or (scary though, I know) pure JavaScript that will alter the contents of the DOM element dynamically and manage pages loading according to data received from server – with necessary calls to things of the listview('refresh') ilk – to ensure proper styling.

With that said you have to ask yourself two things:

1. Why do you need to do it? Can’t you manage by pre-creating the page using jQuery Mobile paradigm and just retrieving and inserting the data into the new page?

2. What will the performance implication (if any) will be, if I have to perform DOM manipulations on every ‘page transition’?

As a side note – jQuery Mobile provides you with methods that allow for page manipulation:

$.mobile.changePage and $.mobile.loadPage that you can use (look at pageContainer option).

See API docs here