Url for specific action in a page

Question

I have page flow like this

User lands on the landing page.
Then does some selection of some select boxes and then hits search.
Then use is taken to new page with all search criteria and displayed search results.
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 i.e. 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.

Why Java is not able to get the hashed tag? When the request will hit you with URL you should be able to get all parts of the URL. What is the problem there? — avck, Apr 27 '16 at 02:45
@avck - i am not java developer. Can you guide me how to pull out hash details in java? — Hacker, Apr 27 '16 at 03:09
@avck - Yes using jsp. But will that method give hash paramater also? — Hacker, Apr 27 '16 at 04:40
It should return everything after the path then you will have to parse and find value for ID. But what do these ID represent is important question. Are they HTML div ID ? — avck, Apr 27 '16 at 05:00
Nope they are not html div id. But i read in some posts that hash tag is not passed on to server.. — Hacker, Apr 27 '16 at 05:13
Why not try and see? It should be passed to server. Then what do they represent the IDs? — avck, Apr 27 '16 at 05:13
while i have not used jsp in particular but you should be able to get it. You can make the #id as /id=1001 and get it there again as URL parameter. however it is important that the your server is able to return the resource after retrieving the id's value — avck, Apr 27 '16 at 09:18

anu · Answer 1 · 2016-04-27T02:14:27.967

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 i.e 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.

score 0 · Answer 2 · answered Apr 27 '16 at 02:40

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.

Url for specific action in a page

2 Answers2