0

I'm working on something much bigger but I will resume to provide a more simple example to my problem.

Let's say I have two html pages. On 1st page I have three anchor tags which all links to the 2nd page.

<a href="nextpage.html"> You clicked Red </a>
<a href="nextpage.html"> You clicked Blue </a>
<a href="nextpage.html"> You clicked Yellow </a>

The 2nd page has only an empty paragraf.

When you click one of the three links on 1st page and get directed to the 2nd page, the 2nd page is supposed to contain the text of the respective clicked <a> tag.

I've write my javascript(Jquery) code like this in a .js file and included in the <head> of both pages :

$(document).ready(function() {

  $('a').click(myFunction);
});


function myFunction() {

  var text = $(this).text();  
  $("p").html(text);
}

The above code should work but sadly it doesn't. I run a test in console.log and the result I get when I click a link and get directed to 2nd is undefined. I don't know exactly why this happens since I included the javascript file on both pages and should comunicate with eachother.

Improve this question
3
  • 5
    Let me correct a misunderstanding you have: because you include a javascript file on two pages that does NOT mean they communicate with each other. Commented Apr 20, 2017 at 15:02
  • 3
    You might need to send your <a> text in a Get or Post variable so you can get it from within your other page. Commented Apr 20, 2017 at 15:05
  • 3
    no, this will not work, this is not a single page app but THREE DIFFERENT INSTANCES of the "same" app... unfortunately, just because you included the same JavaScript file in page1.html, page2.html, and page3.html, each of these html files get their "own instance" of the JavaScript "program" that's included in the somescript.js file... this is why it is undefined Commented Apr 20, 2017 at 15:06

5 Answers 5

Reset to default
2

Why you have undefined

this is a keyword in javascript that can refer to several things, depending on where and how it's called.

$(literally anything at all) is a jQuery wrapper around whatever is inside.

In your case, you have a jQuery wrapper around the this keyword. this refers to the function that it is inside of, i.e. myfunciton.

Once something is wrapped inside of the jquery wrapper, jquery adds a bunch of it's own functions, things like text(), html(), slideDown(), etc.

If whatever you passed into the jquery wrapper had a textnode, then the text() function would return the text of that node. But, you passed in myfunction, which does NOT have a text node.

So, $(myfunction).text() is undefined.

Answer

You'll have to pass the value you want on the next page as part of the request somehow. Someone suggested using the browser's localstorage. You can do that. Or you can pass a value as a url parameter.

If you visit www.example.com/?foo=bar then when you load that page you will have access to the foo variable which has the value bar.

Understanding this, you can then write a jquery function which add url parameters to your <a> tags, so that your markup will look like this instead:

<a href="nextpage.html?variable=myspecialvalue">Whatever</a>

Or, you can just change the href values manually in your template if that's not an exhaustive process.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

Your issue is because the second page does not know anything about the first page as far as the browser is concerned. If you want to pass the colour to the next page, you would need to provide this as a parameter to the next page (e.g. the querystring). For example

<a href="nextpage.html?col=red"> You clicked Red </a>
<a href="nextpage.html?col=blue"> You clicked Blue </a>
<a href="nextpage.html?col=yellow"> You clicked Yellow </a>

Then use something like the following to get the query string and show the colour (source of getParameterByName): https://stackoverflow.com/a/901144/3713362:

function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

var colour = getParameterByName("col")
$("p").text(colour);
Improve this answer

Comments

0

As everyone already stated, above code will not work. But If you are open to use localStorage, you can rewrite your code as 

function myFunction() {

  var text = $(this).text();  

  localStorage.setItem('linkText', text);

}

And on new page read data from localStorage localStorage.getItem('linkText');

Improve this answer

2 Comments

Sorry I forgot to mention but i'm looking for a solution which doesn't make use of localStorage.
sure, then you have to use query string to pass data.. as already explained in previous answers
0

It shouldn't work. The context in which you assigned the html of "p" is on first page, not the 2nd page.

You will need to pass the data(text that you want to show in the next page) via an html attribute. You can probably do this without a form submittal but there is an example of doing that here.

passing form data to another HTML page

You could style the form to be invisible if that is really not what you want, but the answer is you will need to pass the information as an attribute.

Improve this answer

Comments

0

You can pass the value of the anchor element through a query string like so:

$('a').on('click', function(){
    var param = $(this).text();
    window.location.href = 'nextpage.html?pVal=' + param;
});

Then, on the corresponding nextpage page:

$(document).ready(function(){
    var qString = window.location.href.slice(window.location.href.indexOf('=') + 1);
    $('p').text(qString);
});
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.