CODEWITHSUNDEEP
javascriptjqueryajax
mend
mend

Reputation: 163

JQuery with ajax keeps posting multiple results

I have many images on a page that show the status of the machine. If you click on the image then modal window opens and you can select new status. Status gets send via ajax to the DB. If I try to change another machines status the previous machines status gets changed also. Every status that I have touched gets resend every time as the last status that I selected.

It somehow creates an array of the machines I have changed and with every change posts all of them. Refresh of the page empties the array.

I think I need to use something similar to unset in php or move the inner click function outside of the first click function.

$(function() {
    $('#mach_status_dialog').hide();
    $('.mach_status').click(function(){
        var mach = $(this).attr('id');

        $('#mach_status_dialog').dialog({
            modal: true,
            draggable: false,
            resizable: false,
            width: 500,
            title: 'Mach ' + mach + ' status'
        });

        $('.statuses').click(function(){
            var user = user;
            var class = $(this).attr('class');
            class = class.substring(10);
            var status = $(this).first().find('p').parent().text();
            var data_string = 'mach=' + mach + '&status=' + status + '&user=' + user;
            $.ajax({
                url: 'ajax_op_mach_status.php',
                type:'POST',
                data: data_string,
                dataType: 'json',
                cache: false,
                success: function(response){
                    var newSrc = 'images/Circle2_'+class+'_25.png';
                    console.log($('#'+mach+'.mach_status').attr('src', newSrc));
                    $('#'+mach+'.mach_status').attr('src', newSrc);
                    $('#'+mach+'.mach_status').attr('title', status);
                    $( "#mach_status_dialog" ).dialog('close');
                }
            });
        });
    });
});

Upvotes: 1

Views: 118

Answers (3)

Myt
Myt

Reputation: 204

$(function() {
  $('#mach_status_dialog').hide();
   $('.mach_status').click(function(){
    var mach = $(this).attr('id');

    $('#mach_status_dialog').dialog({
        modal: true,
        draggable: false,
        resizable: false,
        width: 500,
        title: 'Mach ' + mach + ' status'
    });
});
$(document).on('click', '.statuses', function(){
        var user = user;
        var class = $(this).attr('class');
        class = class.substring(10);
        var status = $(this).first().find('p').parent().text();
        var data_string = 'mach=' + mach + '&status=' + status + '&user=' + user;
        $.ajax({
            url: 'ajax_op_mach_status.php',
            type:'POST',
            data: data_string,
            dataType: 'json',
            cache: false,
            success: function(response){
                var newSrc = 'images/Circle2_'+class+'_25.png';
                console.log($('#'+mach+'.mach_status').attr('src', newSrc));
                $('#'+mach+'.mach_status').attr('src', newSrc);
                $('#'+mach+'.mach_status').attr('title', status);
                $( "#mach_status_dialog" ).dialog('close');
            }
        });
    });
});

Upvotes: 1

Sriharsha
Sriharsha

Reputation: 2443

The problem is here...

$('.statuses').click(function(){

Every time you click on *.mach_status* element, it adds the event listener for all the statuses. You can changes this to 

$(this).find('.statuses').click(function abc(){
   .
   .
   .
   this.removeEventListner('click', abc);
});

Notice How I am using the named functions and removing them from event queue once they are fired.

Upvotes: 0

CodingIntrigue
CodingIntrigue

Reputation: 78525

As you say, just move the .click event into the DOM ready callback. As it stands, every time you click on a mach_status, you are assigning a new click event handler. So if I click on mach_status 10 times, then click on a statuses link once, you'll get 10 AJAX requests.

If you only want to bind onto a statuses click when the user clicks on mach_status, add a class onto the element to tell it when it's ready:

$(function() {
    $('#mach_status_dialog').hide();
    $('.mach_status').click(function(){
        $(".statuses").addClass("ready");
        var mach = $(this).attr('id');

        $('#mach_status_dialog').dialog({
            modal: true,
            draggable: false,
            resizable: false,
            width: 500,
            title: 'Mach ' + mach + ' status'
        });
    });
    $('.statuses.ready').click(function(){
        // Do AJAX
    });
});

Upvotes: 1

Related Questions