how to reaload a jqgrid on the success of an ajax call

Question

I am using struts 2.3.7, struts2-jquery-grid-plugin-3.5.0 and hibernate 3.6. I want to reload the jqgrid after an ajax call made.

I have an jDialog box which have three buttons,After clicking the buttons,We hove to perform some operations such as an Ajax call after that I have to reload the jqgrid how to achieve that.

my jDialog

<sj:dialog 
         id="mybuttondialog"
        buttons="{
                'Approove':function() { approoveButton(); },
                'Cancel':function() { cancelButton(); },
                'Deny':function() { denyButton(); }
                }"
        autoOpen="false"
        modal="true"
        title="Assign Issues"
        width="375"
        resizable="false"
        draggable="true"
        closeTopics="closeThisDialog"
>

My jqGrid is as

 <div id="targetDivToRefresh">
    <sjg:grid
        id="gridtable"
        caption="Issue-Summary"
        dataType="json"
        href="%{remoteurl}"
        pager="true"
        gridModel="gridModel"
        rowList="10,15,20"
        rowNum="15"
        rownumbers="true"
        reloadTopics="reloadGrid"
    >
        <sjg:gridColumn name="issue_id"  id="issueId"  index="id" title="Issue-ID" formatter="integer"  sortable="false"/>
        <sjg:gridColumn name="issue_description" index="id" title="Issue-Details"  sortable="false"/>
        <sjg:gridColumn name="issue_raised_date" index="date" title="Issue-Date"  formatter="date"  sortable="false"/>

        <sjg:gridColumn name="issue_id"   index="issues" title="Action" sortable="false" formatter="formatLink"/>
        <sjg:gridColumn name="assigned"  index="assigned" title="Assigned To"  sortable="false"/>
    </sjg:grid>
        </div>

After clicking the the column "Acton" the jDialog box opened where I have to click on any buttons i.e. Approove,Deny Buttons to perform some operations. After Completion of the ajax call I have to reload the jqgrid. I am using customFormatter as

function formatLink(cellvalue, options, rowObject) {

                      var issueId=rowObject.issue_id;

                        return "<a href='#' onClick='javascript:openDialog("+issueId+")'>" + issueId+ "</a>";

                }
                function openDialog(issue) {

                        global_id=issue;
                        $("#mybuttondialog").dialog().text('Your are going to assign Issue-Id:' + issue);
                        $("#mybuttondialog").dialog('open');

                }

However I have tried something like this to reload the grid:

$("#gridtable").trigger("reloadGrid"); // where #gridtable is my jqGrid idName

Please help me out, I am using jqgrid first time.

Edited Section

Actually the ajax call is in demo phase, however the code is as follows.

function approoveButton()
        {
            $("#mybuttondialog").load("<s:property value='issueTrackerUrl'/>?id="+global_id);

        }

Here issueTrackerUrl is an action which made an ajax call successfully. And here I reload the jqgrid

 function reload() 
        {
              $("#gridtable").trigger("reloadGrid"); 
        }

enter image description here

muthu · Accepted Answer · 2013-01-07T06:07:59.200

3

You need to trigger the reload function in the success of the ajax call then only u can reload the grid.

$("#mybuttondialog").load("<s:property value='issueTrackerUrl'/>?id="+global_id,  function(responseText, statusText, xhr)
        {
                if(statusText == "success")
                        alert("Successfully loaded the content!");
                       $("#gridtable").trigger("reloadGrid");
                if(statusText == "error")
                        alert("An error occurred: " + xhr.status + " - " + xhr.statusText);
        });

Call those line in the success of ajax. The issueTrackerUrl should return success or error.

edited Jan 07 '13 at 06:07

answered Jan 07 '13 at 05:43

muthu

5,381
2
33
41

will you please give me some example, I have tried the above line but browser got crashed every time once the above code is executed – arvin_codeHunk Jan 07 '13 at 05:46
thanks, but one doubt which line should be called on the success of ajax and how, sorry but I have no idea in working with jquery – arvin_codeHunk Jan 07 '13 at 06:12
an more question what is "list10" in var ids =jQuery("#list10").jqGrid('getGridParam','selarrrow') ,I am a newbie ,getting some understanding of jqgrid. please follow the link http://stackoverflow.com/questions/3754953/jqgrid-not-reloading-after-making-a-ajax-call-using-triggerreload – arvin_codeHunk Jan 07 '13 at 06:14
$("#gridtable").trigger("reloadGrid"); should be called on the success of ajax – muthu Jan 07 '13 at 06:20
jQuery("#list10").jqGrid('getGridParam','selarrrow')-- list10 is the id of the html element – muthu Jan 07 '13 at 06:21
thanks , I know list10 is an id of an element but which elements , is it an id of jqgrid or column of jqgrid or else. – arvin_codeHunk Jan 07 '13 at 06:24
thank dude, I 'll give it a try ,one last question , will you please list some good tutorial or sites for getting good and deep understanding of struts2-jquery and struts2-jqgrid plugins understanding? – arvin_codeHunk Jan 07 '13 at 06:29
This is the site for learning jQuery http://api.jquery.com/ for jqgrid you need to refer the documentation of jqgrid – muthu Jan 07 '13 at 06:34
$("#gridtable").trigger("reloadGrid"); this line is creating problem, i am calling this line on ajax success but the whole browser got crashed after this line, whats wrong going on with this? – arvin_codeHunk Jan 07 '13 at 07:44
is there showing any error. Please check this with crtl+shift+j in browser – muthu Jan 07 '13 at 08:33
ok, i have attached a snippet of error console,Please check also for error check http://stackoverflow.com/questions/14192034/browser-got-crashed-by-executing-grid-triggerreloadgrid – arvin_codeHunk Jan 07 '13 at 08:56

how to reaload a jqgrid on the success of an ajax call

1 Answers1