how to navigate to different pages from a menu in browser

Question

I have a web page which has a navigation menu that goes to different pages. the menu i have would be like this :

Page 1 
Page 2
Page 3 
Page 4

Now i am following a sequence that i have to go from page 1 to page 2 then to page 3 and so on. (NOTE : here this sequence that i am following is not from the navigation menu but from the submit button in the respective pages for example Page 1 sumbit button would go to Page 2)

What i want is when the page is loaded the Navigation menu should have only Page 1 like this :

Page 1

then when i submit and go to Page 2 the navigation menu should have :

Page 1
Page 2

And i can freely navigate to Page 1 and Page 2 from the navigation menu (I am using this method to avoid using back button) then when i submit from Page 2 to Page 3 the navigation Menu should have :

Page 1
Page 2
Page 3

And i can freely navigate to Page 1, Page 2 and Page 3 and it continues like this for all the other pages.

For this i am currently creating a session variable and using that variable i am navigating this way but I need a better way of doing this operation. What i am currently doing is this :

String pagecompare = session.getAttribute("pageValue").toString(); 
    if(pagecompare.equals("page0"))
    {
        String pagevalue="page1";
        session.setAttribute("pageValue", pagevalue);
    }

i am using it in every page the page value changes from 1-4 @ the end of the page and this is how i am displaying :

<a href="page1.html">Page 1</a>
  <%
  if(pagecompare.equals("page2"))
  {
  %>
  <a href="page2.html">Page 2</a>
  <%
  }
  if(pagecompare.equals("page3"))
  {
  %>
  <a href="page2.html">Page 2</a>
  <a href="page3.html">Page 3</a>
  <%
  }
  if(pagecompare.equals("page4"))
  {
  %>
  <a href="page2.html">Page 2</a>
  <a href="page3.html">Page 3</a>
  <a href="page4.html">Page 4</a>
  <%
  }
  %>

Can you please help me with finding a way to solve this problem. I do not mind if the solution be jquery.

*" i need to have as many session variable as there are pages"* - Wouldn't you just need one session variable, `currentMaxPage` or similar? — nnnnnn, Aug 26 '16 at 06:27
accordingly to MVC design pattern (where you just use the View to display data and you dont include any business logic), I suggest you to use 4 different pages, each one with a different menu which meets your requirements — leccionesonline, Aug 26 '16 at 06:37
@leccionesonline - But Page 1 sometimes needs to allow no navigation, sometimes allow navigation only to Page 2, sometimes to Page 2 & 3, and sometimes to Pages 2-4. Are you suggesting four different copies of Page 1? — nnnnnn, Aug 26 '16 at 06:43
no just that i need to hide the navigation of the 2-4 in page 1 until submit. — Sushin K.Kumar, Aug 26 '16 at 10:19
i corrected my question. now its proper can you help me with this. — Sushin K.Kumar, Aug 26 '16 at 10:28
I think what you are looking for is a breadcrumb navigation right? https://www.npmjs.com/package/express-breadcrumbs This might help you — noa-dev, Aug 26 '16 at 10:30

score 0 · Answer 1 · edited May 23 '17 at 10:33

0

Here is the complete answer of your question. See this https://stackoverflow.com/a/2616545/1872647 You Just need to push page name in session array and and check on page load.

edited May 23 '17 at 10:33

Community

1
1

answered Aug 26 '16 at 06:34

M Uzair Qadeer

482
1
8
19

sorry this wouldn't help me. Thanks anyway. I made a mistake in asking the question properly i apologize for that. I have updated my question if you have any other good solution, Please let me know. Thanks – Sushin K.Kumar Aug 26 '16 at 10:29
You have not mentioned your backend language? I send you above link for php. – M Uzair Qadeer Aug 27 '16 at 12:20

score 0 · Accepted Answer · answered Sep 06 '16 at 11:23

<div id="menu"></div>

<script type="text/javascript">
$( document ).ready( function () {

var pageCompare=${sessionScope[pageValue]};

if(pageCompare=="page2"){
$("#menu").html("<a href='page2.html'>Page 2</a>");
}else if(pageCompare=="page3"){
$("#menu").html("<a href='page2.html'>Page 2</a><br/><a href='page3.html'>Page 3</a>");
}
...


});
</script>

how to navigate to different pages from a menu in browser

2 Answers2