I'm developing a mobile website using the jQuery Mobile library. I have a header, a footer and a content area on the main page, and any links are loaded into the content area using the following code:
$("a").click(function() {
var toLoad = $(this).attr('href');
// Loading image
$('#content-body').html('<table class="loader"><tr><td><img src="<?php echo SITE_ROOT; ?>/img/ico/loader.gif" /></td></tr></table>');
$('#content-body').load(toLoad);
This works fine, except that the jQuery Mobile styles don't apply to content included this way. For example, the home page includes buttons:
Inventory
But when I load that page asynchronously into the content div, the links do not appear as buttons. Is there any way to tell jQuery Mobile to apply the mobile styles every-time #content is reloaded?
You sure can. You want to use .trigger('create') to initialize any jQuery Mobile widget:
$("a").click(function() {
var toLoad = $(this).attr('href');
// Loading image
$('#content-body').html('<table class="loader"><tr><td><img src="<?php echo SITE_ROOT; ?>/img/ico/loader.gif" /></td></tr></table>');
$('#content-body').load(toLoad, function () {
$(this).trigger('create');//it's that easy :)
});
});
Note that you call .trigger('create') on the parent element of the widget you want to initialize. Also note that since you are loading content through an asynchronous function you will need to call .trigger('create') in the callback function for your .load() call so that the elements to initialize are actually present when you try to initialize them.
Also you can sometimes run into an issue where the widget has been initialized but then you changed it's HTML and want to refresh the widget instead. There are functions to do this such as: .listview('refresh'), .slider('refresh'), etc.
I just answered a question regarding widgets needing to be initialized or refreshed: how to refresh jquery mobile listviews
Also you will want to change that .click() to a .delegate() so the links that are loaded via AJAX will also have this event handler attached:
$('#content-body').delegate('a', 'click', function() {
var toLoad = this.href;//no need to use jQuery here since `this.href` will be available in all major browsers
// Loading image
$('#content-body').html('<table class="loader"><tr><td><img src="<?php echo SITE_ROOT; ?>/img/ico/loader.gif" /></td></tr></table>');
$('#content-body').load(toLoad, function () {
$(this).trigger('create');//it's that easy :)
});
});
Related
In jQuery Mobile, the external page is linked via Ajax (i.e. the content of the external page is loaded into current page via Ajax).
The problem is: How to bind a event on the future (i.e. to be loaded) content?
Let say the content to be loaded has the following HTML input
<input type='text' id='foo' name='foo'>
How to bind a input event on it?
With just static HTML, the following code would work
$('#foo').on('input', function () {
...
Now it didn't work now since the DOM is loaded dynamically, I tried to use delegation but also not work
$(document).on('#foo', 'input', function () {
...
Any idea?
You can include the script in the external page as long as the script tag is within the data-role="page" div (Only the content of the first found data-role="page" element is loaded into the current page.
$(document).on("pagecreate", "#extpagedivid", function(){
$(document).on("input", "#foo", function(){...});
});
You can also include this code in the pagecreate handler of the main page as long as you are using event delegation. Make sure the ID of the input is unique across all pages that will be loaded into the main page.
How about using var
var myFunc = function() { ... }
$(document).ready(function() {
$('#foo').on('input', myFunc );
});
I have an iframe that represents the content of my main page and it loads a different src depending on the menu option chosen. I want to perform a series of actions as soon as the iFrame is loaded but I cant seem to get it to work. The code looks more or less like the following:
$(document).ready(function () {
$('#navigation').load(function () {
alert('frame loaded!')
});
});
.load for event binding was deprecated in jQuery 1.8, use .on("load" instead.
I asume this function is in your iFrame and will be executed after the document loading. If not - ther is some conceptual error. Anyway - the load function in jQuery will try to load a html document or piece of it in the object you specify - http://api.jquery.com/load/
Hello guys I have one question...
I use JQM 1.4 ... and it sometimes happens that when i click a button an get reddirected (to a new HTML5 file)... on the new page the header and footer are without style... it doesn't happen always but I cant have a page like this...
For the footer and header I use external HTML files (header.html and footer.html) and i call them with
$('#pageprostoriheader').load('header.html').trigger("create");
$('#pageprostorifooter').load('footer.html').trigger("create");
As I said it doesn't happen very often but when it does is ugly ...
I have a multiPage template and i think maybe this is caused because the header and footer don't get loaded quick enough .... so its possible to make like a loader that waits till is everything ready till it shows the page ?
As of jQuery Mobile 1.4, .trigger("create") is deprecated and will be removed on 1.5. Moreover, to create header/footer you should have used .trigger("pagecreate"), however, it is also deprecated and will be removed.
The replacement of the aforementioned functions is .enhanceWthin() to be called on parent element. This issue has several solutuins
Enhance toolbars after successful .load(), using .toolbar().
$('#pageprostoriheader').load('header.html', function () {
$(this).toolbar();
});
$('#pageprostorifooter').load('footer.html', function () {
$(this).toolbar();
});
Enhance toolbars after successful .load(), using .enhanceWithin() on active page.
$('#pageprostoriheader').load('header.html', function () {
$.mobile.pageContainer.pagecontainer("getActivePage").enhanceWithin();
});
$('#pageprostorifooter').load('footer.html', function () {
$.mobile.pageContainer.pagecontainer("getActivePage").enhanceWithin();
});
If you're using the same toolbars on all pages, I recommend using External toolbars.
Add HTML markup of header and footer in <body> not inside page div, and then add the below code in head after jQuery Mobile.js.
$(function () {
$("[data-role=header], [data-role=footer]").toolbar();
});
I'm building Wordpress website where all content pages are loaded using Ajax. This is causing me a problem with jQuery localScroll plugin. This plugin will add animated scroll to all anchor links on the page. Problem is that using script below I'm able to have animation on that page only after one of the links on the page is clicked.
I think I understand why is this happening. My guess is that after I click on the main menu script will execute but since Ajax content is not yet loaded events are not attached to Ajax loaded content links. Now I'm stuck, I have no clue how to fix this. Would you mind helping me with this one?
Thank you in advance.
$(function(){
$('a').live('click', function() {
$('#portfolioWrap').localScroll({// Only the links inside that jquery object will be affected
target: '#portfolioWrap', // The element that gets scrolled
axis:'y', // Horizontal scrolling
duration:1500
});
});
});
EDIT
Just a note to others after I managed to make this work. I tried all suggestions here. My guess is that solutions suggested by o.v. and Ohgodwhy should work, but probably due to website complexity and maybe plugin limitations I wasn't able to make them work. For example .on function didn't work at all although I'm using jQuery 1.7.1. At the end I implemente ajaxComplete suggested by Just_Mad and that worked. Thank you all for your help!
This is the code:
$(function() {
$('#wrapperIn').ajaxComplete(function() {
$('#portfolioWrap').localScroll({
target: '#portfolioWrap', // The element that gets scrolled
axis:'y', // Horizontal scrolling
duration:1500
});
});
});
If you use jQuery.ajax to load AJAX content you can try to bind to ajaxComplete event, to get the moment, when any ajax is complete.
Elaborating on what GoldenNewby said, listen/attach with the .on() method introduced in jQuery 1.7.
$(function(){
$('body').on('click', 'a', function() {
$('#portfolioWrap').localScroll({
target: '#portfolioWrap', // The element that gets scrolled
axis:'y', // Horizontal scrolling
duration:1500
});
});
});
No need to use AJAX for callbacks for listening/binding to elements. The above function will place a click function on all elements found within the body{1} at/after page load. This includes all dynamically created links.
{1} - Change 'body' to whatever Container has the ajax data. I.E. #portfolioWrap
Add a callback to the ajax load, good place to start is at http://api.jquery.com/jQuery.ajax/ under "success callback"
I would have given more specific advice, but your snippet is a bit isolated, maybe if you created a jsfiddle?
Jquery Mobile has decided to treat anchor links as page requests of sort. However, this isn't good if you have a load of blog posts which have anchor links to the same page (ie href="#specs").
Is there a way to disable jquery mobile's anchor link usage on a specific page which I know I won't be using it on so I can use anchor links as they were intended, to drop down to a part of the page?
I only need a solution for anchor links on the same page (ie: href="#specs").
thanks
You could try adding a data-ajax="false" on the anchor tag.
Linking without Ajax
Links that point to other domains or that have rel="external",
data-ajax="false" or target attributes will not be loaded with Ajax.
Instead, these links will cause a full page refresh with no animated
transition. Both attributes (rel="external" and data-ajax="false")
have the same effect, but a different semantic meaning: rel="external"
should be used when linking to another site or domain, while
data-ajax="false" is useful for simply opting a page within your
domain from being loaded via Ajax. Because of security restrictions,
the framework always opts links to external domains out of the Ajax
behavior.
Reference - http://jquerymobile.com/demos/1.0.1/docs/pages/page-links.html
If you are like me, converting an existing site and you don't want to go through every page right now. You can add one line of code to your header and all of your header and all of your existing internal anchor links will get the data-ajax="false" tag added.
Of course, this assumes you are including your own javascript file up in the header already. If you are not you would have to touch every page anyway. But I have a single javascript file that is included in every page already so I added this line...
$("a").each(function () { if(this.href.indexOf("#")>=0) $(this).attr("data-ajax",false); });
This goes in your $(document).ready() block. If you don't have that block yet, here is the entire block.
$(document).ready(function() {
$("a").each(function () { if(this.href.indexOf("#")>=0) $(this).attr("data-ajax",false); });
});
Hope this helps. It is the same solution user700284 offers but in an automated way.
You can add the following code to the end of your page:
<script type="text/javascript">
$('a.native-anchor').bind('click', function(ev) {
var target = $( $(this).attr('href') ).get(0).offsetTop;
$.mobile.silentScroll(target);
return false;
});
</script>
And add the class "native-anchor" to your anchor links.
It is not a total sollution, because the back button of your browser will move you to the previous page and not to the position of the link, but it is better than the links not working at all.
I found this sollution here: jQuery Mobile Anchor Linking
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});
First you have to place this code into a custom.js file
$(document).bind('mobileinit', function () {
$.mobile.loader.prototype.options.disabled = true;
$.mobile.ajaxEnabled = false;
$.mobile.linkBindingEnabled = false;
$.mobile.loadingMessage = false;
});
Then add this file into your webpage before the jquery mobile js is loaded. becuase 'mobilinit' event is triggered immediately
Thank you
this solution worked for me
<script>
$(document).ready(function() {
$("a").each(function() {
if (this.href.indexOf("index.php") >= 0) $(this).attr("data-ajax", false);
});
});
</script>
I replaced # with index.php which is my document root.
But, it doesn't work for form button i.e input type="submit"
// On page load on mobiles only, look for the specific a tag you want to take control over,
// alternatively you can still target all 'a' tags
$('a[href*="#component"]').each(function () {
// then set data-ajax to false,
$(this).attr("data-ajax", false);
// at this point you can add the class to your target a tags.
// You can do it elsewhere but because for this example my
// 'a' tags are automatically generated so I just add the class here
$(this).addClass('in-pagelink');
// then target the class and bind to a click event
$('a.in-pagelink').bind('click', function (ev) {
// here I redirect the page with window.location.assign
// as opposed to window.location.href. I find that it works better
window.location.assign(this.href);
// then I close my navigation menu
closeAll();
});
});