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

$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, …