I want to use Smart Refresh on a WebGrid component by clicking a h:commandButton component, but I found that the whole page refreshes instead of just the grid data. My code is as follows:
JSP:
<h:form id="myTradingPlatform"> <h:panelGroup styleClass="section"> <ig:tabView id="myAcctInfoTab"> <ig:tabItem value="Order Book"> <ig:link id="refreshLink" actionListener="#{orderBook.onRefreshButtonClick}" smartRefreshIds="orderBookGridView" value="refresh" /> <h:commandButton value="Refresh" id="refreshButton" onclick="BLOCKED SCRIPTig.smartSubmit('myTradingPlatform:myAcctInfoTab:refreshLink', null, null, 'myTradingPlatform:myAcctInfoTab:orderBookGridView', null);" />
.....
(since the ig:smartSubmit needs to use NetAdvantage component in the first parameter, so i created a dummy refresh link as above for this purpose. Would you please also advise if there is another better approach?)
Backing Bean:
public void onRefreshButtonClick(ActionEvent e){ enquireOrderStatus(); } public OrderStatusBean getOrderStatus(){ if (orderStatus == null){ orderStatus = new OrderStatusBean(); orderStatus.enquireOrderStatus(); } return orderStatus; } public void enquireOrderStatus(){ getOrderStatus().enquireOrderStatus(); orderBookGridView.dataBind(); }
Have I made something wrong such that the smart refresh does not work ?
Hi Kennanwu,
Can you attach your complete backing bean for a review by which I can see how you are updating the grid internally and want to display the updates using smartSubmit.
Roshan
Hi,
In fact, orderBookGridViewId is actually returning the grid id in the backing bean by "getClientId()" method. So I assume the id returned is correct.
I can see that you are using '#{orderBook.orderBookGridViewId}' in the smartSubmit() script. Is the orderBookGridViewId is returning actual client id of the Grid? If you are not sure, view the html code of page and findout the grid id. (if you grid is next child of the form container then it should be 'your_formId:orderBookGridViewId').
Please it in your fourth parameter of the smartSubmit() and it should work.
Thank you
Thanks for your reply. I have used html button instead, and it's fine now that the page does not refresh and the backend processes my request on clicking the button. But the grid is not updated after fnishing the request. Did I make something wrong ?
<ig:link id="refreshLink" binding="#{orderBook.refreshLink}" value="refresh" style="visibility:hidden; display:none" /><input type="button" value="Refresh" id="refreshButton" onclick="BLOCKED SCRIPTig.smartSubmit('myTradingPlatform:myAcctInfoTab:refreshLink', null, null, '#{orderBook.orderBookGridViewId}', null);" /><ig:gridView binding="#{orderBook.orderBookGridView}" dataSource="#{orderBook.orderStatus.orderStatusDAO}" pageSize="20" movableColumns="false" id="orderBookGridView">....
public OrderStatusBean getOrderStatus(){ if (orderStatus == null){ orderStatus = new OrderStatusBean(); orderStatus.enquireOrderStatus(); } return orderStatus; } public void enquireOrderStatus(){ getOrderStatus().enquireOrderStatus(); orderBookGridView.dataBind(); }
Hello,
Whay you are using commandButton if you want to make a smartRefresh. You should use the html button to call smartSubmit() by using its onClick attribute.
Note that commandButton will cause a full post back by its design, if you are not canceling / blocking its submit manually. And if you cancel / block its submit behavior, you will not be able to use its action or actionListener to work.
So better option is to use html button instead of commandButton. Or if you can go throgh the hyperlink, it is best to use the ig:link.
With ig:link, you will be able to make smartRefresh with invoking the actionListener without a full form submit.