CODEWITHSUNDEEP
javascriptphpjqueryhtmldatatables
Fajny_Kubo
Fajny_Kubo

Reputation: 37

Update row in DataTables table without refresh page

I have a problem with my script.

In my table, every row has a url link which open modal window with email input to change this email without refresh page.

Script is ok if you change only one row. If I change second, third, etc row, every values changed by last one.

If I refresh page (F5) - script works perfectly.

Any helps ? Thanks a lot.

$(document).ready(function() {
  var table = $('#example').DataTable();
  
$('#example tbody').on('click', 'a', function () {
  var row = $(this).closest('tr[role="row"]');
  var data = table.row(row).data();
  
  $("#myModal").modal("show");
  $("#email").val(data[0]);
  
  $("#ulozit").click(function(){
    var novy_email = $("#email").val();
     $.ajax
     	   ({						
             method: "POST",
    	     url: "action_admin.php?action=uprava_emailu",
    	     data: { novy_email:novy_email, id:data[3] },
    	       success: function(data)
    		{
    		 table.ajax.reload();
    		 $("#myModal").modal("hide");							
    		}
    	    })		
    });
  });
});

Upvotes: 2

Views: 597

Answers (1)

KIKO Software
KIKO Software

Reputation: 16686

You have nested onClick handlers.

The second handler is added every time the first handler is called. The jQuery event model allows multiple handlers on one element, therefore a later handler does not override an older handler. The handlers will execute in the order in which they were bound.

In short: Do not nest your handlers.

Upvotes: 1

Related Questions