I have some AJAX loading in my app, and I thought it would be nice to have a loading icon, since there's a little delay. I grabbed some code from http://tobiasahlin.com/spinkit. The loading and hiding works fine, except that I have a logo in the header, which is a link to the root:
<%= link_to "#{app_name}", root_url, id: "logo" %>
Clicking the link takes you to the root, but the loading icon is visible. But if you reload the page, the icon is hidden, as desired. So there's something different about clicking the link.
The view:
<div class="spinner">
The CSS does not set the hidden attribute. If I set it, the spinner is always hidden.
The jQuery:
$( document ).ready(function() {
// hide spinner
$(".spinner").hide();
// show spinner on AJAX start
$(document).ajaxStart(function(){
$(".spinner").show();
});
// hide spinner on AJAX stop
$(document).ajaxStop(function(){
$(".spinner").hide();
});
});
I tried adding an onclick even to the logo. That fires first, then the page loads with the spinner visible. Any ideas what's wrong?
Terry, this is an accompaniment to the comment which helped you.
There are several things to fix:
You should keep your CSS hidden, using JQuery to make it visible.
You're currently hiding your spinner on DOM load with JQuery.
Although this will work, it adds unnecessary overhead to your application. Instead, you'll be much better to show the spinner when Ajax runs:
#app/assets/stylesheets/application.css
.spinner {
display: none; /* Use this instead of inline styles */
}
You should bind your spinner to on-page elements
You're currently binding the spinner to ajaxStart & ajaxStop. These are global functions, fired EVERY time Ajax runs.
This may work in a simple application, is bad practice in a more complicated system.
I would do the following:
#app/assets/javascripts/application.js
spinner = function(){
$(".spinner").toggle();
}
$(document).on("ajax:beforeSend", function(){
spinner();
}).on("ajax:complete", function(){
spinner();
});
$(document).on("click", ".element", function(){
spinner();
$.ajax({
...
});
This uses the ajax:beforeSend event handler from Rails UJS (every time you call remote: true, this will fire).
It also allows you to use the spinner function for any other event/element in your app.
Related
I want to make a page transition using "pageChange":
$.mobile.changePage('new.html', { transition: "none"});
when the page loads, I want to executa a function. For this, I added this code in "new.js":
$('#new-page').live('pageinit', function(event) { ... });
The problem is when the caller page opens the new page the previous function don't run, I have to reload the page to run it.
What am I doing wrong?
Thanks
pageinit is only called once for a page, when it is initially loaded into the DOM. Subsequent navigations to the page won't force it to reload into the DOM (unless you specify the option on the changePage method)
when the page loads, I want to executa a function.
I suspect what you're actually after is pageshow or pagebeforeshow though?
I have a page where I need to show/hide divs based on what button the user clicks. In the page, I have two divs (divBranchList and divGrowerList) and two buttons (btnBranch and btnGrower). I am using the following code to show/hide the divs.
$(document).bind('pageinit', function () {
alert("here");
$("#divBranchList").hide();
//show hide lists
$("#btnGrower").click(function () {
$("#divGrowerList").show();
$("#divBranchList").hide();
});
$("#btnBranch").click(function () {
$("#divBranchList").show();
$("#divGrowerList").hide();
});
});
While this works perfectly when the page loads or if I refresh the page, but fails to work when the user clicks on a listitem and the page comes back from the server after getting some data. The page has both lists visible although if I put a breakpoint at the following line in Firebug's script panel, it does get hit.
$("#divBranchList").hide();
Any ideas why the div is not hiding or how to make it work?
If you're showing and hiding content in a JQueryMobile page, you will probably need to trigger the UpdateLayout event
$("#divBranchList").trigger("updatelayout");
after you've done your showing / hiding...
I have an annoying issue, I want to reload the page I am on programmatically, whilst maintaining a page transition, but I don't want to double it up in the DOM!
Can you post your relevant code? What function do you use?
You are aware of the properties of changePage?
$.mobile.changePage("#pageId", { allowSamePageTransition : true, reloadPage: true } );
Otherwise you can always remove the previous page yourself
$('#pageId').live('pageshow',function(event, ui){
$(ui.prevPage).remove();
});
Is there a simple way to show a loading spinner in the body of a jquery UI tab while it is loading via AJAX?
Essentially I am looking for something like the spinner option, but displaying the graphic and a loading message in the tab body rather than the tab title.
This should work with jQuery UI 1.9+ for ajax loaded tabs (assuming your tabs have id 'tabs'):
$("#tabs").tabs({
// loading spinner
beforeLoad: function(event, ui) {
ui.panel.html('<img src="loading.gif" width="24" height="24" style="vertical-align:middle;"> Loading...');
}
});
You'll need to put a loading.gif in the right place and adjust the img tag src, width and height, but I think you get the idea. You can get a bunch of spinner images at http://www.ajaxload.info/
I currently use jTemplates to create a rather large table on the client, each row has a button that will open a jQuery UI dialog. However, when I scroll down the page and click on one of those buttons, jQuery dialog will open, but the scroll position get lost and the page jumps back to the top (with the blocking and the actual dialog showing off the screen). Has anyone seen or know what might cause this problem?
Thanks.
Are you using an anchor tag to implement the "button" that pops the dialog? If so, you'll want the click handler that opens the dialog to return false so that the default action of the anchor tag isn't invoked. If you are using a button, you'd also need to make sure that it doesn't submit (by returning false from the handler) and completely refresh the page.
For example,
$('a.closeButton').click( function() {
$('#dialog').dialog('open');
return false;
});
<a class='closeButton'>Close</a>
If your buttons work with an html anchor tag with href="#" replace the href for example by href="javascript:;" or any other method that you use to disable the href. The reason why the scrolling happens is because of href="#" scrolls to the top of your page.
change your code like this
$('a.closeButton').click( function(e) {
e.preventDefault();
$('#dialog').dialog('open');
});
You can try :
scrollTo(0, jQuery("body"));