I have used the standard approach to customize the default text for the Loader in jQuery Mobile 1.3.1:
$(document).on("mobileinit", function () {
$.mobile.selectmenu.prototype.options.hidePlaceholderMenuItems = true;
$.mobile.loader.prototype.options.text = "Loading...";
$.mobile.loader.prototype.options.textVisible = true;
$.mobile.loader.prototype.options.theme = "a";
$.mobile.loader.prototype.options.html = "";
});
This does not result in a custom loader showing the text 'Loading...'.
The solution was to put this code in a separate file and load it after Jquery and before JQM. Simply putting the script in between in tags did not solve the issue.
Related
I have a jQuery mobile panel which slides in from the side, it works great.
But lets say you have a login page, that redirects to a main page with a panel. Now if the user opens the panel, and then clicks the back button, he expects the panel to close. But instead the browser navigates back to the login page.
I´ve tried adding something to the url:
window.location.hash = "panelOpen";
But that just messes up the jQuery mobile history state pattern. I´ve also tried to listen to the navigate event, and prevent it if a panel is open:
$(window).on('navigate', function (e, hans) {
var panels = $('[data-role="panel"].ui-panel-open');
if (panels&&panels.length>0) {
e.preventDefault();
e.stopPropagation();
$('#' + panels[0].id).panel('close');
return false;
}
});
This kind of works, except that the url is changed, and I cannot grab the event that changes the url. Furthermore, it also messes up the jQuery mobile history pattern.
So how does people achieve this expected 'app-like' behaviour with a jQuery mobile panel; open panel > history back > close panel. And thats it.
Thanks alot!
Updated
Instead of retrieving current URL from jQuery Mobile's history, It is safer to retrieve it from hashchange event event.originalEvent.newURL and then pass it to popstate event to be replaceState() with that URL.
Instead of listening to navigate, listen to popstate which fires before. The trick here is manipulate both browser's history and jQuery Mobile's history by replaceState() and reload same page without transition.
var newUrl;
$(window).on("hashchange", function (e) {
/* retrieve URL */
newUrl = e.originalEvent.newURL;
}).on("popstate", function (e) {
var direction = e.historyState.direction == "back" ? true : false,
activePanel = $(".ui-panel-open").length > 0 ? true : false,
url = newUrl,
title = document.title;
if (direction && activePanel) {
$(".ui-panel-open").panel("close");
$(".ui-header .ui-btn-active").removeClass("ui-btn-active");
/* reload same page to maintain jQM's history */
$.mobile.pageContainer.pagecontainer("change", url, {
allowSamePageTransition: true
});
/* replace state to maintain browsers history */
window.history.replaceState({}, title, url);
/* prevent navigating into history */
return false;
}
});
This part is meant to maintain same transition used previously as transition is set to none when reloading same page.
$(document).on("pagebeforechange", function (e, data) {
if (data.options && data.options.allowSamePageTransition) {
data.options.transition = "none";
} else {
data.options.transition = $.mobile.defaultPageTransition;
}
});
Demo - Code
I am a little bit late on the party, but i had recently the same requirements and i would like to share how i did it. So, i extended the requirement in the original question to Panels, Popups and Pages:
...an expected 'app-like' behaviour, history back > close
whaterver is open. And thats it.
In .on("panelopen"), .on("popupafteropen") and .on("pagecontainershow") i simply add another entry to the window history, by using the HTML5 API (https://developer.mozilla.org/en-US/docs/Web/API/History_API) (I believe there is no need to use the JQM navigate browser quirks for that):
window.history.pushState({}, window.document.title, window.location.href);
After that, i'm using more or less Omar's function to intercept the popstate event:
$(window).on("popstate", function (e) {
var pageId = $(":mobile-pagecontainer").pagecontainer("getActivePage").prop("id");
var pageOpen = (pageId != "page-home");
var panelOpen = $(".ui-panel-open").length > 0;
var popupOpen = $(".ui-popup-active").length > 0;
if(pageOpen) {
$.mobile.pageContainer.pagecontainer("change", "#page-home", {reverse: true});
return false;
}
if(panelOpen) {
$(".ui-panel-open").panel("close");
return false;
}
if(popupOpen) {
$(".ui-popup-active .ui-popup").popup("close")
return false;
}
});
As you see, the is just only one level to the home-page, but this can be easily extended by using JQM history implementation to get the previous page:
var activeId = $.mobile.navigate.history.activeIndex;
var jqmHistory = $.mobile.navigate.history.stack; // array of pages
and use pagecontainer to change to the active entry - 1.
As last note, this works well also by completely disabling the built-in JQM Ajax navigation system:
/* Completely disable navigation for mobile app */
$.mobile.ajaxEnabled = false;
$.mobile.loadingMessage = false;
$.mobile.pushStateEnabled = false;
$.mobile.hashListeningEnabled = false;
$.mobile.changePage.defaults.changeHash = false;
$.mobile.popup.prototype.options.history = false;
(Tested in Browser, on real Android and iOS devices)
How can we enable page-loading via ajax in primefaces-mobile. In jquery mobile, ajax page loading is by default, How to achieve this in primefaces-mobile[I read on primefaces website that primefaces mobile is powered by jquery mobile, then why doesn't it load the pages via ajax.].
By viewing the page-source of primefaces-mobile-web page, I found following clue
$(document).bind('mobileinit', function(){
$.mobile.ajaxEnabled = false;
$.mobile.linkBindingEnabled = false;
$.mobile.hashListeningEnabled = false;
$.mobile.pushStateEnabled = false;
});
Now all you have to do is to find a way to override mobileinit event, and set the above variables to true. I simply included following script in my h:head tag:
$.mobile.ajaxEnabled = true;
$.mobile.linkBindingEnabled = true;
$.mobile.hashListeningEnabled = true;
$.mobile.pushStateEnabled = true;
This served my purpose, but I am afraid, this might affect primefaces-mobile controls behaviour e.g. form submission.
I have a jQuery Mobile + backbone site. To play nice with backbone, I've also disabled routing like so:
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
$.mobile.linkBindingEnabled = false;
$.mobile.hashListeningEnabled = false;
$.mobile.pushStateEnabled = false; });
I'd like to display a dialog via js in my jQM + backbone site:
$.mobile.changePage("#dialog",
{
transition: 'pop',
role: 'dialog',
changeHash:false
});
The problem is, this fires a hash change event. My page router picks this up and routes to an incorrect page, away from the dialog.
Why does a simple changePage with a dialog ignore the changeHash parameter? Anyone else run into this?
I know it's quite an old thread - but the problem is the following:
By: $.mobile.hashListeningEnabled = false; you are disabling the jqm routing facility and so jqm does not listen on hash changes but the backbone router does. What you need to do is to define an event in your corresponding backbone view where the dialog shall be opened - would be something like:
var YourView = Backbone.View.extend({
[...]
events: {
"click #myDialog: "openMyDialog"
},
openMyDialog:function() {
[Call your Dialog/Popup here]
}
})
I am trying to get a website that runs fullscreen for all pages, I have looked over here: iPad WebApp Full Screen in Safari and followed that and my index page fills the screen just nicely, but whenever I click a link to another page even though that page is all setup with the meta tags it pulls the chrome bar back in and all the alignment goes out.
There must be a way or is that a limitation of safari that will be fixed in a later revision.
I have written a jQuery plugin for this exact purpose: https://github.com/mrmoses/jQuery.stayInWebApp
Include the plugin somehow , then run it like so:
$(function() {
$.stayInWebApp();
});
By default it will attach to all <a /> elements. You can pass a different selector to attach it to specific links. For example, $.stayInWebApp('a.stay'); will attach to all links that have class="stay"
Because its so small, I usually just copy the minified version into one of my other external javascript files to include it, rather than having to add another external js reference.
Also available on plugins.jquery.com
You can try something like this:
if ((navigator.userAgent.indexOf('iPad') != -1)) {
// for standalone (app) fulscreen mode
if (window.innerHeight == 748 || window.innerHeight == 1004) {
var a = document.getElementsByTagName("a");
for (var i = 0, len = a.length; i < len; i++) {
if (a[i].getAttribute("href");) {
a[i].onclick = function() {
window.location = this.getAttribute("href");
return false;
}
}
}
}
}
Hi guys i know this is a known problem in ASP.NET MVC, basically what i have here is a photo gallery with categories (Red, Blue, Green).
When i choose one category, say 'Red', it will do an ajax call and load the page with photos of red colored products. when i click one of the photos, i expect it to be enlarged (lightbox kinda effect). I use a jQuery plugin called fancybox for that.
but as u all know jQuery using a dynamically loaded content with jquery in it , doesnt actually work in ASP.NET MVC. So i added the jQuery call to fancybox into the ajax.success.
but since it is a plugin, the function $(".fancybox").fancybox() does not register and says that it's not a valid javascript function. How can i solve this problem, so that i can do the image enlarge thing after an ajax call? thank you!
$(document).ready(function() {
$("select#Colors").change(function() {
var color = $("#Colors > option:selected").attr("value");
var tempnric = $(".tempnric").attr("value");
$("#ProductsDiv").hide();
$('#ajaxBusy').show();
$.ajax({
type: "GET",
contentType: "application/json; charset=utf-8",
url: "/FindProducts/" + color,
data: "{}",
dataType: "json",
success: function(data) {
$('#ProductsDiv > div').remove(); // remove any existing Products
if (data.length > 0) {
var options = '';
for (p in data) {
var product = data[p];
options += "<a href='/GetPhotoSet/" + product.PhotoID + "' class='fancybox load fade'><img src='/GetPhotoSet/" + product.PhotoID + "'/></a>";
}
$("#ProductsDiv").html(options);
$('#ajaxBusy').hide();
$("#ProductsDiv").show();
} else {
$("#Products").attr('disabled', true).html('');
$("#ProductsDiv").append('<div>(None Found)</div>');
}
}
});
});
});
Here is the remaining code it works ok except that when i click on the images, it opens up a new browser..
Before your document.ready call, put this line of code:
var $j = jQuery.noConflict();
Then replace all of the '$' references with '$j' and your code should now work.
There is probably a conflict between some other javascript and the jQuery script, so your document.ready is not being seen. This is the quickest way to work around the problem. And if you're feeling ambitious, you can find out what is going on by using a tool such as FireFox's Error Console.