ansaurus

Question

How do I hide my 'loading' image if the following script returns an error?

Answer 1

+1 A:

The ajaxForm plugin specifically says that you can make use of the options supported by .ajax()

Note that the Options Object can also be used to pass values to jQuery's $.ajax method. If you are familiar with the options supported by $.ajax you may use them in the Options Object passed to ajaxForm and ajaxSubmit.

So, the same way you make a function that executes on success, you can make one that executes on error. Take a look at the jQuery .ajax() page under:

error(XMLHttpRequest, textStatus, errorThrown):

A function to be called if the request fails. The function is passed three arguments: The XMLHttpRequest object, a string describing the type of error that occurred and an optional exception object, if one occurred. Possible values for the second argument (besides null) are "timeout", "error", "notmodified" and "parsererror". This is an Ajax Event.

In your case, simply hide the image on error in the same manner you use on success... something like:

// ... code
options = {
    // ... code
    success: function(responseXML)
             { mce_success_cb(responseXML); }, // <== mce_... takes an argument
    error:   function() { $('#subscribe_loading').hide(); 
                          // any other stuff to do on error;
                         }
};
// ... code

You can use the arguments (XMLHttpRequest, textStatus, errorThrown) for the anonymous function to get information about the error and store it and / or display it.

If you want to handle the case where there is a successful AJAX response, but there is an error within the response, change mce_success_cb()... It looks like it's already set up to handle errors of this sort, so it's just a matter of adding the extra functionality you want:

// ...
function mce_success_cb(resp){
    $('#subscribe_loading').hide();
    $('#mce-success-response').hide();
    $('#mce-error-response').hide();
    if (resp.result=="success"){
        // ...
        // This stuff happens if resp.result == "success"
        // ...
    } else {
        // Add in the error handling functionality you want here
        var index = -1;
        var msg;
        //...

Some general problems

Take care to count all your parens and brackets, since it looks like you left some opened.

The beginning of your doc ready should look like:

$(document).ready( function() {  // <== No need to pass anything to this
    // This will all be executed when the document is ready.
    // ...
});             // <== Maker sure to close all parens and brackets!!!

Additionally, the success callback is going to give you multiple parameters, so you can't use a reference to a function for your success callback, it's gotta look more like this:

    success: function(responseXML)
    {
        mce_success_cb(responseXML);
    }

make sure you look at the AJAXForm plugin documentation describing the arguments passed to the success callback.

Peter Ajtai 2010-09-22 02:29:41

Thanks Peter. but what you suggested is is an error if the ajax load doesn't actually work. This script is returning an error without the actual ajax load being an error. Does that make sense? I did try what you suggested though but no luck.

KeenLearner 2010-09-22 02:46:46

@Keen - I'm not sure how that's possible. The Ajax call either succeeds or it doesn't. If it succeeds then the first line executed it ` $('#subscribe_loading').hide();` if you put this code in, then if it fails ` $('#subscribe_loading').hide();` will also happen.... so theoretically there's no way the loading image cannot be hidden. ----- Is the image being hidden when there are no errors?

Peter Ajtai 2010-09-22 02:57:48

It hides when there are no errors. But the error I'm talking about is mailchimp returning something like "please enter a valid email" if the email field is empty. My understanding is that this error message is coming back as the data in the success return.

KeenLearner 2010-09-22 03:32:17

...or somewhere in the validator functions.

KeenLearner 2010-09-22 03:33:15

@Keen - Then you have to handle that in the `success` function based upon the value of `data`. `if (data.test(/^Please enter a/)) { ... };`

Peter Ajtai 2010-09-22 03:44:39

@Peter that makes sense I'm a little challenged seeing where something like that would fit in the code above.

KeenLearner 2010-09-22 04:36:15

@Keen - It actually looks like there's already some sort of mechanism for it.... in `mce_success_db`... `if (resp.result=="success"){ /* ... */ } else { /* this happens if there is an "error" in the response data */ }` ... I think the code should go there.

Peter Ajtai 2010-09-22 05:13:30

@Keen - I edited the answer a little to reflect that.

Peter Ajtai 2010-09-22 05:19:18

@Peter thanks for that but I did already try it and that didn't remove the subscribe box. I tried again just to be sure and still no change.

KeenLearner 2010-09-22 23:10:06

@Keen - Maybe you should include the relevant HTML. If your loader really has an ID of `subscribe_loading`, then it should be disappearing. You sure about your HTML and the the functions are actually running? Are you using Firebug or debugging in some other way?

Peter Ajtai 2010-09-22 23:17:59

@Peter - I am using firebug. I can definitely assure you that there is a div with id #subscribe_loading. I could be wrong but I think there is more to it than I understand... ie the sucess is returning some other JS functions which then create the error output, but I can't see what those functions are... I have put the hide() function in many different places in the script above (ie in all the various if/else statements) and just can't get the desired outcome :| So frustrating because this is a pretty simple task and you would imagine this sort of functionality ie loading would be common.

KeenLearner 2010-09-23 01:13:38

Inside the function mc_success_db() I put an alert(resp.result); and alert(resp) and nothing happens. No 'success' even alerted.

KeenLearner 2010-09-23 01:25:14

@Keen - Well, it looks like your document ready isn't closed, also why are you including an argument (that's usually for other situations, like making plugins)? It should just be `$(document).ready( function() { ... });` Looks like you're missing a `)` and make sure to count your `}` s......

Peter Ajtai 2010-09-23 02:50:10

@Keen - Additionally, the `success` callback is passed a series of arguments, so you can't just use a reference to invoke `mce_success_cb`, you have to get those arguments (one of which is the result). --- Take a look at the [ **AJAXForm documentation** ](http://jquery.malsup.com/form/#options-object)

Peter Ajtai 2010-09-23 02:51:14

@Keen - I edited the answer to include some of this stuff..... I'd suggest playing around with the plugin and creating a very simple functioning page, and building up complexity as you begin to understand how it works.

Peter Ajtai 2010-09-23 03:02:02

Answer 2

A:

I didn't read any of your code, but have you tried the complete() method for the jQuery.ajax function? It calls the function once the data has been loaded, regardless of the error code sent by the server.

complete(XMLHttpRequest, textStatus)

A function to be called when the request finishes (after success and error callbacks are executed). The function gets passed two arguments: The XMLHttpRequest object and a string categorizing the status of the request ("success", "notmodified", "error", "timeout", or "parsererror"). This is an Ajax Event.

(From http://api.jquery.com/jQuery.ajax/)

Andrew Dunn 2010-09-23 03:07:38

ansaurus

tags:

views:

answers:

How do I hide my 'loading' image if the following script returns an error?

related questions