Loading...

Search jQuery

Search

jQuery Forum

lenscraft

On Ajax loading

in jQuery Mobile • 10 years ago

I'm gradually getting a handle on the whole jQM paradigm, but there are still some things that I haven't figured out. I'm hoping that someone can help me...

1) jQuery Mobile loads subsequent pages via Ajax. But what should those subsequent pages look like? Full web pages with a head, etc? Or just the <body> contents?

2) If ajax-loaded pages should be HTML fragments rather than entire documents, are there any request params that jQM sends, or can I somehow specify these parameters so that I can know to decorate pages differently depending on whether jQM is requesting them?

3) Is there any way to access the jQM-returned HTML before jQM turns it into virtual pages?

Thanks in advance for any help you can offer.

(I haven't found any really detailed documentation on how Ajax loading happens. If there is a write-up on what's happening *in detail*, I'd love a pointer.)

1

Replies(17)

watusiware

Re: On Ajax loading

10 years ago

1) jQuery Mobile loads subsequent pages via Ajax. But what should those subsequent pages look like? Full web pages with a head, etc? Or just the <body> contents?

Full web pages with a head, etc.

jQuery Mobile will discard most of this (all but the title), except on the first page.

This permits the user to enter your site at any page.

2) not applicable. See above.

3) Is there any way to access the jQM-returned HTML before jQM turns it into virtual pages?

pagecreate event.

