Two ajax post simultaneously on one link click jquery

Question

I am using one link which has class name next and id end .

On clcik on it both class name and id i am using jquery post.

The issue i am getting is sometimes the ajax request fires multiple times on one click.on one click i am getting data from one url and simultaneously saving these data into db by another url.So sometimes there are some issues coming while inserting into db.sometimes null values enters and sometimes multiple rows entering into db.So how can i write these two functions so that both will work perfectly?

$('.next').live('click', function (e) {
    e.preventDefault();
    var result = [];
    var answer = [];
    var le = '';
    $('.answertext').each(function (index, element) {
        result.push($(this).val());
    });

    $('.answer').each(function (index, element) {
        answer.push($(this).val());
    });
    le = $('#level').val();
    mle = $('#mainlevel').val();
    $.ajax({
        url: 'matchanswers.php',
        type: 'POST',
        data: {
            result: result,
            answer: answer,
            level: le,
            mle: mle
        },
        async: true,
        beforeSend: function () {
            // show indicator
        },
        complete: function () {
            // hide indicator
        },
        success: function (data) {
            $('.quizform').html(data);
        }
    });
});

$('#end').live('click', function (e) {
    e.preventDefault();
    var sublev = $('#level').val();
    var score = $('#count').val();
    if (sublev < 11) {
        $.ajax({
            url: 'submitanswers.php',
            type: 'POST',
            data: {
                sublev: sublev,
                score: score
            },
            async: true,
            beforeSend: function () {
                // show indicator
            },
            complete: function () {
                // hide indicator
            },
            success: function (data2) {}
        });
    } else {
        $.ajax({
            url: 'getanswers.php',
            type: 'POST',
            data: {
                sublev: sublev,
                score: score
            },
            async: true,
            beforeSend: function () {
                // show indicator
            },
            complete: function () {
                // hide indicator
            },
            success: function (data3) {
                if (data3) {
                    $('.quizform').html("");
                    $('form :input').attr('disabled', 'disabled');
                    $('#logout').removeAttr("disabled");
                    var obj = $.parseJSON(data3);
                    $('#sum').html("Your Total Score for level - " + obj[0] + " is " + obj[1] + " in " + obj[2] + "secs");
                }
            }
        });
    }
});

Answer 1

Simply check for the event trigger like :

$('.next').live('click', function (e) {
    if(e.handled !== true){ // This will prevent event triggering more then once
        e.handled = true;
        //Your code

    }
});



$('#end').live('click', function (e) {
    if(e.handled !== true){ // This will prevent event triggering more then once
        e.handled = true;
        //Your code

    }
});

By doing so, you will stop multiple event trigger which is quite a common problem and should solve your problem.

Edit :

Your full code will be :

$('.next').live('click', function (e) {
    if (e.handled !== true) { // This will prevent event triggering more then once
        e.handled = true;
        //Your code

        e.preventDefault();
        var result = [];
        var answer = [];
        var le = '';
        $('.answertext').each(function (index, element) {
            result.push($(this).val());
        });

        $('.answer').each(function (index, element) {
            answer.push($(this).val());
        });
        le = $('#level').val();
        mle = $('#mainlevel').val();
        $.ajax({
            url: 'matchanswers.php',
            type: 'POST',
            data: {
                result: result,
                answer: answer,
                level: le,
                mle: mle
            },
            async: true,
            beforeSend: function () {
                // show indicator
            },
            complete: function () {
                // hide indicator
            },
            success: function (data) {
                $('.quizform').html(data);
            }
        });

    }
});



$('#end').live('click', function (e) {
    if (e.handled !== true) { // This will prevent event triggering more then once
        e.handled = true;
        //Your code

        e.preventDefault();
        var sublev = $('#level').val();
        var score = $('#count').val();
        if (sublev < 11) {
            $.ajax({
                url: 'submitanswers.php',
                type: 'POST',
                data: {
                    sublev: sublev,
                    score: score
                },
                async: true,
                beforeSend: function () {
                    // show indicator
                },
                complete: function () {
                    // hide indicator
                },
                success: function (data2) {}
            });
        } else {
            $.ajax({
                url: 'getanswers.php',
                type: 'POST',
                data: {
                    sublev: sublev,
                    score: score
                },
                async: true,
                beforeSend: function () {
                    // show indicator
                },
                complete: function () {
                    // hide indicator
                },
                success: function (data3) {
                    if (data3) {
                        $('.quizform').html("");
                        $('form :input').attr('disabled', 'disabled');
                        $('#logout').removeAttr("disabled");
                        var obj = $.parseJSON(data3);
                        $('#sum').html("Your Total Score for level - " + obj[0] + " is " + obj[1] + " in " + obj[2] + "secs");
                    }
                }
            });
        }

    }
});

Answer 2

You are firing click on same click even if id and class are different the link is same.

 $('.next').live('click', function(e) 

fires one ajax call and

$('#end').live('click', function(e)

fires another, what you can do is fire one ajax on success of other

$('.next').live('click', function(e)  { ...
     success: function(data) { $.ajax({
                url: 'submitanswers.php', }

but this is not good practice