jquery.form update target some of the time

Question

I'm using jQuery.form plugin to .ajaxSubmit() between div's popping in and out of view (for logging and sometimes validation purposes). The user can navigate forward and backward. Some of the div's have full form data, in which case I would use the form's parent div as target:. However, the other div's contain text and navigation buttons, and they don't need to be updated (just .hide() after the ajaxSubmit returns a string indicating the next div id to pop). If I use $(this).parent('div') as the target, the whole div gets overwritten with the returned string. This string is only used to populate a hidden element to help with navigating through these screens/div's.

$('.CSRForm').submit(function () {
    $(this).ajaxSubmit({
        target: $(this).parent('div'), //for validation purposes on the forms with data
        success: StepCall //to check whether the response is valid for redirecting; and logging
    });
    return false;
});

function StepCall(responseText, statusText, xhr, $form) {
    if (responseText != "Negatory") { //"Negatory" would indicate no navigation
        $form.parent('div').css("display", "none"); //doesn't seem to work, neither does "hide()"
        $('#' + responseText).css("display", "block");
    }
}

Also, I'm not sure if I'm correctly using $form in the .ajaxSubmit success callback. Does anyone know? The website isn't clear.

Answer 1

I think $form here would be a jQuery object. I think it would be a good idea to dump that object to the console to find out if the object is there (just for sanity). If you're using firebug I believe using console.log() in your JS should work.

success

Callback function to be invoked after the form has been submitted. If a 'success' callback function is provided it is invoked after the response has been returned from the server. It is passed the following arguments:

1. 1.) responseText or responseXML value (depending on the value of the dataType option).
2. 2.) statusText
3. 3.) xhr (or the jQuery-wrapped form element if using jQuery < 1.4)
4. 4.) jQuery-wrapped form element (or undefined if using jQuery < 1.4)

So it definately should be passed to you as a jQuery object. I guess if you're using jQuery < 1.4 you're in trouble though.

Answer 2

$form is a wrapped reference to your calling form.

The target $(this).parent('div') has been updated with the response, before your success function is called.

Your triggering form has been overwritten with xhr response. The $form.parent in your success method throughs an error, because the reference to $form is no longer valid, ...