(I haven't found any really detailed documentation on how Ajax loading happens. If there is a write-up on what's happening *in detail*, I'd love a pointer.)

http://jquerymobile.com/demos/1.2.0/docs/pages/page-links.html

http://jquerymobile.com/demos/1.2.0/docs/pages/page-navmodel.html

http://jquerymobile.com/demos/1.2.0/docs/pages/page-scripting.html

It's a shame the documentation is still in the form of a "demo" and is not easily search-able.

lenscraft

Re: On Ajax loading

10 years ago

Thanks for the response. It's very useful.

As I understand it, the 'pagecreate' event is called once for each virtual page (data-role='page') and not for the entire HTML structure returned from the server. Is this correct?

What I would like access to is the HTML returned, especially the 'body' tag, so that I can copy some data attributes that are stored there to the individual page DIVs. Do you know if there is a way to do this?

- Ron

watusiware

Re: On Ajax loading

10 years ago

As I understand it, the 'pagecreate' event is called once for each virtual page (data-role='page') and not for the entire HTML structure returned from the server.

Not sure what you mean by "the entire HTML structure returned from the server". Normally, that is the head and body of a single page - unless you are using a multi-page document. Although there is a provision for multi-page documents, I don't recommend it, and it is one of the top reasons why people come here with problems. Don't do it.

Yes, pagecreate is called once for each page, regardless of how the page was packaged.

What I would like access to is the HTML returned, especially the 'body' tag, so that I can copy some data attributes that are stored there to the individual page DIVs.

I think you still aren't understanding the page model.

There's only one <body> element. There's only one document. The content of the body element in the DOM comes from the first page that was visited. The <body> tags of subsequent pages is ignored. Any attributes found there are ignored. They are not merged with the attributes that came with the first page visited.

You can certainly use jQuery functions to access the body element in the DOM, or any other element, for that matter, and to manipulate the content of the DOM.

What is it that you're really trying to accomplish? You've stated your proposed solution (which is not consistent with the way jQuery Mobile works), but not the problem. That seems to be working backwards.

It's likely there is a much simpler solution, if you will state the problem.

If you want to associate some attributes with some individual page, just put them in the element that defines the page. e.g. normally a <div data-role="page">. I'd suggest you use data- attributes.

lenscraft

Re: On Ajax loading

10 years ago

It's fairly complex. We have a JSP filter stack that includes Struts and Sitemesh (a decorator filter.) Some data is available only after the page has rendered, so it is added to the <body> tag as created by the decorator.

The individual documents can contain multiple data-role pages, and these are in turn wrapped by the decorator, adding the <head> tag, wrapping the pages with the <body> tag, and adding data attributes to the <body> that are then used by JS on the page.

So, bottom line, it's hard to extract one particular piece of data from the <body> tag as created by the Sitemesh decorator, so I'd like to perform the extraction when jQuery gets the response from the Ajax request, copying the value of that data attribute to the individual data-role pages.

Ron

watusiware

Re: On Ajax loading

10 years ago

Some data is available only after the page has rendered, so it is added to the <body> tag as created by the decorator.

Well, that's not going to work with jQuery Mobile for reasons I've already stated. Anything you put as attributes in the <body> tag is going to get ignored, except on the first page the user visits.

Surely, you can arrange to add the attributes to the page <div> instead.

The individual documents can contain multiple data-role pages

That's not gonna work either.

Multi-page documents in JQM are meant really for small sites that can be self-contained in a single document.

If you want to link from one multi-page document to another, or from single-page to multi-page or vice-versa, then you have to use data-rel="external" or data-ajax="false".

What this does is bypass the whole AJAX page-loading scheme, and just load a new document and initialize JQM all over again. You don't get a page transition, and you get horrible performance and often unattractive visual artifacts.

data-rel="external" is meant as a way of linking to external sites, not a cure-all for things that mysteriously don't work because the developer doesn't understand the AJAX page-loading model. Frankly, I don't think it should ever be used, because in most cases you would be better-off opening external sites in a separate tab, window, or (for native apps) in the platform's web browser. (When you do this, then data-rel="external" actually isn't needed. It won't hurt, but it isn't required, and is simply ignored.)

I don't recommend ever using multi-page documents in JQM. It's the #2 cause of trouble with JQM sites, right behind duplicate IDs. If you're doing this, you shouldn't be using JQM in your project.

JQM is a bit of an "island", because it does some things in a way that the framers of HTML and developers of browsers didn't anticipate. It doesn't play particularly well with other Javascript libraries that weren't designed specifically to be compatible, or with backend frameworks that aren't flexible enough to conform to it's requirements. It isn't suitable for all projects, and sounds like it might not be for yours.

lenscraft

Re: On Ajax loading

10 years ago

I expect that I'm not communicating well. I know that the way we're using multi-page documents is entirely appropriate.

My question remains unanswered... is there any way to access the HTML fetched by the ajax loader, before it is stripped down to individual pages?

Also, to revisit a topic... it seems like it would be more efficient to detect a jQM ajax loader request and return only the page divs, rather than the entire wrapper document. Does jQM support the ability to add a parameter when it's performing an ajax load?

watusiware

Re: On Ajax loading

10 years ago

I know that the way we're using multi-page documents is entirely appropriate.

I think you will be sadly disappointed if you go down that route.

If you really insist (but there is really no good reason to use multi-page documents) you can try the sub-page plugin, though I'm not sure it's been maintained for the current version. (Nope: unfortunately, hasn't been updated since 1.1 alpha):

https://github.com/ToddThomson/jQuery-Mobile-Subpage-Widget

is there any way to access the HTML fetched by the ajax loader, before it is stripped down to individual pages?

Don't know what you mean by "stripped down to individual pages".

The loader takes the document content, minus <head> and loads it into the DOM. It then "enhances" the content of the page by instantiating the widgets found in the page. You have can a callback called either before or after the page is enhanced, and before the page is displayed. You can do any DOM manipulation you might like in these callbacks.

If you are asking if it's possible to modify the page before it is inserted into the DOM, the answer is "no".

Notice above that I said "page", not "pages". The AJAX loader never loads multiple pages from a single document document. The AJAX loader only loads single pages. Not only will it ignore the <head> element, it will also ignore all pages present in a document, other than the first one.

When you successfully load a multi-page document, the AJAX loader is never involved in that. As I've been trying to tell you, in that case, a full page load must be forced, by using data-rel="external" or data-ajax="false". If you do not do that, then you will only get the first of your multiple pages.

It's unfortunate that the documentation isn't terribly clear about this, nor the dangers of ignoring it. The author of the subpage widget states it pretty clearly, though:

    The functionality provided by this widget is a workaround for the jQuery Mobile
    loadPage() function which only loads the first page in an AJAX response. You do
    not use this widget on your initial document load

it seems like it would be more efficient to detect a jQM ajax loader request and return only the page divs, rather than the entire wrapper document.

It certainly would be marginally (but only marginally) more efficient if the server were to return only the page content, rather than a complete document with <head>. But jQuery Mobile doesn't work that way, and there isn't an option to make it work that way.

You need to accept JQM as it is, not as you wish it were. You're certainly welcome to trot over to GitHub and open an Issue to suggest that.

The reason each page is delivered with <head> is because, otherwise, it would only be possible to enter a site at the home page. It would be impossible for users to save deep links. I think that would be a non-starter for many sites.

Does jQM support the ability to add a parameter when it's performing an ajax load?

Not sure what you are asking. This is for letting the server know that it's serving an Ajax page? For what purpose?

lenscraft

Re: On Ajax loading

10 years ago

I think you will be sadly disappointed if you go down that route.

I have gone down that route, and the site seems to be working fine. That's not the issue. (As an example page, see Working at Microsoft . All of the links in the 'Why Work for Us' section are to sub-pages.

I am surprised that you're suggesting the use of a plugin, as this is a well-documented and fairly core feature of jQM. I believe that you're wrong when you say "The AJAX loader never loads multiple pages from a single document."

Not sure what you are asking. This is for letting the server know that it's serving an Ajax page? For what purpose?

Yes, to allow the server to return only the <div data-role='page'> elements.

It appears that you don't have an answer to my initial question. I appreciate your suggestions that it was a mistake to use jQM, but I disagree.

watusiware

Re: On Ajax loading

10 years ago

(As an example page, see Working at Microsoft . All of the links in the 'Why Work for Us' section are to sub-pages.

Only one problem with your example: that site doesn't use jQuery Mobile. It uses jQuery UI.

Your example is as valid as saying that microbes in a scoop of sand from Kansas proves that there's life on Mars...

I believe that you're wrong when you say "The AJAX loader never loads multiple pages from a single document."

http://jquerymobile.com/demos/1.2.0/docs/pages/page-navmodel.html

Documents loaded via Ajax will select the first page in the DOM of that document to be loaded as a jQuery Mobile page element. As a result the developer must make sure to manage the id attributes of the loaded page and child elements to prevent confusion when manipulating the DOM

If you link to a multipage document, you must use a data-ajax="false" attribute on the link to cause a full page refresh due to the limitation above where we only load the first page node in an Ajax request due to potential hash collisions. There is currently a subpage plugin that makes it possible to load in multipage documents.

lenscraft

Re: On Ajax loading

10 years ago

Only one problem with your example: that site doesn't use jQuery Mobile. It uses jQuery UI.

Visit the site using a mobile user agent. We use the same URLs, but serve up different content.

Thanks for correcting me regarding subpages. (It turns out that we are indeed using the subpage plugin. I'd forgotten that we are using that.)

My initial question remains unanswered. Is there any way to access the ajax-loaded HTML before it's disassembled and injected into the existing DOM?

watusiware

Re: On Ajax loading

10 years ago

My initial question remains unanswered. Is there any way to access the ajax-loaded HTML before it's disassembled and injected into the existing DOM?

I answered that.

is there any way to access the HTML fetched by the ajax loader, before it is stripped down to individual pages?

Don't know what you mean by "stripped down to individual pages".

The loader takes the document content, minus <head> and loads it into the DOM. It then "enhances" the content of the page by instantiating the widgets found in the page. You have can a callback called either before or after the page is enhanced, and before the page is displayed. You can do any DOM manipulation you might like in these callbacks.

If you are asking if it's possible to modify the page before it is inserted into the DOM, the answer is "no".

lenscraft

Re: On Ajax loading

10 years ago

So you're saying that I *do* get the <body> tag of the downloaded Ajax content in the page create event? How can I access it?

Re: On Ajax loading

10 years ago

just chipping in, Watusiware answered a bunch of things already.

1) If you can identifiy Ajax requests coming in on the server, you can:

if ( !page not requested by ajax){
full header
} else {
<title>only</title>
}

Saves a few k on every page request. So yes, you could send the div-data-role-page only (I'm adding <head><title>only</title><body>my page</body> for good semanitcs)

2) I'm pulling dynamic content on pagebeforeshow, so JQM pulls the (empty page) and I trigger my custom ajax content load on pagebeforeshow.

I'm getting a respone, which I'm modifying as needed before injecting into the page and triggering the JQM widgets (where I can't avoid).

So my page handlers look something like this:

$(document).on('pagebeforeshow', '#search' , function() {
var searchPage = $(this);
// content loading - dumb check to make sure this does not retrigger
// while the page is in the DOM and called again
if ( $(this).attr('val') != true ) {
$(this).attr('val') == true;
spin( "show" );
// custom ajax content load
// you could also add success/error handlers here
ajaxUpdate( "where-to-get.html", $('.target'), "my", "custom", "parameters", "" );
}
});

This is for all content loading in my application. All requests go to:

var ajaxUpdate = function update( source, target, param, account, bindings, skip ) {
// local storage y/n
// if (skip === "no"){
// make sure it spins...
spin("show");
$.ajax({
async: true,
type: 'GET',
returnFormat: 'json',
// your params here
data: { value: param, type: account },
url: source,
timeout: 25000,
success: function(data) {
// data is what's coming back
// target is where to put data
// bindings is the bindings to set on the loaded content
ajaxSuccessHandler( data, target, bindings );
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
// error
}
});

So then you need a global success handler. Something like this:

ajaxSuccessHandler = function( data, target, bindings ){
// example how to mess with data
// var makeUp = 'ontouchstart' in document.documentElement === false ? data.replace(/<select/g, "<select data-native-menu='false' ") : data;
// otherwise
var makeUp = data,
keep = target.find('.slot1, .slot2'),
def = target.find('.def');
// multiple pages in the DOM? last() will always be active page
target.last()
.addClass('fade out')
.html('')
.html( makeUp )
.append(keep)
// I hate... this stalls the page until JQM is done
.trigger('create')
.removeClass('out')
.addClass('in')
// for some page bindings, you need the page
var page = target.closest('div:jqmData(role="page")');
spin( "hide" );
// global switch for all content bindings
switch (bindings) {
case "register":
case "new":
case "profile":
bindRegister();
break;
// this needs the page passed
case "search":
bindSearch( page );
break;
...
// almost done
window.setTimeout(function() {
target.removeClass('fade in');
// trigger global plugins (validval/datatables)
validateForm( page, "ajax" );
enhanceDataTables( page, "ajax" );
// update custom dimensions
$(window).trigger('dimensionchange');
spin("hide");
},250);
// done
}

That should get you going.

lenscraft

Re: On Ajax loading

10 years ago

Frequent, that's what I was thinking with regards to trimming my ajax response. (With mobile, every byte counts.) But the question is... how to identify a jQM ajax request? That's what I was getting at when I asked if there was a way to add a custom parameter to each request.

Is it possible to change the 'absUrl' parameter when I get a pagebeforeload event? The documentation isn't explicit about whether this data element is modifiable.

If not, then your code looks like the right solution, albeit a lot more complex.

Kevin B

Re: On Ajax loading

10 years ago

You can identify an ajax request by looking for the x-requested-with header, assuming JQM doesn't modify the jQuery core $.ajax too much.

-- Kevin

Re: On Ajax loading

10 years ago

Hm. I'm doing it server side with Coldfusion like so:

<cffunction name="isAjaxRequest" output="false" returntype="boolean" access="public">
<cfset var headers = getHttpRequestData().headers />
<cfreturn structKeyExists(headers, "X-Requested-With") and (headers["X-Requested-With"] eq "XMLHttpRequest") />
</cffunction>

And then I'm wrapping every page in this:

<cfsavecontent variable="renderedPage">
// just the !doctype and <html> tag
<cfinclude template="../templates/tmp_pagetop.cfm">
<cfoutput><head></cfoutput>
// no Ajax, send the full header
<cfif NOT isAjaxRequest()>
<cfinclude template="../templates/tmp_pageheader.cfm">
</cfif>
<cfoutput><title>#variables.title#</title>
</head>
<body class="initHandler">
<div data-role="page" id="basket"...
...
</cfsavecontent>

If your Ajax is returned junked-encoded vs. gzipped (on my Coldfusion server it is) you should also look into manually gzipping your page snippet.

Problem (at least for me) is how to do this kind of logic for static offline pages. I'm not keen on building every page twice, so a parameter in JQM when loading the page would maybe be handy.

I have not tried adding parameters to JQM ajax calls manually though. But have you checked what you can access here:

$(document).ajaxStart( function() {
console.log("there must be way to access and tweak something here");
}).ajaxStop( function() {
//
});

Maybe an idea.

lenscraft

Re: On Ajax loading

10 years ago

Thanks, that's great info!