CODEWITHSUNDEEP
struts2-jquerystruts2-json-pluginstruts2-jquery-grid
Amol Ghotankar
Amol Ghotankar

Reputation: 2094

Struts2 jquery Grid ajax data reload on form submit

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>

Upvotes: 0

Views: 2915

Answers (2)

madhu pathy
madhu pathy

Reputation: 464

  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");

Upvotes: 1

Johannes
Johannes

Reputation: 2070

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.

Upvotes: 1

Related Questions