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 ?
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.
Thank you
Roshan
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(); }
Hi,
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.
Cool. Thanks for participating in the forum. :)
It works fine now. Thanks you all.
Hi:
You should call dataBind after you've updated the server-side data source. The binding will ensure that the new data is sent to the browser for dispay. So it sounds like you do have it in the right place - is it working? :)
Best,Jim
Hi Jim,
I think I have put the dataBind() method in a wrong position. I now create a actionListener for the <ig:Link> component and call dataBind() method in that listener method. It can refresh the gird now. But Is it a proper way of doing so ? As I am not sure where should the dataBind() method be placed.
Kennanwu:
Make sure that you call the dataBind() method on your grid to refresh its data.