Store object value based on another object key/value

Question

I have a website that reads like a book, first page to the next to the next to the previous page. Think of this as a forward and back page flip in a book. Its not the previous page in the browser, its within the pages themselves. Like you are changing pages in a book

I am trying to dynamically assign the links for a previous and next page buttons. Currently the pages are located in an Object with pageNum and fileName as keys

I am trying to set the previous link based on the the page number of the of the current page link. See example and code below.

var toc = [
    {"pageNum": "1", "fileName": "index.html"},
    {"pageNum": "2", "fileName": "about.html"},
    {"pageNum": "3", "fileName": "work.html"},
    {"pageNum": "4", "fileName": "blog.html"},
    {"pageNum": "5", "fileName": "contact.html"},
  ];
  
var url = window.location.pathname;
var currentPage = url.substring(url.lastIndexOf('/')+1);
  
var prevPageNum;
var prevPage;
  
//Based on currentPage, find object entry in toc and apply related pageNum
toc.filter(function(toc){
  if(toc.fileName == currentPage) {
    $('#currentPageNumber').append(toc.pageNum);
  }
});
  
  /******* Last and Next Page Assignment *******/

toc.filter(function(toc){
  if(toc.fileName == currentPage) {
    prevPageNum = toc.pageNum-1;
    prevPage = toc.fileName;
  
    $('#prevPage').append(prevPage);
    //final code
    //$('#prevPage').attr("href",prevPage);
  }
});

<a href="#" id="prevPage">Previous Page</a>
<a href="#" id="nextPage">Next Page</a>

EXAMPLE:

currentPage is about.html prevPage needs to be index.html

You might want to create another JS object to control the current page number and file name. That would make tracking page changes easier for you. Then you could add an onclick to your A tags that switches everything. — Richard Barker, Jan 29 '16 at 18:20
I think your problem is related to how you set the content of the current page and the way you set the next page and previous page links. when it comes to setting the control buttons (prev,next) you need to completely overwrite their values with the correct ones instead of appending. You should also remove any calls to the current url as that doesn't matter in this case: you're not changing the page itself just the content that the user sees. Use Ajax to pull back the content from the server or look into pulling in a file via javascript. — Richard Barker, Feb 01 '16 at 15:22
Also, you really should be using an onClick event for your links in this case because you're not really changing pages instead of href to control the content changing. — Richard Barker, Feb 01 '16 at 15:23

score 0 · Answer 1 · answered Jan 29 '16 at 16:51

0

How about just navigating to the new url in a click handler:

$('#prevPage').click(function() {
    window.location.href = prevPage;
});

answered Jan 29 '16 at 16:51

Schlaus

18,144
10
36
64

Ill modify the entry above with this response as well. Think of this as a forward and back page flip in a book. Its not the previous page in the browser, its within the pages themselves. Like you are changing pages in a book – Alan Jan 29 '16 at 16:57
Because that changes the browser's location and therefore unloads everything in the browser when the new page is loaded. Besides the user can tell that the page was changed which seems to be against the OP's needs. – Richard Barker Jan 29 '16 at 18:17
@RichardBarker I agree that that seems to be the case as the question now stands. There was no mention of SPA-like behavior in the original text. – Schlaus Jan 29 '16 at 19:43

score 0 · Answer 2 · answered Jan 29 '16 at 18:03

0

To me it looks like you want to create a single page web application, and there are plenty of frameworks for that are really worth using.

To answer actual question, maybe you can load all elements in one page, and hide-unhide them.

$( document ).ready(function(){
 $(".content").css("display","none");
 var currentPage = 1;
        $("#block" + currentPage).css("display","block");
 $("#prev").click(function(){
  $(".content").css("display","none");
  currentPage--;
        if(currentPage == 0) currentPage = 2;
  $("#block" + currentPage).css("display","block");
 });
 $("#next").click(function(){
  $(".content").css("display","none");
  currentPage++;
        if(currentPage == 3) currentPage = 1;
  $("#block" + currentPage).css("display","block");
 });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href = "#" id = "prev"> Previus</a>
<a href = "#" id = "next"> Next</a>
<div id = "block1" class = "content">
This is home page
</div>
<div id = "block2" class = "content">
This is about page
</div>

answered Jan 29 '16 at 18:03

Andrej

384
1
6
23

depending on the number of pages in the OP's 'book', loading them all at page load is not feasible. – Richard Barker Jan 29 '16 at 18:16
@Richard that's why I recommended using framework, but I'd say that all depends of the content of those pages, and 5 pages are not too much. – Andrej Jan 29 '16 at 18:22
100+ pages. heavy pages including dynamic graphs and charts. SinglePage website design is not the way with this – Alan Jan 29 '16 at 19:02
@alan if that's the case, still you need a single-page, with dynamicaly-changing content. You need to use [ajax](http://www.w3schools.com/ajax/) for that, and maybe build API on the server side. – Andrej Jan 29 '16 at 19:17
@Andrej ultimately i just need an easy way to call index.html when the user is on the about.html page. i dont know how to do this and none of the answer above are working. i need to be able to store the value of a key based on another value/key combo – Alan Jan 29 '16 at 22:02
I agree with you all the way except that thought process hinders change management and will make it hard to add or remove pages in the future. It also requires you to either maintain the framework yourself if its not being updated, or manage updates as they come out. – Richard Barker Feb 01 '16 at 15:16

Store object value based on another object key/value

2 Answers2