0

I am working on a site which has an animated background, the animation is powered by javascript and therefore when the user enters and submits a search it would be great if the animation were to continue smoothly whist the search was completed and results appended to the DOM.

I have managed to get to the point where the results of the search are returned to JS from an ajax request although inherently the url of the ajax request is different from the url currently displayed in browser.

So my goal is for the user to come onto the site at say, www.example.com/public/home/search

They type something into text input and press search, the url changes to something like

www.example.com/public/home/search?q=some+search+query or
www.example.com/public/home/search/somesearchquery or
www.example.com/public/home/search/#somesearchquery, etc.

but the page state remains the same, the results are appended to the DOM and no full reload occurs.

Returning to a url like the one above should load the page and send the query automatically, returning the page with the results already appended.

I don't know weather this is possible, with or without obeying the MVC pattern.

I am not using any mvc framework and would like to avoid it if I can but instead using a bare bones system similar to the one found at. https://www.youtube.com/watch?v=OsCTzGASImQ

Any ideas, suggestions, alternatives?

Edward J Brown
  • 333
  • 1
  • 5
  • 17
  • So, when the user clicks on the button "search", do you want to change the URL and make some changes on the page? – Hilder Vitor Lima Pereira Mar 31 '15 at 13:19
  • The hash (#) is never sent back to the server so /search/#somesearchquery = /search/ in theory if you need to query the hash you will need to do it at the front-end. You can achieve routing with a JS MVC like AngularJS or if you're comfortable with PHP have a look into SLIM Framework, it is easy to learn and very flexible to create routes / apis... – Raja Khoury Mar 31 '15 at 13:20
  • @VitorLima Yes that is correct. – Edward J Brown Mar 31 '15 at 13:51

1 Answers1

1

There are several answers here for "change URL without reload", for example: Modify the URL without reloading the page .

So, I think you just have to implement some solution from one of these answers and run some javascript that change the page.

You have to be careful, because the modified URL must to load the same version of the page the user is seeing after the changes caused by the javascript. Otherwise, if the user copy and paste the URL, he will not be happy.

One way to archive it is to create the javascript function that "updates" the page without reload it based on the text input (let's say, f). Then, if the user try to access directly the page

www.example.com/public/home/search?q=some+search+query

your server side code just return the page search with a call to this javascript function at the end, like that:

f("some search query")

so, this function will update the page and the final effect will be the same as the user just enter in the page and after tries to type some search query.

(Note that, this function f may be used in both cases: when users type the text to search and when users just paste the entirely URL).

Community
  • 1
  • 1
Hilder Vitor Lima Pereira
  • 1,648
  • 13
  • 20