PDA

View Full Version : 2 AJAX calls affecting 1 loading graphic - How to stop?


scottrichardson
12-23-2009, 10:09 AM
Hi all,

I'm fairly new to posting for help on coding, so please bare with me, hope this makes sense!.

See here: http://www.retainingsolutions.com.au/test

You will see two forms on the page at the top. One is a subscribe form, the other is a real time 'apple-style' search engine.

On their own, each feature works perfectly. In fact, they both work perfectly, however the search feature is affecting the subscription form.

The subscription form uses an ajax submit using the jquery form plugin. While it's submitting, it displays a loading graphic in a div. It appears that this loading graphic starts up on ANY ajax call on the page - because when you start typing in the search field, it initiates the newsletter subscription loading sequence.

Given my limited knowledge of how to customise this, I would be ever so thankful if someone could take a quick look at the following codes.

First, here's the jquery script that handles the subscription form, you can see the top section is the ajax loading graphic handler. What I need to do is somehow modify it so it plays ONLY when the newsletter subscription ajax call is happening, and not when ANY other ajax call happens. Is there a way to make this function specific rather than global?

// form validation and ajax submitter.
jQuery(function() {
// show a simple loading indicator
var loader2 = jQuery('<div id="loader2"><img src="images/contact/loader.gif" alt="loading..." /></div>')
.css({position: "relative", top: "0px", left: "0px"})
.appendTo("#subscribeConfirmation")
.hide();
jQuery().ajaxStart(function() {
loader2.show();
$('div#newsletterBox').fadeOut();
}).ajaxStop(function() {
loader2.hide();
}).ajaxError(function(a, b, e) {
throw e;
});

var v = jQuery("#subscribeForm").validate({
submitHandler: function(form) {
jQuery(form).ajaxSubmit({
target: "#subscribeConfirmation"
});
}
});
});

Put simply, I don't want the loading graphic for the subscribe form to be initiated when a user is typing in the search field.

Appreciate anyone's time who looks at this.

Kind Regards

Scott

scottrichardson
12-30-2009, 11:20 AM
Wondering if anyone here could possibly help me out? It's the final thing I need to fix on the site so it's finished!

Many thanks,

Scott

vineet
12-30-2009, 12:12 PM
Wondering if anyone here could possibly help me out? It's the final thing I need to fix on the site so it's finished!

Many thanks,

Scott

just a suggestion, i think its jquery problem and you can ask the moderator to shift your thread in jquery section.

may be you will get some answer there.

vineet

scottrichardson
12-30-2009, 03:38 PM
Oh snap, thanks mate. I'll get them to move it!

Cheers,

seco
12-30-2009, 04:57 PM
well i see the loader div in the newsletter div....

scottrichardson
12-30-2009, 11:24 PM
Hi there,

Yes thats correct. It is MEANT to be there... however, when using the search, it also activates the loader div and its related javascript function. I don't want my search box making the loader div appearing.

Is there a way to make that ajax loading div function ONLY appear when using the newsletter subscribe?

Cheers,