How do I refresh the page(from overlay) using jQuery with Fade In effect?
I have a div tag on the page and I open that like overlay using jQuery. Once I click "Ok" or "Cancel" on that overlay I need to refresh the page(to reload the data) closing the overlay with Fade In/Fade Out effect.
Ajax update panel is doing partial post back and user doesn't see the page is getting refreshed. I wanted to do same thing using jQuery with Fade In/Fade Out effect.
Any help/suggestion would be appreciated.
To refresh the entire page, you can use:
window.location = window.location;
You can try doing something like this.
$( "body").fadeOut( function(){
location.reload(true);
setTimeout( function(){
$(body).fadeIn();
}, 5000);
});
While was writing found a better way:
$( "body").fadeOut(
function(){
location.reload(true);
$( document).ready( function(){$(body).fadeIn();});
});
Related
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.
$(document).on("pagebeforeshow", function(event) {
$("#mybtn").on("click", function(e) {
$.mobile.showPageLoadingMsg();
$.mobile.changePage("twitter.html", {
reloadPage: false, changeHash: true,
});
$('#mybtn').unbind('');
});
});
Can u tell me why Unbind is important in Jquery mobile and Please tell me best way To unbind events.I used Following way to bind and unbind events.Is that ok
Have a look at this example: NO UNBIND USED
CODE
$("#page2").on("pagebeforeshow", function(){
$("#testBtn").on("click", function(){
alert("Hi!");
});
});
If you go from page 1 to page 2, and then click the button named Click me you will see that the alert "Hi!" is shown properly. The event was binded on pagebeforeshow, till now everything is ok.
Now go back to page1, and then load again page2, click again the Click me button.. you will see that the alert is shown 2 times! and this is WRONG. That's why you need to unbind the event BEFORE you bind it again.
Basically, every time you load page2, you bind a new event to the button.. so, if you load 10 times that page, you will have 10 events binded to the button, that will fire once the button is clicked.
Here's a working fiddle with the unbind (to unbind the event, I used off()): UNBIND USED
CODE
$("#page2").on("pagebeforeshow", function(){
$("#testBtn").off("click").on("click", function(){
alert("Hi!");
});
});
have a look here to understand why I used off() instead of unbind(), and also here if you wat to see how off() works
I hope this helps to clarify your doubts..
So what im trying to achieve is, applying any page transition when manually creating a page change.
so for example, say that on my webpage, i make it so that when the user swipes right, the website goes to a second page....like so
$('#firstPage').bind("swiperight", function(){
//alert("swiped right on the body element");
$.mobile.changePage('#secondPage');
});
now i want to attach a page transition to this function. if it was on an actual link, then one would apply a data-transition but since this page change is being manually created, im wondering how to append a transition to it.
i tried for example
$('#firstPage').bind("swiperight", function(){
//alert("swiped right on the body element");
$.mobile.changePage('#secondPage','flip');
});
etc but to no avail, Any ideas how i would put this into effect?
Thanks in advanced.
You've almost got it, you just need to declare the second paramater of the function (your options) within the {} parenthesis:
$('#firstPage').bind("swiperight", function(){
//alert("swiped right on the body element");
$.mobile.changePage( "#secondPage", { transition: "flip"} );
});
Try replacing bind with on:
$('#firstPage').on("swiperight", function(){
//alert("swiped right on the body element");
$.mobile.changePage('#secondPage','flip');
});
I had the similar problem and this worked for me.
I'm using jQuery tabs. In one of the tabs is a wysiwyg editor that needs to be refreshed after the tab is displayed, but I can't figure out if there is an event that fires after the tab is loaded.
From my understanding, the load event is only for tabs that use ajax calls. I've tried using it but it doesn't fire:
jQuery ui tabs load/tabsload event does not fire
In that example they use an iframe, which has a load event that is triggered. I'm just using divs, which don't have a load event, and nothing like an onshow event listener.
The closest I've been able to get is the tabsselect event which fires when a tab is clicked, but before the new tab is loaded.
Is there any event that fires after the tab is loaded when I'm not using ajax?
Thanks
Did you try event-show?
http://jqueryui.com/demos/tabs/#event-show
$( ".selector" ).tabs({
show: function(event, ui) { ... }
});
The show event did not work for me, but the create event did:
$( ".selector" ).tabs({
create: function(event, ui) { ... }
});
http://api.jqueryui.com/tabs/#event-create
Now the event is called activate
$( ".selector" ).tabs({
activate: function(event, ui) { ... }
});
http://api.jqueryui.com/tabs/#event-activate
So, I am using jQuery Mobile and I'd like to animate individual elements on a page change both before and after the change. I set transitions to "none" in jQuery moblie then try to add class to css3 animate individual elements. It works on pagechange, so when you go to a new page the transition on the elements appears, but pagebeforechange happens to quickly and the animation is lost. Is there a way to make the pagebeforechange function wait until the animation is done then go on to the next page? preventDefault(); stops the page from changing at all. I need like a call back or deferred obj or something? If I call changepage in pagebeforechange after the animation is done...the function runs recursively :(
transitions: function(){
$(document).bind( "pagebeforechange", function( e, data ) {
$('.search_words li').addClass('animated flipInX');
});
$(document).bind( "pagechange", function( e, data ) {
$('.search_words li').addClass('animated flipInX');
});
},
Thanks in advance!
you could try pageshow instead of pagebeforechange. Beaucse pageshow is fired before the pagechange event