Hello Guys...I need help. User Story is: in one page at top user will enter their contact details (through a form) then click submit and bottom a dataTable will be populated when the page will load with the existing user contact details. As soon as user submitted his or her contact details the below dataTable grid will be refreshed and newly added data will be visible.
Now, in my JS file defining dataTable as follows:
This above portion is working fine and DataTable is getting populated on page load. But then After entering contact details when user clicks Submit button then I am trying to execute the following code to refresh the dataTable:
After execution function addContact(), is showing "Successfully Entered...." message on the page but the dataTable is not showing the newly added data.
Can anyone please guide me. Thanks a lot :)
Now, in my JS file defining dataTable as follows:
$(document).ready(function() { oTable = $('#ID').dataTable( { //Through Ajax call getting data from database }
This above portion is working fine and DataTable is getting populated on page load. But then After entering contact details when user clicks Submit button then I am trying to execute the following code to refresh the dataTable:
function addContact(){ $.ajax({ dataType: "json", type: "GET", url: ' ', data: { }, success: function(msg){ //alert(msg); if(msg == null) { $('#error').empty(); $('#error').append('<div><font color=\"#C98400\"><b>Successfully Entered....</b></font></div>'); } $('#ID').dataTable( { "fnDrawCallback": function({bRetrieve : true}) { alert( 'Hello' ); } } ); }, error: function(xhr, ajaxOptions, thrownError) { //alert("err"+thrownError+xhr.responseText); } }); } --This function addContact(), is outside $(document).ready(function() { }
After execution function addContact(), is showing "Successfully Entered...." message on the page but the dataTable is not showing the newly added data.
Can anyone please guide me. Thanks a lot :)