1

I have the following problem in an angular application: - first page is a search page, with a form and a search list. Search results are paginated, ia there's a button "show more" that displays the next 10 results - clicking on a result brings to the second page, with detailed information about the element (just a classic search behaviour).

Now my problem is the following: from the element page, clicking on the browser's BACK button brings the user to the search page, but the search is lost.

I implemented a cache, in order the form to be stored in a service - this way I can relaunch the search automatically. But in this case, the scrolling is lost and only the ten first results are displayed (pagination is lost).

This only solution I see is to add an entry in the history each time the "show more" button is clicked, but I will also have to save somewhere the scrolling level of the window. I find this solution quite complicated and annoying, not beautiful.

So question is: is there an common and easier way to do it?

I think this is a usual problem of ajax/angular application, in deezer when I select an album I have the same).

Rolintocour
  • 2,934
  • 4
  • 32
  • 63

1 Answers1

0

This should be managed via url params... The Application Router must be able to ask for a determinate application state. You need to manage client-side search results as you manage server-side search results.

An example could be: What happens if someone shares your search results via mail?

This is why everything regards the application state should be kept on the url: http://myapp.com/search?page=1&...

Structuring your app in this way the history.back btn of the browser does exactly what you are looking for.

Hitmands
  • 13,491
  • 4
  • 34
  • 69
  • Thanks for your feedback this is really usefull I started implementing such params. However do you have any idea why, with ajax application, we cannot use the browser cache? For example with JSF application when you go back in history, it doesn't any any new request it only uses local cache (cf http://stackoverflow.com/questions/15493276/browser-back-button-navigation) – Rolintocour Jul 26 '16 at 08:36
  • I don't know Java Server Faces, but it doesn't mean... Browser cache depends on Browsers, not servers or frameworks, and it is always used, many requests are skipped depending on the **HTTP ETag**... probably, your application isn't optimized to do that. If you open the developer tools, in the network panel, you can see how resources are loaded and their status codes: 304 usually means that the resources isn't modified and could be used the local version. Client-Caching should be optimized via HTML5 Application Cache and Service Workers. – Hitmands Jul 28 '16 at 14:58