ericPetersGoogle ericPetersGoogle - 2 months ago 22
HTML Question

WebRocketX Stale Views When Using Back Button

We have just started a new project using WebRocketX talking to a PHP backend and are wondering how we should avoid stale views when using the browser back button. The use case we are working on is as follows:

1) We have a search screen that submits a WebAPI call to the server to get a results list.

webapi call

var webapi = new Webapi();

2) The results screen comes in injected as our main view to replace the search screen targeted on the same div. Typically result list is 30 to 50 lines.

capsule attributes

<div id="customerList" class="metaCapsule" capsuleType="inline" targetId="mainPanel" windowTitle="Customer List">

3) Then we click on one of the rows in the search result and have the details for that search result also targeted on the same div.

var webapi = new Webapi();
var asyncParametersList = new AsyncParametersList();

capsule attributes

<div id="customerDetails" class="metaCapsule" capsuleType="inline" targetId="mainPanel" windowTitle="Customer">

4) We edit the details, persist to the DB also using a standard async form submission call, like above.

5) Now we use the browser back button to go back to the search result and see the search results again, but the modification, which is one of the columns in the summary, we just made is not there. It hasn't updated, which makes sense because the search results came straight out of the DOM stack, no trip to the server. What I am wondering is what is the best/easiest way to have this page consist of updated data from the DB when we return to it?

Thanks in advance.



You can use the reloadPage attribute in the capsule for this. It will cause the request that was used to retrieve this page to be resent to the server any time you return to that page. You won't need to write any code other than to put that attribute in the capsule that the customer list was returned in. Like so

<div id="customerList" reloadPage="true" class="metaCapsule" capsuleType="inline" targetId="mainPanel" windowTitle="Customer List">