I have a product page with 20 or so products on it. When you click on a product link I would like to pass 2 parameters to the page it redirects to, an image src and a text attribute and then display these in divs.

ATM my code sets a title and img data attribute , redirects to the correct page with the attributes in the URL string but I'm not sure how to display this information properly.

How can I pass both a title and img attribute parameter to the lineup/index.html page and then display these 2 attributes? Also is there a better way of doing this than putting the attributes in the URL query string?

Product link

<a href="#" class="product" data-img="product1-img.jpg" data-title="Product1">More Information</a>

products.js

jQuery(document).ready(function($){
    $('.product').click(function(event) {
        var name;
        name = $(this).data('title');
        window.location = './lineup/index.html?title=' + name + 'img' + img;
    });
});

lineup/index.html

<div class="text_area">
    <div id="title-area">TITLE ATTRIBUTE</div>
    <div class="product-img">
      IMG SRC
    </div>
</div>

If anyone needs more code just shout, I am using just plain HTML, javascript and jQuery.

I have a product page with 20 or so products on it. When you click on a product link I would like to pass 2 parameters to the page it redirects to, an image src and a text attribute and then display these in divs.

ATM my code sets a title and img data attribute , redirects to the correct page with the attributes in the URL string but I'm not sure how to display this information properly.

How can I pass both a title and img attribute parameter to the lineup/index.html page and then display these 2 attributes? Also is there a better way of doing this than putting the attributes in the URL query string?

Product link

<a href="#" class="product" data-img="product1-img.jpg" data-title="Product1">More Information</a>

products.js

jQuery(document).ready(function($){
    $('.product').click(function(event) {
        var name;
        name = $(this).data('title');
        window.location = './lineup/index.html?title=' + name + 'img' + img;
    });
});

lineup/index.html

<div class="text_area">
    <div id="title-area">TITLE ATTRIBUTE</div>
    <div class="product-img">
      IMG SRC
    </div>
</div>

If anyone needs more code just shout, I am using just plain HTML, javascript and jQuery.

• javascript
• jquery
• html
• parameters

2 Answers 2

To pass both parameters, you may try this

jQuery(document).ready(function($){
    $('.product').click(function(event) {
        event.preventDefault();
        var name = $(this).data('title'), img = $(this).data('img')
        window.location = './lineup/index.html?title=' + name + '&img=' + img;
    });
});

To parse a value by key from url you can use this function (Source : MDN)

function loadPageVar (sVar) {
    return decodeURI(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + encodeURI(sVar).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1"));
}

In your lineup/index.html put this code and the function given above

$(function(){
    $('#title-area').text(loadPageVar('title'));
    $('.product-img').text(loadPageVar('img')); // will set text

    // To set an image with the src
    $('.product-img').append($('<img/>', {
        'src':loadPageVar('img')
    }));
});

If you're looking for an alternative to URL query strings I'd look into window.sessionStorage object.

Store parameters like so:

$('.product').click(function(event) {
    event.preventDefault();
    window.sessionStorage.setItem('name', $(this).data('title'));
    window.sessionStorage.setItem('imgSrc', $(this).data('img'));
    window.location.reload(); //refreshes the page
});

Then to load the attributes, should they exist, add the following:

$(function(){
    if (window.sessionStorage.length){
        $('#title-area').text(window.sessionStorage.getItem('title'));

        $('.product-img').append($('<img/>', {
            'src':window.sessionStorage.getItem('imgSrc')
        }));
    }

    //include the click event listener for .product link here too
});