Update button using ajax and data-* attribute

Question

I'm trying to make an update function instead of using forms, I use data-* attribute and ajax. I just want to prevent the button from firing after I update the values but I have a problem with my script after updating the button shouldn't be firing because the value of the input(number) and the data-* attribute of my button are already the same. I hope you can help me guys. Thanks in advance :)

$('body').on('click', '.btn-edituser', function(){
var button = $(this);
var upval = button.parent().prev().find('.data-avail').val();//get the value of the input(number)
var updateId = button.data('updateid');// this is the user id to be pass on to the php file
var tempAv = button.data('tempavail'); //doesn't get the new values after updating this is my PROBLEM

if(upval != tempAv){ //check if the input(number) has been changes value / doesn't have the same value with the data attribute (temporary)
    button.addClass('disabled');
    button.html('<i class="fa fa-refresh fa-spin"></i> Updating...');

    $.ajax({
        url:'./inc/update-avail.php',
        type: 'POST',
        data:{upval:upval, updateId:updateId},
        success:function(data){             
            button.removeClass('disabled');
            button.attr('data-tempavail', upval); //update the data attribute (temporary)
            button.removeClass('btn-info').addClass('btn-success').html('<i class="fa fa-check"></i> Success');
            setTimeout(function(){                  
                button.removeClass('btn-success').addClass('btn-info').html('<i class="fa fa-pencil"></i> Edit');
            }, 1000);
        }           
    });
}   });

change button.attr('data-tempavail', upval); to button.attr('data-tempavail', tempAv) — coder
– coder, Commented Nov 4, 2016 at 10:10

vijayP · Accepted Answer · 2016-11-04 10:17:08Z

1

In success: handler try to set data via $.data instead of $.attr as later one will stores the information directly on the element in attributes. So code should be like:

success:function(data){             
    button.removeClass('disabled');
    button.data('tempavail', upval); //update the data which can be seen via button.data('tempavail') again on next button click
    button.removeClass('btn-info').addClass('btn-success').html('<i class="fa fa-check"></i> Success');
    setTimeout(function(){                  
        button.removeClass('btn-success').addClass('btn-info').html('<i class="fa fa-pencil"></i> Edit');
    }, 1000);
}

answered Nov 4, 2016 at 10:17

vijayP

11.5k5 gold badges28 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

johnnyblade Over a year ago

I have another problem but it's out of the topic can you help me?

vijayP Over a year ago

@johnnyblade - sure. please go ahead. or create separate question and post me the link for it

johnnyblade Over a year ago

maybe I can ask you here because I cannot post another question so here it is. I always get this "Uncaught TypeError: button2.parents(...).remove(...).draw is not a function(…)" but it works just fine. I just don't want to see this type of error in my console this is my code

johnnyblade Over a year ago

$('body').on('click', '.btn-deleteuser', function() { var button = $(this); var deleteId = button.data('deleteid'); var button2 = $('table button.data'+deleteId); button.addClass('disabled'); button.attr('disabled', 'disabled'); button.html('<i class="fa fa-refresh fa-spin"></i> Deleting...'); $.ajax({ url:'./inc/delete-user.php', type: 'POST', data:{deleteId:deleteId}, success:function(data){ button.html('<i class="fa fa-check"></i> Success!'); button.next('.btn-danger').text('Close'); button2.parents('tr').remove().draw(false); }});});

vijayP Over a year ago

which jquery plugin you are using? what is .draw() function?

|

Collectives™ on Stack Overflow

Update button using ajax and data-* attribute

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related