How to save a link html and transfer it to another page to use later?

Question

I am doing a school website project and I hit a rock with a thing that I want to do.

I have a search page that uses Google Places API and searches for nearby places and displays them on the page. The name of every place (restaurant) is a paragraph tag within a link tag that leads to another page that I want to populate with information from the previews page. How can I save whatever the user has clicked in a variable, for example the Restaurant name and use this variable in another page to populate a placeholder "The Restaurant" there.

This is the jQuery code of the search page that populates the search page with results:

for(var i = 0;i<Object.keys(jsondata.results).length;i++){
        if(jsondata.results[i].name !== undefined){
            if(jsondata.results[i].photos !== undefined){
                photoRef = jsondata.results[i].photos[0].photo_reference;
                //alert(photoRef);
            }
            //alert(searchedResultsPhotos);
            $(".col-md-7").append("<div><img class=col-md-3 alt=restaunrant_image src="+searchedResultsPhotos+"/>"
                +"<a href=RestaurantTemplate.html><p class=restaurant_name col-md-7>"+jsondata.results[i].name+"</p></a></div");
        }

    }
    $(".col-md-7 div").addClass("row");

Here are some screenshots of the site.

Search page:

search page

Restaurant details:

Restaurant details

score 1 · Answer 1 · edited May 23 '17 at 11:58

Send the name or value you want to display as a QueryString parameter, and read the parameter on the new page.

A QueryString is the '?key=value&key2=value' you see in a URL after the path. If you are simply reading this in via JavaScript on the new page, you can use the "location" object to get the parameters.

var query = location.search;

If you have a server-side language being used, you can typically read a "Query" parameter from a "Request" parameter.

for (var i = 0; i < Object.keys(jsondata.results).length; i++) {
    if (jsondata.results[i].name !== undefined) {
        if (jsondata.results[i].photos !== undefined) {
            photoRef = jsondata.results[i].photos[0].photo_reference;
            //alert(photoRef);
        }
        //alert(searchedResultsPhotos);
        var name = jsondata.results[i].name;
        $(".col-md-7").append("<div><img class=col-md-3 alt=restaunrant_image src=" + searchedResultsPhotos + "/>"
            + "<a href=RestaurantTemplate.html?name=" + name + "><p class=restaurant_name col-md-7>" + name + "</p></a></div");
    }

}
$(".col-md-7 div").addClass("row");

There is a good function on this post How can I get query string values in JavaScript? for reading QueryString values using JavaScript.

Additionally, if you use this approach, you can add multiple values you might want to read. If you want more than just a name, like a location, or address, or something else, you can pass that along in the QueryString. That's what it's there for.

Any time. Both answers suggested are quite valid, and the other one is definitely more direct and simplified. This approach is more useful for sending more information or more complicated data. — Daved, Apr 28 '15 at 15:36
Yes, I noticed that your example is a bit more complicated, but I may have to stick with it, because when I am passing my the name of the restaurant by the url it does not passes the full name. For example, if the name of the restaurant is "Fox Hotel" it will pass only "Fox". — Georgi Koemdzhiev, Apr 28 '15 at 15:44
That's because of the " " character breaking it up. See the edit on Ted's answer. The parameter(hash) has to be URL encoded so " " = "%20" — Daved, Apr 28 '15 at 15:47

Ted · Accepted Answer · 2015-04-28T15:50:45.990

1

Use this line where you create your anchor element:

'<a href="RestaurantTemplate.html#'+encodeURIComponent(jsondata.results[i].name)+'"><p class="restaurant_name col-md-7">'+jsondata.results[i].name+'</p></a></div>'

For example, if the restaurant name was Hooters, the page url in the browser (when the RestaurantTemplate page is loaded) would be something like http://www.yourdomain.com/RestaurantTemplate.html#Hooters

Then on the RestaurantTemplate page, you can use this line of javascript to retrieve the name:

var name = decodeURIComponent(window.location.hash.substr(1));

That pulls the 'Hooters' part off the example URL

edited Apr 28 '15 at 15:50

answered Apr 28 '15 at 15:20

Ted

14,757
2
41
58

Thanks, that will solve my problem! Plus it is simple enough to understand it :P Thanks ! :) – Georgi Koemdzhiev Apr 28 '15 at 15:31
Hi Ted, just one question. When I am using the anchor that you suggested above, I noticed that it passes not the full name of the restaurant, like until a space for example if the restaurant name is "Rox Hotel" it passes only "Rox" in the URL. Any idea why ? :) BTW you can try the site here: http://www.koemdzhiev.byethost18.com/search.html but you will have to enable CORS :/ – Georgi Koemdzhiev Apr 28 '15 at 15:41
1

@GeorgiKoemdzhiev -- answer updated. I wrapped the hash name in encodeURIComponent(...). that fixes that issue for you (and others that can pop up with ampersands and such) – Ted Apr 28 '15 at 15:46
Thanks Ted, I am new to using APIs and dealing with this sort of stuff and I really appreciate the help :) – Georgi Koemdzhiev Apr 28 '15 at 15:47
1

I like the use of the "Hooters" name in there. Good wings. ^_^ And nice answer and approach to this problem. – Daved Apr 28 '15 at 15:48
1

No problem. Good luck with the project. :) – Ted Apr 28 '15 at 15:48
@Daved lol thanks. I usually have them on the brain. The wings, that is. :D – Ted Apr 28 '15 at 15:49

How to save a link html and transfer it to another page to use later?

2 Answers2