Response title
This is preview!
Move this topic
pagebeforechange: Page does not show
in jQuery Mobile
•
2 months ago
I load my page dynamically before showing. Here is my code:
- $(document).bind( "pagebeforechange", function( e, data ) {
- var hash = $.mobile.path.parseUrl( data.toPage ).hash;
- var name = hash.replace('#', '');
- if($(hash).length !== 0)
- {
- // id already loaded
- return;
- }
- $.get(name + ".html").success(function (result) {
- $('<div data-role="page">').attr('id', name).html(result).appendTo('body').trigger('create');
- });
- });
What it actually does: Well, nothing. The page injecting part works fine and I can see my page in the DOM. However jQM doesn't display it.
It works when I add a $.mobile.changePage(hash) after appending it to the page, but I cant do this when the page has already been loaded or I would get an endless loop (since changePage calls pagebeforechange). The html files just contain the inner part of a page btw (data-role="content etc).
1
Replies(7)
Re: pagebeforechange: Page does not show
2 months ago
What is it that you are trying to accomplish?
There is no need to do this jQuery Mobile does this for you. One of the major features of JQM is that it loads and unloads pages from the document using AJAX. You don't need to do anything special. Just use normal <a> tags and JQM does the work.
There is no need to do this jQuery Mobile does this for you. One of the major features of JQM is that it loads and unloads pages from the document using AJAX. You don't need to do anything special. Just use normal <a> tags and JQM does the work.
Leave a comment on watusiware's reply
Re: pagebeforechange: Page does not show
2 months ago
I'm building an App with Cordova that should run offline.
- One index.html with the basic page structure
- Further html files just contain the content data-role
In the above code, I omitted the part where I load a page-specific javascript file and add a footer to the loaded page.
Leave a comment on jgillich's reply
Leave a comment on jgillich's reply
Re: pagebeforechange: Page does not show
2 months ago
Maybe that's because there's no good reason for doing this.
Why not just use normal <a> tag or if in Javascript $.mobile.pageChange()?
Cordova is irrelevant to this.
If you really need to inject a page (such as when you generate the content dynamically), or simply want to unnecessarily complicate things, there is documentation here:
http://jquerymobile.com/demos/1.2.0/docs/pages/page-dynamic.html
Why not just use normal <a> tag or if in Javascript $.mobile.pageChange()?
Cordova is irrelevant to this.
If you really need to inject a page (such as when you generate the content dynamically), or simply want to unnecessarily complicate things, there is documentation here:
http://jquerymobile.com/demos/1.2.0/docs/pages/page-dynamic.html
Leave a comment on watusiware's reply
Re: pagebeforechange: Page does not show
2 months ago
Actually what I do is pretty similar to this example.
But why isn't there a good reason for doing this? I don't see any better solution for doing it this way. I am really open to any suggestions, but I've searched lots of hours for this and everything I have found is that jQuery Mobile doesn't offer any solution for this problem since it's made for websites, not for apps.
I start with a pretty standard index.html site which loads JQM and all other scripts. Since this is always the first page when someone starts the app, I don't need to include this stuff in all other sites. At least that's how I would expect this to work, but sadly JQM doesn't work that way. So i decided to use a hash-based navigation.
For this to work, I have to load the content in some way. I could just use the multipage template and put everything in my index.html, but this is a horrible idea for larger apps. So I handle the pagebeforechange event and load the requested file and inject it into the DOM.
Since the event is called pagebeforechange, I expect that JQM hasn't event started to load the page. Thus the above should work. Sadly it doesn't, and sadly I still don't know why. I got it working now (will post a example later, I'm on the wrong machine atm), but I would still be interested in whats wrong with the above code.
Sorry if I sounded a bit rude. I am thankful for every answer, but it would really surprise me if there is actually a better way to do this.
Leave a comment on jgillich's reply
Re: pagebeforechange: Page does not show
2 months ago
Not quite sure what you are saying here, but I will try to guess.I start with a pretty standard index.html site which loads JQM and all other scripts. Since this is always the first page when someone starts the app, I don't need to include this stuff in all other sites. At least that's how I would expect this to work, but sadly JQM doesn't work that way.
I'm guessing you are complaining because you think you have to include all the the CSS and scripts in the <head> section of every page, and because you think there's something horrible about that, and you think you have to concoct some elaborate scheme to "fix" that.
If you do this correctly - simply place links to your CSS and JS files in <head> (rather than having exhaustive CSS and JS content within <head> directly) the overhead is negligible, especially in a native app where a webview is retrieving pages from the local file system.
JQM ignores <head> content (other than title) on all but the entry page. So, the webview retrieves maybe a couple thousand extra bytes that don't need to be retrieved, and then JQM throws it away. The resources (JS and CSS) are NOT loaded on every page. Everything in <head> except for the title is stripped away, and JQM puts the page content into the DOM.
The overhead is negligible, and the user will never notice the difference. I doubt that the difference would be even 1mSec.
But if this bothers you anyway (after all, this does increase the size of your app, and if you had several hundred short pages in your app, perhaps <head> could add 10% or more), you can simply omit it on all but the entry page. It will work just fine. JQM is going to ignore it anyway. In fact, I do this myself in Phonegap apps. Problem solved. Just have an empty <head>, optionally with <title> if you wish. (Probably is no use for <title> in your PhoneGap app, so just empty <head>.)
The reason this is repeated on every page is in case the user hits the browser refresh. In a Phonegap app, it isn't possible for the user to refresh the browser, and so repeating CSS and JS in the <head> of every page is not necessary. Just leave it out.
The only case where it would be necessary would be if you use data-ajax="false" or data-rel="external" on one or more links. If you are doing this, either you are misunderstanding JQM's Ajax model, or else you are trying to use some JS that wasn't designed to work with JQM. I don't recommend the latter. Stick to stuff that works with JQM, because if you use data-ajax="false" or data=rel="external", you are abandoning one of the major benefits of JQM.
You're trying to solve a "problem" that doesn't need to be solved.
When you link to truly external pages, I recommend that you open them in the device's browser, outside of your app - just use target="_blank".
If you are creating a site that might be used in a PhoneGap app, and also on the web, then you can use a static site generator (I use Middleman) and have it produce different builds for each scenario. You can easily produce a version with <head> content on every page for the web, and an alternate version with <head> content only on the entry page for PhoneGap.
Leave a comment on watusiware's reply
Re: pagebeforechange: Page does not show
2 months ago
Yeah you guessed it right. The reason I was so vague is that I remembered omitting <head> actually wouldn't work, which is obviously not true. (And probably my English sucks, sorry for that too)
I thought about using an static site generator already. Conclusion was that using one would make things more complicated, I prefer simple solutions. Also it would add some overhead in terms of file size - as you said that would be negligible, but still unnecessary.
Problem with full html documents including <head> is that there are things like a footer that I need on every page. I could insert it using JavaScript (which would be similar to my current approach) or I could use a static site generator...
I mean, yes probably JQM offers a method to load additional pages by default. But I don't see any disadvantages in my solution. Less data to load for each page, pages stay in the memory after navigating away, index.html is always the active page and therefore a refresh isn't a problem etc.
Leave a comment on jgillich's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to jgillich's question
Statistics
- 7 Replies
- 267 Views
- 0 Followers
