jQuery to read specific values depending on the page shown

Question

I have 3 identical HTML pages, same divs and names. On every of these pages I change the content of the divs with jQuery by reading specific values from text files. Unfortunately I have 3 completely identical jQuery files with the only difference that they read from a different text file. What I would like to do is to have one single jQuery file and only one text file. But the problem is that the jQuery would always access the same files on every page.

HTML 1:

<div class="number"><p><span id="number1"></span> </p></div>
<div class="number"><p><span id="number2"></span> </p></div>
<div class="number"><p><span id="number3"></span> </p></div>
<div class="mean"><span id="mean1"></span></div>
<div class="mean"><span id="mean2"></span></div>
<div class="mean"><span id="mean3"></span></div>

HTML 2:

<div class="number"><p><span id="number1"></span> </p></div>
<div class="number"><p><span id="number2"></span> </p></div>
<div class="number"><p><span id="number3"></span> </p></div>
<div class="mean"><span id="mean1"></span></div>
<div class="mean"><span id="mean2"></span></div>
<div class="mean"><span id="mean3"></span></div>

HTML 3:

<div class="number"><p><span id="number1"></span> </p></div>
<div class="number"><p><span id="number2"></span> </p></div>
<div class="number"><p><span id="number3"></span> </p></div>
<div class="mean"><span id="mean1"></span></div>
<div class="mean"><span id="mean2"></span></div>
<div class="mean"><span id="mean3"></span></div>

All three pages completely the same, so the same jQuery can be applies=d.

jQuery:

 $('#number1,#number2,#number3').text(function(i){
     return table[i][2];
    });

 $('#mean1,#mean2,#mean3').text(function(i){
     return table[i][3];
    });

The text file:

1;1;20;3.6;0%;70%;25%;0%;5%;
1;2;80;4;45%;20%;20%;15%;0%;
1;3;80;4;40%;35%;5%;20%;0%;
2;1;20;3.6;0%;70%;25%;0%;5%;
2;2;80;4;45%;20%;20%;15%;0%;
2;3;80;4;40%;35%;5%;20%;0%;
3;1;20;3.6;0%;70%;25%;0%;5%;
3;2;80;4;45%;20%;20%;15%;0%;
3;3;80;4;40%;35%;5%;20%;0%;

So, for example I would like the first HTML page to read from the first three rows, the second from the next three rows. I don't know how to do some delimiter in the text file, or after the first three rows have been used to be deleted. Just don't know how to accomplish it.

You could also perform logic based on the filename, using document.location.href. Read more here: https://stackoverflow.com/questions/13317276/jquery-to-get-the-name-of-the-current-html-file — Michael Beeson, May 20 '18 at 14:56

score 0 · Answer 1 · edited May 20 '18 at 14:57

Wrap the Javascript code in a function and include the code in each html file. Call the function with the current page number in each html file

function setText(page){
  page = page - 1;
  $('#number1,#number2,#number3').text(function(i){
    return table[(page*3)+i][2];
  });
  $('#mean1,#mean2,#mean3').text(function(i){
    return table[(page*3)+i][3];
  });
}

//on page 1 line 1-3 is used
setText(1);
//on page 2 line 4-6 is used
setText(2);
//on page 3 line 7-9 is used
setText(3);

In my opinion it's not possible with just one HTML and JavaScript file, because you need to somehow identify on which page you currently are. And deleting rows does not sound like a good idea, because then you are losing data.

jQuery to read specific values depending on the page shown

1 Answers1