Url for specific action in a page

Question

I have page flow like this

1. User lands on the landing page.
2. Then does some selection of some select boxes and then hits search.
3. Then use is taken to new page with all search criteria and displayed search results.
4. In this page we have left section to display all results and when user clicks on any result item we show the result details on right side.

All this was fine. But now client want a bookmarkable link for the open section ie when use clicks on the left div, right div should open and this should have proper url, so that it can be shared.

How can i achieve this, making urls for open divs? i tried #id=1002 everything worked, but when user copies the url and pastes, java is not able to get the hash tag.

Answer 1

Here is one of doing it. -- Codify and map URLs and then handle them within the javascript.

Let me explain.

Say for example, you have 2 divs -- div1 , div2

(1) Codify and create a mapping logic/convention ---

Map the states of divs to URLS --

div1 open div2 close --> URL = mysite.com/page/d1-open/d2-close

div1 open div2 open --> URL = mysite.com/page/d1-open/d2-open

div1 close div2 open --> URL = mysite.com/page/d1-close/d2-open

div1 close div2 close --> URL = mysite.com/page/d1-close/d2-close

and so on

(2) Handle the URL at Server --- Just make send the output of mysite.com/page , ignore the rest

(3) Handle the URL at Client ---

something like this

    function handleURL() {
    var myURL = window.location.href;   
    var urlArray = myURL.split("/");
    //examine the urlArray and decode the URL code after mysite.com/page/
    // and open or close your divs accordingly
    // eg: if the url-part after page/ is div1-open/div2-close 
    // i.e urlArray[2]=div1-open and urlArray[3]=div2-close 
    // you would know what to do accordingly...
    }

The example I explained you, is barely scalable. You will have to manually come up with 2^n mappings for each combination of n divs . However, if really want to make it scalable, you can automate the codification too.

You can assign each state of the page a unique id.

Eg: mysite.com/mypage/page-config-id=abcd1

Then you ask the server the for the div configuration ie which div is open which divs are closed etc as a JSON. And then you can use Javascript to parse the JSON and rearrange the page.

You can store the div config --> page-config-id key-value pair in a key-value database on the server in a database or file or noSQL or whatever.

Answer 2

You need URL to right divs content only.

You will have to come up with a uri router that links to the searched resource.

If your search resource is user profile then all user should be accessible via some uri like /user/:userid.

Suppose the search is for a person named z .Your left div will have all profiles with name z . Clicking on any result item will open that person in detail view, however the URL should be changed using location attribute to /user/z1.

Also you will need to check if the user that is searching for the resource has access level to view that content.