Question

I am having a problem with reloading the grid with trigger(‘reloadGrid’).
I send an AJAX call to the server and the server returns the xmlstring just fine. but the grid does not load the new data.
heres my code:

$('#tasks').jqGrid({
        datatype: "xmlstring",
        datastr: <?php echo json_encode($_xml); ?>,
        colNames: ["Date","TaskID","Subject","Notes","Due Date"],
        colModel: [ 
            {name: "Date", index:"AssignDate",align: "center", xmlmap:"AssignDate"},
            {name: "TaskID", index:"TaskID",xmlmap:"TaskID", align:"center"},
            {name: "Subject", index:"TaskSubject", align: "center", xmlmap:"TaskSubject"},
            {name:"Notes", index:"Notes", align: "center",height: 20,xmlmap:"Notes"},
            {name:"Due Date", index:"DueDate", align: "center",height: 20,xmlmap:"DueDate"}
        ],
        height: 250,
        viewRecords: true,
        autowidth: true,
        xmlReader: {
            root: "tasks",
            row: "task",
            repeatitems: false
        },
        pager: $('#navTasks'),
        caption: "Your Tasks"});
setInterval(
    function(){
    $.ajax({
        url: 'register.php',
        data: {uID:uID},
        dataType: 'xmlstring',
        success: function(xml)
        {
            $("#tasks").setGridParam({datastr: xml, datatype: "xmlstring"}).trigger('reloadGrid')
        }
    });},10000);

here is my register.php file:

$uID = $_GET['uID'];
$host="127.0.0.1:3306";
$db_name='wf_db';
$tbl_name="tasks";
$connect = new mysqli("$host","root"," ","$db_name")or die('Can\'t connect to database!');
$sql = "SELECT * FROM $tbl_name WHERE UserID='$uID' and Task_Completed='0'";
$query_data = mysqli_query($connect,$sql)or die('Couldnt get data');
$row = mysqli_num_rows($query_data);
if($row != 0){ 
    $_xml = "<?xml version=\"1.0\" encoding=\"UTF-8\" ?>\r\n";
    $_xml .="<tasks>\r\n";
    while ($result = mysqli_fetch_array($query_data)) {
         if ($result["TaskID"]) {
            $_xml .="\t<task>\r\n";
            $_xml .="\t\t<TaskID>" . $result["TaskID"] . "</TaskID>\r\n";
            $_xml .="\t\t<UserID>" . $result["UserID"] . "</UserID>\r\n";
            $_xml .="\t\t<AssignID>" . $result["AssignID"] . "</AssignID>\r\n";
            $_xml .="\t\t<AssignDate>" . $result["Assign_Date"] . "</AssignDate>\r\n";
            $_xml .="\t\t<DueDate>" . $result["Due_Date"] . "</DueDate>\r\n";
            $_xml .="\t\t<AssignUser>" . $result["Assign_User"] . "</AssignUser>\r\n";
            $_xml .="\t\t<TaskSubject>" . $result["Task_Subject"] . "</TaskSubject>\r\n";
            $_xml .="\t\t<Notes>" . $result["Notes"] . "</Notes>\r\n";
            $_xml .="\t\t<TrackID>" . $result["TrackID"] . "</TrackID>\r\n";
            $_xml .="\t\t<Details>" . $result["Completion_Details"] . "</Details>\r\n";
            $_xml .="\t</task>\r\n";
         } else {
            $_xml .="\t<task>\r\n";
            $_xml .="\t\t<TaskID></TaskID>\r\n";
            $_xml .="\t\t<UserID></UserID>\r\n";
            $_xml .="\t\t<AssignID></AssignID>\r\n";
            $_xml .="\t\t<AssignDate></AssignDate>\r\n";
            $_xml .="\t\t<DueDate></DueDate>\r\n";
            $_xml .="\t\t<AssignUser></AssignUser>\r\n";
            $_xml .="\t\t<TaskSubject></TaskSubject>\r\n";
            $_xml .="\t\t<Notes></Notes>\r\n";
            $_xml .="\t\t<TrackID></TrackID>\r\n";
            $_xml .="\t\t<Details></Details>\r\n";
            $_xml .="\t</task>\r\n";
         }
    }

 $_xml .="</tasks>";

echo json_encode($_xml);

 } 
 else {
    echo 'Oops something went wrong!';
}

UPDATE:

    var data = <?php echo json_encode($_xml); ?>;
    var uID = <?php echo $uID; ?>;$grid.jqGrid({
        datatype: "xmlstring",
        datastr: data, url: 'register.php',
        sortname: 'Job ID',
        sortOrder: 'asc',
        postData: {uID:uID},
        colNames: ["track","Job ID","Subject","Notes","Details","Due Date"],
        colModel: [ 
            {name: "track",  index:"TrackID",align: "center", xmlmap:"TrackID", hidden: true, sortable: true},
            {name: "Job ID", index:"TaskID",xmlmap:"TaskID", align:"center",sortable: true, sorttype: 'text', sortable: true, editable: false, editoptions: {readonly: true}},
            {name: "Subject", index:"TaskSubject", align: "center", xmlmap:"TaskSubject",sorttype: 'text', sortable: true,editable: false, editoptions: {readonly: true}},
            {name:"Notes", index:"Notes", align: "center",height: 20,xmlmap:"Notes",sorttype: 'text', sortable: true,editable: false, editoptions: {readonly: true}},
            {name:"Details", index:"Details", align: "center", xmlmap:"Details", editable: true, edittype: 'select', editoptions: {value: 'Not Started:Not Started;In Progress:In Progress;Completed:Completed'}, sortable: true},
            {name:"Due Date", index:"DueDate", align: "center", xmlmap:"DueDate",sorttype: 'text', sortable: true, editable: true, editoptions: {dataInit: initDateEdit}, formatter: 'date', formatoptions: {newformat: 'd-M-Y'}, datefmt: 'd-M-Y'}
        ],


        editurl: 'editRow.php',
        rowNum: 10,
        rowList: [10,20,50],
        viewRecords: true,
        xmlReader: {
            root: "tasks",
            row: "task",
            repeatitems: false
        },
        pager: $('#navTasks'),
        caption: "Your Tasks"
    }).navGrid('#navTasks',{<?php
        if ($user==NULL){
            echo 'edit:false,add:false,del:false';
        }
        else{
            echo 'edit:false,add:false,del:false';
        }
    ?>},{},{},{},{multipleSearch: false, multipleGroup: false});


    setInterval(
    function(){
    $grid.trigger('reloadGrid',[{current:true}]);},6000);

Answer 1

First of all you uses $.ajax which don’t know the dataType: 'xmlstring'. You means dataType: 'xml'.

Second You misunderstood the datatype: 'xmlstring'. Instead of the usage of separate $.ajax call you can use

datatype: 'xml',
url: 'register.php',
postData: {uID: uID},

options of jqGrid. You can consider to implement uID property of the postData as method (see here for details). The body of setInterval can be reduced to the call of $("#tasks").trigger('reloadGrid', [{current: true}]); (see here and here).

If you need don’t load the grid body at the first and do loading only inside of setInterval you can set datatype: 'local' and change datatype to 'xml' with respect of setGridParam like you do already.

Moreover I don’t use PHP myself, but nevertheless I would recommend you to use DOMDocument from PHP DOM (see for example here or here for details) instead of writing the XML manually. Direct construction of XML text can produce many errors. For example you can’t place characters like < directly as the content of XML elements without its encoding. At least CDATA sections should be used.