Question

I’m struggling around for a while now with a jQuery Ajax-Request. I’m building a Step-by-Step rating form. There is actually only one form which will be submitted on each step (the current step will is transmitted to PHP, only data that is important for that step will be validated).

The Problem:

The Ajax call is being submitted a lot of times without reloading the page. Although the ajax call (logged into Firebug console) is returning the right value (e.g. error if PHP validation fails) jQuery still picks up the old return values first (e.g. an old error or a success) and goes through the code again..

Code

Here is my jQuery function..

    $(ajax_cont).find(':submit').live('mouseup keyup',function(){

        submitButton  = $(this);

    });

    $(ajax_cont).live("submit", function(d) {

        var index = submitButton.attr("id").substring(9);

        d.preventDefault();

        var str = $(this).serialize() + "&step=" + index;
        var uri = ajax_default;

        $.ajax({

            type: "POST",
            cache: false,
            asynch: false,
            url: uri,
            data: str,
            success: function(data) {

                $(".step_slider_container").ajaxComplete(function(event, request, settings) {

                    if(data.success) {

                        alert("jaa");

                        var next_step = "";

                        $(ajax_cont).parent().find(".error").html("").hide();
                        $(ajax_cont).find(".error_input").removeClass("error_input");

                        next_step = data.next;

                        console.log(data.next);

                        step_check = $(ajax_cont).find(".step_check").val();

                        if(step_check.indexOf(next_step) == -1) {

                            step_check = step_check + "," + next_step;

                        }

                        $(ajax_cont).find(".step_check").val(step_check);

                        var enabled_array = step_check.split(',');

                        $.each(enabled_array, function(enabled_index, enabled_value) {

                            if(enabled_array[enabled_index].length > 0) {

                                tmp_div = enabled_array[enabled_index];

                                $("body").find(".step_" + tmp_div).removeClass("disabled");

                            }

                        });

                        // Show - Hide Container

                        var id = "#step_" + next_step;

                        fadeDiv(id);

                        if(next_step == 3) {

                            preview_rating();
                            setHeight(ajax_cont.height());

                        }

                        // Navigation

                        $("body").find(".step").removeClass("step_active");
                        $("body").find(".step_" + next_step).addClass("step_active");

                    }

                    if(data.error) {

                        next_step = "";

                        $(ajax_cont).find(".error_input").removeClass("error_input");

                        error       =   data.error;
                        error_ids   =   data.error_id;

                        $.each(error_ids, function(index, value) {

                            id = "#" + error_ids[index];

                            $(id).addClass("error_input");

                        });

                        $(ajax_cont).parent().find(".error").html("<p>" + error + "</p>").show();

                        setHeight(ajax_cont.height());

                    }

                });

            },
            dataType: "json"

        });

        return false;

    });

I hope someone can find an answer to the problem.. Seems to make me crazy 🙁

Answer 1

I can see a few problems with your code:

a) You are setting the ajaxSuccess event within the success event of an ajax call…
b) You are using data.success to determine whether it is successful, which won’t change because of an PHP error.

Instead, you should do:

$(ajax_cont).find(':submit').live('mouseup keyup',function(){

    submitButton  = $(this);

});

$(ajax_cont).live("submit", function(d) {

    var index = submitButton.attr("id").substring(9);

    d.preventDefault();

    var str = $(this).serialize() + "&step=" + index;
    var uri = ajax_default;

    $.ajax({

        type: "POST",
        cache: false,
        asynch: false,
        url: uri,
        data: str,
        success: function(data) {

            if(data.success) {

                alert("jaa");

                var next_step = "";

                $(ajax_cont).parent().find(".error").html("").hide();
                $(ajax_cont).find(".error_input").removeClass("error_input");

                next_step = data.next;

                console.log(data.next);

                step_check = $(ajax_cont).find(".step_check").val();

                if(step_check.indexOf(next_step) == -1) {

                    step_check = step_check + "," + next_step;

                }

                $(ajax_cont).find(".step_check").val(step_check);

                var enabled_array = step_check.split(',');

                $.each(enabled_array, function(enabled_index, enabled_value) {

                    if(enabled_array[enabled_index].length > 0) {

                        tmp_div = enabled_array[enabled_index];

                        $("body").find(".step_" + tmp_div).removeClass("disabled");

                    }

                });

                // Show - Hide Container

                var id = "#step_" + next_step;

                fadeDiv(id);

                if(next_step == 3) {

                    preview_rating();
                    setHeight(ajax_cont.height());

                }

                // Navigation

                $("body").find(".step").removeClass("step_active");
                $("body").find(".step_" + next_step).addClass("step_active");

            }

            if(data.error) {

                next_step = "";

                $(ajax_cont).find(".error_input").removeClass("error_input");

                error       =   data.error;
                error_ids   =   data.error_id;

                $.each(error_ids, function(index, value) {

                    id = "#" + error_ids[index];

                    $(id).addClass("error_input");

                });

                $(ajax_cont).parent().find(".error").html("<p>" + error + "</p>").show();

                setHeight(ajax_cont.height());

            }

        },
        error : function()
        {
            alert('there was an error parsing the json, or processing your request');
        },
        dataType: "json"

    });

    return false;

});

Note, I have removed the ajaxSuccess event and implemented an error event to your ajax request.