I am making use of Jonathan Sampson's answer for my jquery busy loader. it works 100% and detects any jquery posting or the like and shows the loader.
my problem is that most times I want the user to wait when I fetch info from the database so happy for the loader to appear.
What I want however, is for certain functions only for the loader not to show when I save info to the database.
the fiddle can be found here
for example, the below causes the loader to run. how can I modify this so mockjax knows not to run for this function only?
$(document).on("click", function(){
$.get("/mockjax");
});
Thanks for the help as always.
Short version (with code)
Click the heading - Animation
Click the paragraph - No Animation
http://jsfiddle.net/hPS2v/
$.ajax({
url: "/mockjax",
type: "GET",
global: false //This is the key
});
--
The slightly longer version
There is a great variable available in the $.ajax() method which let's you stop ajax events from firing (but not the ajax itself). This is called global. From the docs
global (default: true)
Type: Boolean
Whether to trigger global Ajax
event handlers for this request. The default is true. Set to false to
prevent the global handlers like ajaxStart or ajaxStop from being
triggered. This can be used to control various Ajax Events.
With this in mind, I have slightly changed your code a little to demonstrate how we can make this work.
1) Moved the AJAX call into a function with 2 parameters: URL and eventTrigger. Basically we want the URL to be "/mockajax", and the eventTrigger to be true or false (depending on if and when you want to show your animation)
2) I took the event handler off the $(document) and added 2 events to the heading tags and the p tags so I can demonstrate the AJAX working in 2 places with the same code (1 with and 1 without an animation)
Hope this helps!
You can use a variable as a flag which denotes your preference of not showing the loader.
//let say, showLoader, by default true
var showLoader = true;
Now, add this to your ajax setup as required.
$(document).on({
ajaxStart: function () {
// if showLoader true, then shows loading image
if (showLoader)
$body.addClass("loading");
},
ajaxStop: function () {
$body.removeClass("loading");
// set showLoader to true
showLoader = true;
}
});
Change showLoader state as required by you.
$(document).on("click", function (e) {
// if target element is anchor tag, then do not show loading image - example
if (e.target.tagName === 'A') {
showLoader = false;
}
$.get("/mockjax");
});
JSFiddle: http://jsfiddle.net/VpDUG/5177/
Hope, it helps.
Related
This is my code, 'slide' event inside AJAX success call.
success: function(data) {
$('#my_container').html(data);
// I am getting' #mycarousel' successfully in to #my_container
$('#mycarousel').bind('slid', function(e) {
console.log('hi');
}
// tried 'slid.bs.carousel' too, no change.
// btw, I can see my 'slid' function under event listeners for that element.
// when I paste the above binding code in console again it shows the element too.
});
I want to print the 'hi' to console on slid event, which is not working now.
Thanks
Check whether you have multiple versions of jquery libraries loaded in the page.
Use $.fn.jquery to find the loaded version and cross check it with the jquery version you have included and see both are same.
After loading the carousel dynamically, you have to initialize it (as androbin suggested):
$('#my_container').html(data);
$("#mycarousel").carousel();
$('#mycarousel').bind('slide.bs.carousel', function (e) {
console.log('slide event!');
});
$('#mycarousel').bind('slid', function (e) {
console.log("slid event!");
});
Here you can see it working: http://jsfiddle.net/faw242a8/1/
Make sure the html you are pulling in via ajax contains a valid carousel.
Reference: Carousel - Bootstrap
I'm sure there is a simple answer to this I just don't seem to be able to resolve it.
I am using the bootstrap modal to return ajax content from specified url. (using $.removeData() between loads to remove content).
The problem comes with running JS on content from the form presented in the modal.
I am currently using (simplified) from within the final file (returned by ajax):
$('#myModalLg').on('shown.bs.modal', function(e) {
$(this).on('submit', 'form', function(ev) {
... event handler for form...
});
});
EDIT: along with other event handlers (datepicker for within modal included) but this code is only loaded once and then fails to activate again until the full page is reloaded
On close code:
$('#myModal, #myModalLg').on('hidden.bs.modal', function (e) {
$(e.target).removeData();
$(e.target).off('shown.bs.modal');
$('#myModal, #myModalLg').on('shown.bs.modal', function () {
$(this).find(':input:first')[0].focus();
});
});
I would be expecting the handlers to run each time #myModalLg is shown and then when it is closed it removed what has been entered and restores each time but doesn't seem to work like that.
you never turn off your shown.bs.modal have you looked into the One Event In JQuery:
I'm not sure if this will help but it seems like your redeclaring your shown.bs.modal multiple times you might want to change that to a one instead of on
$('#myModal, #myModalLg').one('shown.bs.modal', function () {
$(this).find(':input:first')[0].focus();
});
I'm having trouble closing my fancy box in some cases after an ajax call.
$(document).ajaxStop(function() {
function(){$.fancybox.close()};
});
$(document).ajaxStart(function() {
$("a#load_gif").trigger('click');
});
Here's my code handling the fancy box. So my problem is that if the ajax call is very brief and fast the box doesn't close, however if the call is longer it closes automatically as it should.
I have found a fix which goes along the line of this
$(document).ajaxStop(function() {
setTimeout(function(){$.fancybox.close()},500);
});
But honestly that solution is not good looking. What can I do to make the fancy box close even if the ajax call is returned very fast? The length of the ajax call is variable depending on the number of rows it has to fetch.
Any help and/or suggestions are appreciated.
It seems like you have a race condition and maybe the fancybox isn't finished being created and doesn't have it's close function defined yet when your AJAX call is attempting to fire off that close function.
I recommend a 2 step process that triggers the fancybox to close. Create 2 global variables ajaxStop = false; and fancyboxDone = false;
create a function like:
function closeFancyBox(){
if(ajaxStop && fancyboxDone){
$.fancybox.close();
ajaxStop = fancyboxDone = false;
}
}
Then change your ajax stop to :
$(document).ajaxStop(function() {
function(){
ajaxStop = true;
closeFancyBox()
};
});
And finally add an onComplete function to your fancybox that does the same as the ajax Stop but sets fancyboxDone = true instead of ajaxStop.
So now no matter which one finishes first and second they will be able to check on each other's status and fire the close appropriately.
I have a small jQuery mobile site.
it's all single .html file
it's has some edit functionality (view, edit, save)
all works with ajax/json/web service
Most of my pages are using data from web service, via AJAX & JSON, so I am using the following a lot:
$(document).on( 'pagebeforecreate', '#monday', function() {
// do some stuff on before create, load data with AJAX
});
Now, how do I FORCE that page recreation (pagebeforecreate event) so the AJAX inside is run again (get the latest data from server)?
Use pageBeforeShow instead of pageBeforeCreate.
From the jqm documentation, about creation events.
Note that these events will only fire once per "page", as opposed to the show/hide events, which fire every time a page is shown and hidden.
I recommend creating a function that you can call when the pagebeforecreate event fires and whenever else you want to update the site:
function myUpdateFunc() {
// load data w/ AJAX
}
$(document).on('pagebeforecreate', '#monday', function () {
//do some stuff on `pagebeforecreate`
myUpdateFunc();
});
Now you can call the myUpdateFunc() function from anywhere in the scope that it's declared.
Also, you can use .trigger() to trigger an event, to run the code in an event handler for the event:
$('#monday').trigger('pagebeforecreate');
Force page recreation/refresh with this code:
function refreshPage() {
$.mobile.changePage(
window.location.href,
{
allowSamePageTransition : true,
transition : 'none',
showLoadMsg : false,
reloadPage : true
}
);
}
Taken and tested from here.
I wrote a little pager which removes and rewrites content. I have a function called after loading the page, it shall be executed after changing the page as well. Because I do not wat to implement the function twice (on initialisation and after changing the page) I tried bind()/live() and a simple function.
The function looks like this:
jQuery('.blogentry').each(function (){
jQuery(this).click(function(){
//Clicking on the element opens a layer, definitely works - I tested it
});
});
It is executed after initialisation, for executing it after page changes as well I tried the following:
jQuery('.nextPage, .prevPage').click(function changePage(){
// Changing page and rewriting content
showEntry();
});
//...
showEntry();
//...
function showEntry(){
jQuery('.blogentry').each(function (){
jQuery(this).click(function(){
//Clicking on the element opens a layer, definitely works - I tested it
});
});
}
But the function is not executed if put inside a function (lol) and called via showEntry();
Afterwards I tried to bind the function...
jQuery('.nextPage, .prevPage').click(function changePage(){
// Changing page and rewriting content
jQuery('.blogentry').bind("click", showEntry);
});
//...
jQuery(this).click(function showEntry(){
//Clicking on the element opens a layer, definitely works - I tested it
});
Did not work either. Code after the bind()-line would not execute as well.
I thought maybe it's a problem to bind to an event function, if an event is already given via the parameter so i also tried this:
jQuery('.nextPage, .prevPage').click(function changePage(){
// Changing page and rewriting content
jQuery('.blogentry').bind("click", showEntry);
});
//...
function showEntry(){
//Clicking on the element opens a layer, definitely works - I tested it
});
}
No success at all. Maybe I cannot call the function from inside the function regarding to the bind()? Maybe I just do not understand the bind()-function at all? I also tried the live() function since it seemed to fit better, as I am rewriting the content all the time. But it had the same effect: none...
The simplest way to implement this should be
jQuery('.blogentry').live('click', function() { /* onclick handler */ });
This should bind the function to every blogentry on the page at the moment of the call and all the blogentries that are added to the page later on.
Additional notes:
In $(foo).each(function() { $(this).click(fun); }); the each is unnecessary - $(foo).click(fun); is enough.
$(foo).bind('click', fun); is functionally equivalent to $(foo).click(fun) - it does not matter which one you use.
You can use delegate or bind. don't call the function like that, just create a delegate with .blogentry and it should update even after you load a new page via ajax. It will automatically do this.
$("#blogcontainer").delegate(".blogentry", "click", function(){ //open layer });
This should work for you
$(body).delegate(".blogentry", "click", function(){
showEntry();
});
alternaltivly you can use event delegation
$(document).ready(function () {
$('#blogcontainer').click( function(e) {
if ( $(e.target).is('.blogentry') ) {
// do your stuff
}
});
});
hence, no need to bind each blogentry at creation or reload, and it's (slightly) faster.