Prime ui Datatable Refresh after Ajax Post

Question

Hi i'm using Prime Ui for my Application with A RestFul Web Service. i have a datatable and when i click on a row, appears a dialog with a form that contains the bind of the row of the table and a button for submit when i edit it. Now after submit i need to refresh only the table, i'm going crazy but it still not working.

This is my html table

<div id="tblremote" style="width:70%; margin-left:auto; margin-right:auto; padding-top:15px">

</div>

and this is my javascript

 $('#tblremote').puidatatable({  
        caption: 'Employees',  
        paginator: {  
            rows: 15  
        },  
        columns: [  
            {field:'name', headerText: 'name', sortable:true},
            {field:'surname', headerText: 'surname', sortable:true},  
            {field:'address', headerText: 'address', sortable:true},
            {field:'email', headerText: 'email', sortable:true}

        ],  
        datasource: function load(callback) {  
            $.ajax({  
                type: "GET",  
                url: '...',  
                dataType: "json",  
                context: this,  
                success: function(response) {  
                    callback.call(this, response);  
                }  
            });  
        },  
        selectionMode: 'multiple',  
        rowSelect: function(event, data) {  
            $('#dlg').puidialog('show');
            document.getElementById("name").innerHTML = data.name;
            document.getElementById("surname").innerHTML = data.surname;
            document.getElementById("address").innerHTML = data.address;
        },  
        rowUnselect: function(event, data) {  
            $('#messages').puigrowl('show', [{severity:'info', summary: 'Row Unselected', detail: (data.name + ' ' + data.surname)}]);  
        }  
    });  

$('#dlg').puidialog({
    showEffect : 'fade',
    hideEffect : 'fade',
    width       : 300,
    modal : true,
    location : 'center',
    buttons : [ {
        text : 'Submit',
        icon : 'ui-icon-check',
        click : function()
        {

            $('#dlg').puidialog('hide');
    $.ajax({  
                type: "POST",  
                url: url,  

                context: this,  
                success: function() { 
                =(((((((((((((  
                }  

            }); 
        }
    }, {
        text : 'Cancel',
        icon : 'ui-icon-close',
        click : function()
        {
            $('#dlg').puidialog('hide');
        }
    } ]
});

The update works, but i can't refresh the table, the function of success method of dialog is empty because i don't know what i have to write! There is anyone that can help me?

Where is the code to refresh the table? Also I'd suggest posting to PrimeUI forum as well. http://forum.primefaces.org/viewforum.php?f=16 — Cagatay Civici, Aug 02 '13 at 22:31
In puidialog there is a button with the function, with $ ajax post. — user2516262, Aug 08 '13 at 07:15
Show the update method for refreshing the table within the puidialog. — Manuel, Jul 16 '15 at 05:53

score 0 · Answer 1 · answered Oct 30 '15 at 17:03

Primeui has methods you can access via JQuery but there is no refresh button. However I can link you to an example (primeui - php) that defines such method on paginator and on the datatable.

 //paginator, removes the class and creates again.
    this.element.removeClass('pui-paginator ui-widget-header');
    this._create();

 //datatable also defines a refresh method that later can use like this:
    success: function() { 
      $('#datatable').puidatatable('refresh',-1);
    }

Here are the links with all the source aveliable:

http://www.pm-consultant.fr/primeui/js/pmc/override/primeui-1.0/paginator.js

http://www.pm-consultant.fr/primeui/js/pmc/override/primeui-1.0/datatable.js

http://www.pm-consultant.fr/primeui/

Prime ui Datatable Refresh after Ajax Post

1 Answers1