Quantcast
Viewing all articles
Browse latest Browse all 82111

Reloading the table data when data is added, deleted or edited

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
<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.

Viewing all articles
Browse latest Browse all 82111

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>