I am having a issue trying to reload data in my table when entries are added, removed or edited. All these functions happen via ajax post calls in jQuery. I am using the fnReloadAjax plugin.
Here's the debug data from bookmarklet http://debug.datatables.net/otoqen
Here's the relevant code snippets
HTML
jQuery
I am not sure where I am going wrong.
Here's the debug data from bookmarklet http://debug.datatables.net/otoqen
Here's the relevant code snippets
HTML
<table class="widefat fixed wp-list-table" id="datatable" cellspacing="0"> <thead> <tr class="header"> <td id="name" class="manage-column column-title">Name</td> <td id="price" class="manage-column column-title">Price</td> </tr> </thead> <tbody class="entries"> <tr class='entry widefat' id='entry-4'> <td class='namefield'> <div class='name'>Ships</div> <div class='actions'> <span class='deleterow'> <a href='http://localhost/wp-content/plugins/my-plugin/delete_inventory.php' class='delete' id='4'>Delete</a> | </span> <span class='editrow'> <a href='http://localhost/wp-content/plugins/my-plugin/edit_inventory.php' class='edit' id='4'>Edit</a> </span> </div> </td> <td class='price'> 100000 </td> </tbody> </table> <div class="form"> <span class="name"> <input type="text" name="name" placeholder="Enter Inventory Name" id="inventoryname"> </span> <span class="price"> <input type="text" name="price" id="inventoryprice" placeholder="Enter Inventory Price"> </span> <span class="add"> <a href="http://localhost/wp-content/plugins/my-plugin/add_inventory.php" id='inventorysave' class='save'>Add Group</a> </span> </div> </div>
jQuery
var oTable jQuery(document).ready(function($) { /* Reload data in datatable when value is updated */ $.fn.dataTableExt.oApi.fnReloadAjax = function ( oSettings, sNewSource, fnCallback, bStandingRedraw ) { if ( typeof sNewSource != 'undefined' && sNewSource != null ) { oSettings.sAjaxSource = sNewSource; } // Server-side processing should just call fnDraw if ( oSettings.oFeatures.bServerSide ) { this.fnDraw(); return; } this.oApi._fnProcessingDisplay( oSettings, true ); var that = this; var iStart = oSettings._iDisplayStart; var aData = []; this.oApi._fnServerParams( oSettings, aData ); oSettings.fnServerData.call( oSettings.oInstance, oSettings.sAjaxSource, aData, function(json) { /* Clear the old information from the table */ that.oApi._fnClearTable( oSettings ); /* Got the data - add it to the table */ var aData = (oSettings.sAjaxDataProp !== "") ? that.oApi._fnGetObjectDataFn( oSettings.sAjaxDataProp )( json ) : json; for ( var i=0 ; i<aData.length ; i++ ) { that.oApi._fnAddData( oSettings, aData[i] ); } oSettings.aiDisplay = oSettings.aiDisplayMaster.slice(); if ( typeof bStandingRedraw != 'undefined' && bStandingRedraw === true ) { oSettings._iDisplayStart = iStart; that.fnDraw( false ); } else { that.fnDraw(); } that.oApi._fnProcessingDisplay( oSettings, false ); /* Callback user function - for event handlers etc */ if ( typeof fnCallback == 'function' && fnCallback != null ) { fnCallback( oSettings ); } }, oSettings ); }; oTable = $('#datatable').dataTable(); /* Use datatables plugin on this table */ $('#datatable').dataTable(); /* Generic delete function that will work for all the tables */ $('.entries').on('click', '.delete', function(e) { e.preventDefault(); var id = $(this).attr('id'); var url = $(this).attr('href'); var deletedata = 'id=' + id; $.ajax({ type: "POST", url: url, data: deletedata, cache: false, success: function(html) { $('.delete#'+ id).closest('.entry').remove(); oTable.fnReloadAjax(); } }); }); /* Inventory Management - Check form fields and save to database */ $('.form').on('click', '#inventorysave', function(e) { e.preventDefault(); var name = $('#inventoryname').val(); var price = $('#inventoryprice').val(); var url = $(this).attr('href'); var insertdata = 'name=' + name + '&price=' + price; if ( (name == '') OR (price =='') ) { if (name == '') { $('#inventoryname').css('background','red'); } if (price == '') { $('#inventoryprice').css('background','red'); } } else { $.ajax({ type: "POST", url: url, data: insertdata, cache: false, success: function(html) { $('.entries').append(html); $('.entries').last().fadeIn('slow'); oTable.fnReloadAjax(); } }); } }); $('.entries').on('click', '.update', function(e) { e.preventDefault(); var edit_div = $(this).parents('.inline-edit'); var url = $(this).attr('href'); var id = edit_div.attr('id'); var groupname = edit_div.find('.edit-name-field').val(); var price = edit_div.find('.edit-price-field').val(); updatedata = "id=" + id + "&name=" + name + "&price=" + price; $.ajax({ type: "POST", url: url, data: updatedata, success: function(html) { edit_div.hide(); var selected_div = $('.entry#' + id); selected_div.show(); //show the old div with updated values selected_div.find('.name').text(name); selected_div.find('.price).text(price); oTable.fnReloadAjax(); } }); }); });
I am not sure where I am going wrong.