Question posted in
You can find the official documentation here.

Delete record using jquery ajax from a table whose rows are appended using ajax?

I want to delete table record on click on delete button using jquery ajax. But table rows are populated in table body using ajax on document load.The problem is that I cant access/select delete button by class or even by Id.
Something I understand is that it is due to ajax asynchronous nature. I tried (async:false) after this fix it is working. But google chrome is showing warning message in console, also it is not good practice.
I actually want a better way to do this?
can Anyone help me? Thanks in advance!

Tags:

2

Answers


  1. 0

    How to create a Minimal, Reproducible Example

    My guess is you’re trying to bind the click event to a dynamically generated button before it exists. Try binding to a parent that isn’t dynamically generated then provide a selector for .on().

    $('.table').on('click', 'button', function() { your code });

    https://api.jquery.com/on/

    Your warning is probably because async: false is blocking. It doesn’t allow other code to execute until it’s done.

    What does "async: false" do in jQuery.ajax()?

    Login or Signup to reply.
  2. 0

    Give all delete button class like
    <a href="javascript:;" class="someclass" data-id="3">Delete</a>

    on click event do ajax call

    <script type="text/javascript">
$('.someclass').unbind('click').bind('click', function(){

    // ajax call
    $.ajax({
        type:'POST',
        url:'delete.php',
        data:{id:$(this).data('id')},
        success: function(data){
            if(data=="YES"){
                $(this).parents('tr').remove();
            }else{
                console.log('error');
            }
        }

    })
});

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search