I am building a mobile site and I am using the jquery.mobile library. I am facing problems wrt how jquery.mobile is handling the navigation. It is using ajax for all navigation calls and replacing the DOM.
I want normal postbacks and do not need the ajax method.
also, there is a loading <div> on all the pages at the bottom. I do not want that. I know its something to do with the ajax request method.
does anyone have any experience with it? thanks a lot.
Amit, it is not true that jquery mobile uses ajax for all navigation. You can manually navigate between pages programmatically via
$.mobile.changePage('#newpagediv');
You can have multiple pages in the html, preloaded and navigate via button click
<div id="first" data-role="page">
Go to second
</div>
<div id="second" data-role="page">
</div>
Try disabling it in the $.mobile settings like:
$.mobile.ajaxLinksEnabled = false;
The JQM Documentation actually specifies:
$.mobile.ajaxEnabled = false;
Or you could also specify
rel=external
directly on your tags to let JQM load the page "normally" and without ajax.
PS: note that in this case the whole JQM will need to re-initialize (as well as your code) on each new page load.
Related
Considering that the mobile app is not native, but made with phonegap (or something simmilar), i am wondering if there is a javascript / jquery library that i can use to navigate from one html page to another one without the need to reload all ls and css resources.
More or less like jQuery Mobile does it.
One issue would be enhancing all the ui and js widgets on each page
Any ideas?
You can do an AJAX call to whatever the local URL is and wrap the entire response in something traversable via jQuery, like...
// on click link ->
$.get('myUrl.html', function(response) {
var new_body, traversable;
traversable = $('<div></div>', {
html: response
});
new_body = traversable.find('body').html();
// code to replace your content here ...
});
And if you have a lot of scripts/styles running per page, you could traverse through the list of traversable.find('link') and traversable.find('script') to compare what has and has not been used yet. Then append to the document after replacing your markup.
I think it is Phonegap you are talking about.
Yes, Jquery mobile is would be a solution to your problem because whenever we change the page in Jquery Mobile, instead of reloading the whole DOM, it only replaces/inserts (depends on if you enable caching) the new page div to be shown.
Thus, all resources you included initially would persist and be usable in all pages.
Depending on how your html and css are written, you could wrap your pages in divs and use css transforms to position them off screen, then scroll them into view when the user clicks a link.
jQuery mobile inside of phonegap is very, very slow.
I am having troubles with changing pages across my website with jquery mobile. Tough i switched back to the standard window.location, i would like to use changePage() og jquery mobile, but im facing some issues.
When i click the link, the page changes, but the js attached doesn't reload, so im stuck with the content of the preveious page(or not event this). Ive tried different approches: pageReload:true (not working), changing the position of the script tag(works, but creates duplicate content). If anyone has some answers for my question, i'd be grateful. I dont think this issue needs snippets, but here they are:
HTML:
<div class='ui-block-b'>
<a href='nota.php' data-role='button' class='buton_no_bg right' style='color:#b21908; font-family:'Segoe WP Semibold''>190 lei</a>
</div>
Thank you.
To understand this situation you need to understand how jQuery Mobile works. It uses ajax to load other pages.
First page is loaded normally. Its HEAD and BODY is loaded into the DOM, and they are there to await other content. When second page is loaded, only its BODY content is loaded into the DOM.
Solutions:
Put all of your javascript into first HTML/PHP file
Put your javascript into BODY, basically into page div
Turn ajax off
On a jQuery page, I have a login form. The code is simple enough:
<form method="post">
<div data-role="fieldcontain">
.... Form here
</div>
</form>
but the following form is submitted, JQM loads the next page via Ajax POST.
The problem is that any in-line Javasctipt on that new page is NOT initialized. I'm not talking about the $(document) elements etc. the entire in-lined Javascript blocks aren't initialized.
However if I add
data-ajax="false"
to the form tag, everything is fine. The page is loaded and initialized correctly.
Why does this happen, and is there a way to trigger a page initialization with the ajax loaded content?
I've observed this on both Firefox and the Android Webview clients.
Reason data-ajax="false" worked in your case is because it will force a full page reload which will incidentally trigger page markup enhancement.
This is a segment from jQuery Mobile documentation:
It's important to note if you are linking from a mobile page that was
loaded via Ajax to a page that contains multiple internal pages, you
need to add a rel="external" or data-ajax="false" to the link. This
tells the framework to do a full page reload to clear out the Ajax
hash in the URL.
Now in your case if you want to enhance new page content use this:
$('#pageID').trigger('create');
or in case you have also made changes to header and footer use this:
$('#pageID').trigger('pagecreate');
If you want better understatement take a look at my blog ARTICLE, were I am talking about page content markup enhancement in great details. There you will find examples for functions mentioned on top. It can be also found HERE.
If you load your page with the default jQuery Mobile implementation (which utilizes ajax), only the script blocks on the first page (<div data-role="page">) will get loaded.
You can turn off ajax loading via mobileinit which will disable ajax loading globally or you can disable it via the source link.
$(document).on("mobileinit", function(){
$.mobile.ajaxEnabled = false;
});
or
<a data-role="button" data-ajax="false"
href="myPageWithItsOwnScriptBlock.html">Link</a>
If you want to continue using ajax loading, you can place the script block inside of you "page" <div>
<div data-role="page">
<script src="myscript.js"></script>
<div data-role="header">
....
Details here:
http://jquerymobile.com/demos/1.2.0/docs/pages/page-scripting.html
Try to encapsule your inline JS code into something like this:
$(document).bind('pageinit', function(event) {
// your inline code goes here
});
I am developing an application by using phonegap and jQuery Mobile. Phonegap recommends a single document structure. As 5 divs or more in a document are pretty unclear, I'm trying to split up my pages (the div's) into multiple documents. As soon as phonegap loads the app, I want to insert these documents into the index.html.
function loadPage(external_document) {
var docname=external_document+".html";
$.get(docname, function(data) {
console.log(docname+" loading");
$("body").append($(data).find("body"));
$("head").append($(data).find("head"));
console.log(docname+" loaded");
});
}
document.addEventListener("deviceready", function(){
loadPage("DialogCredentials");
}, false);
DialogCredentials.html
<html>
<head>
<script type="text/javascript" src="js/DialogCredentials.js"></script>
</head>
<body>
<div data-role="page" id="dlg_credentials">
<div data-role="header"><h1>Login</h1></div>
<div data-role="content">
...
</div>
</div><!-- /page -->
</body>
</html>
As soon as the loadPage gets executed there should be a <div id="dlg_credentials"… and the corresponding javascript tag in the dom of my main document. But it isn't. There are no errors shown in the web inspector.
So what am I doing wrong here?
Without setting up a test case for you, if you really want to separate your pages to make your coding easier I would recommend to load the pages the standard way for jQuery Mobile i.e.
$.mobile.changePage( "about/us.html", { transition: "slideup"} );
This way you aren't reinventing the wheel and it satisfies your request. The overhead will be negligible compared to your proposed solution in any case let alone taking into account you want the first page to render quickly rather than to be blocked by inserting many pages before any html is rendered in any case. Since they will be local on the device in any case Phonegap will be able to serve them very quickly.
One thing to remember when loading pages through jQuery Mobile is that it strips out anything in the target page outside of the
data-role="page|dialog|popup"
tag and therefore to load custom page-specific javascript I would recommend you include the script tag directly below the
data-role="page"
opening tag and set any page initialization to occur on "pageinit"
<div data-role="page" id="options" data-theme="a">
<script type="text/javascript">
$(document).bind('pageinit', initializeOptions());
function initializeOptions() {
// do your page initialization here . . .
}
</script>
<!-- rest of page continues here . . . . -->
and then continue with the rest of your page as needed. That way it will be parsed when the page is loaded via the $.mobile.changePage method.
Hope that helps.
Dynamic loading is a feature of several Javascript frameworks. AngularJS and Backbone.js for example. Maybe take a look at their approach to loading multiple views?
I have previously worked on an app that did this by adding an empty div for each view to the index.html, and then dynamically loading the Javascript for each view on demand. The Javascript for the views was responsible for rendering the HTML into the div for that view.
I'm trying to make a mobile version of a web page. My problem is that I have to manipulate a accordion menu to use jQuery mobile linked list. To do this I manipulate the menu with jQuery ex:
$(document).ready(function() {
$('#globalMenu').attr("data-role", "listview");
.. .. . . ..
});
It works great if I load the page first time, but when I navigate in the jQuery mobile list and push one of the link the script do not run, but if I refresh the page (f5) it works! I've read that I have to use init instead of document ready but I can't manage it to work.
Please write some examples.
jQueryMobile event page
Supposing your page div is like this:
<div id="my-page" data-role="page">
Try with:
$('#my-page').live('pageinit', function(event){
$('#globalMenu').attr("data-role", "listview");
});