Struts2 jquery Grid ajax data reload on form submit

StackOverflow https://stackoverflow.com/questions/14466984

Question

I have a fairly simple use case in which,

I have a search form and a Grid

The grid is suppose to show some default results on loadSearch.action.

When the user enters few criteria in search form and hit submit button then ajax results must be reloaded in the grid below.

I am getting the results via post response but not able to show them inside grid.

Here is my code 

    <%@ taglib prefix="s" uri="/struts-tags"%><%@ taglib prefix="sx" uri="/struts-dojo-tags" %>

    <%@ taglib prefix="sj" uri="/struts-jquery-tags"%>

    <%@ taglib prefix="sjg" uri="/struts-jquery-grid-tags"%>

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

    <title>Search Patient</title>

    <sj:head jqueryui="true"/> 

    </head>

    <body>

    <s:form id="form" action="search"  theme="simple" namespace="/patient/register" cssClass="yform">

    <div>

    <table>

    <tr>

    <td>

    <s:text name="global.fname"></s:text>

    </td>

    <td>

    <sj:textfield name="firstName"></sj:textfield>

    </td>

    </tr>

    <tr>

    <td>

    <s:text name="global.lname"></s:text>

    </td>

    <td>


    <sj:textfield name="lastName"></sj:textfield>
        </td>

    </tr>

    </table>

    <div>

    <sj:a onSuccessTopics="reloadGrid" button="true">Search</sj:a>

    </div>

    </div>

    </s:form>


    <div>

    <div id="searchResults">

    <sjg:grid id="gridtable" caption="Customer Examples"
            pager="true" dataType="json" reloadTopics="reloadGrid" formIds="form"
            gridModel="patients" rowList="10,15,20" rowNum="15" loadonce="true" 
            href="%{search}"
            rownumbers="true">

    <sjg:gridColumn name="userId" index="userID" title="Id"
                sortable="true" />

    <sjg:gridColumn name="firstName" index="firstName" title="Name"
                sortable="true" />

    </sjg:grid>

    </div>

    </div>

    </body>

    </html>

Xml mappings

    <action name="loadSearch" class="com.cursive.eclinic.action.PatientAction" method="loadSearch">
        <interceptor-ref name="userAgentInterceptor" />
        <result name="success">search.jsp</result>
        <result name="error">/commons/exception.jsp</result>
    </action>

    <action name="search" class="com.cursive.eclinic.action.PatientAction" method="search">
        <interceptor-ref name="exception"></interceptor-ref>
        <interceptor-ref name="prepare"></interceptor-ref>
        <interceptor-ref name="modelDriven"></interceptor-ref>
        <interceptor-ref name="params"></interceptor-ref>
        <interceptor-ref name="userAgentInterceptor" />
        <result name="success" type="json">
            <param name="includeProperties">
                ^patients\[\d+\]\.userId,
                ^patients\[\d+\]\.firstName,
            </param>
        </result>
    </action>
Was it helpful?

Solution

Simply don't use the onSuccessTopics they are only published after an successful AJAX Call. Shich is not defined in your submit Button.

Use the onClickTopics in this use case.

OTHER TIPS

  1. In order to make ajax call to SJQ grid, set datatype ="local" remove the href.

  2. In your button do call the below function with the requisite data to reload the grid:

    var allParameters = $("#gridId").jqGrid("getGridParam"); 
allParameters .data = myData;
$("#gridId").trigger('reloadGrid');

In above function, gridId is gridtable in your case. If you want to add a row, you can call below function:

 $("#gridId").jqGrid('setGridParam', {
                        data: myData
                    }).trigger("reloadGrid");
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top