I'm building offline application with Phonegap + JQM. Is there any possibility to set globally that on every page change event would showing loading message?
$(document).live('pagebeforehide', function(){
$.mobile.showPageLoadingMsg();
//More stuff to do
});
$(document).live('pageshow', function(){
//More stuff to do
$.mobile.hidePageLoadingMsg();
});
Nirmal's answer doesn't work for me, but binding to the individual pages does:
$("div[data-role='page']").live('pagebeforehide', function(){
console.log("showing....");
$.mobile.showPageLoadingMsg();
//More stuff to do
});
$("div[data-role='page']").live('pageshow', function(){
//More stuff to do
console.log("hiding....");
$.mobile.hidePageLoadingMsg();
});
jsFiddle - look at the logs, sometimes it's too fast to see
Related
I'm working on an enterprise application which made with Ruby on Rails actually I'm working for the maintenance on the web app, so I want to add a spinner on this application instead of Turbolinks ProgressBar, so on the initial stage I'm testing the page:change & page:receive working but those is not working, look how I tested
$(document).on('page:fetch', function() {
alert("OK");
});
$(document).on("page:receive", function(){
alert("OK");
});
also
$(document).on('turbolinks:fetch', function() {
alert("OK");
});
$(document).on("turbolinks:receive", function(){
alert("OK");
});
also, browser console is clean no any error.
Thanks
You can see the latest Turbolinks Full List of Events then it should be like this use turbolinks:request-start instead turbolinks:fetch and page:fetch, request-start for receive
$(function() {
document.addEventListener('turbolinks:request-start', function() {
alert("OK");
});
document.addEventListener("turbolinks:request-end", function(){
alert("OK");
});
});
I have used this for mine and it's working.
Hope it will help you.
I'm trying to build a simple prototype of an app and I cannot seem to get JQM to change to either an internal or external page with $.mobile.changePage($('#page2')) or $.mobile.changePage('page2.html').
I have successfully binded the form submit to the button, but when clicking (tapping), it changes the same page. After a second click/tap, it redirects.
$("#fd-login button#login-fd-submit").on('click', function(e) {
forge.logging.info('login-fd-submit clicked');
$.mobile.changePage('page2.html');
});
For a "local" page in your "src" directory:
$("#fd-login button#login-fd-submit").on('click', function(e) {
forge.logging.info('login-fd-submit clicked');
forge.file.getLocal('page2.html', function(file) {
$.mobile.changePage(file);
}, function(err) {
forge.logging.log("error");
});
});
If you are using a jQuery object instead, then its mostly likely not trigger.io and need to see more code.
It seems that $(element).on("click", function() {}); doesn't work for this. $(element).live("click", function() {}); works perfectly.
Try using:-
$("#fd-login button#login-fd-submit").on('tap', function(e) {
e.preventDefault();
e.stopImmediatePropagation();
forge.logging.info('login-fd-submit clicked');
$.mobile.changePage('page2.html');
});
Update: Changed to use tap event.
I've used sortable/portlet jquery ui plugin on my website. I load some boxes after the page is loaded via ajax. but they don't look like the boxes appears at the page load time. I know the problem loading via ajax and bind issue. But how can I solve it?
You're ajax call has a success method which you can use to bind to elements that have been dynamically added.
For example you could do
$.ajax({
url: 'ajax/test.html',
success: function(data) {
$('.result').html(data);
$(".column").sortable({ connectWith: ".column", cursor: 'crosshair' });
}
});
I am trying to get my form to submit when a user either clicks enter or mouse clicks. I have seen some examples as well as the example on the jQuery UI site. The example that I am following is jQuery UI autocomplete submit onclick result. Therefore my code looks like this.
<script type="text/javascript">
$(document).ready(function() {
$("#myInput").autocomplete({
source: "fh_autocomplete_search.php",
minLength: 2,
select: function(event, ui) {
if(ui.item){
$("#myInput").value(ui.item.value);
}
$("#myInput").submit();
}
});
$( "#myInput" ).bind( "autocompleteselect", function(event, ui) {
})
});
</script>
I'm not sure what should go under the .bind section of the code. Or really what it is even doing. And I have been here and read it but still just not clicking http://api.jquery.com/bind/ When I put an alert under it and select a ui.item from the #myInput box the alert does go off. But nothing fills or submits. If I put an alert under the if(ui.item) part it doesn't go off. If someone could explain to me what is going on and suggest some code to put under the .bind section I would greatly appreciate it.
If the id of the form is myForm:
$(document).ready(function() {
$("#myInput").autocomplete({
source: "fh_autocomplete_search.php",
minLength: 2,
select: function(event, ui) {
$("#myInput").val(ui.item.value);
$("#myForm").submit();
}
});
});
Also see this example.
I'm not entirely sure you need to write code for the "autocompleteselect" event. The default behavior of the event is to replace the text in the textbox with the users selection from the menu of items.
Is it possible to "redirect" users from a subpage ie. index.htm#sub-page to index.htm#home with the mobileinit function?
$(document).bind("mobileinit", function(){
$.mobile.changePage("/index.htm#home");
});
And why not
$(document).bind("mobileinit", function(){
document.location.href="whereever";
});
or just
<script>
document.location.href="whereever";
</script>
or even with a metatag?
$.mobile.changePage('#page_two');
This one worked for me.
Yes. If you use redirect, the non-ajax web page must reload more than 100KB of JQuery JS....
I still don't want to, but in some cases it must be done by page reload (to handle the PHP Session carefully).