How to pass the values to the other html page and redirect the to that page for onclick thumbnail using jquery?

Question

Here I need to click on a thumbnail, so that it will show the details on other page, it should show the details of that particular thumb only. I used xml file here to fetch the data and display thumbnail. I am unable to pass the values to other page and open it at the same time onclick event. pls help

<div class="container-page">

            <div class="row" id="portfolio">
                <div class="col-md-2">
                    <nav>
                        <ul class="nav nav-pills nav-stacked" id="test">
                            <li role="presentation" class="active"><a href="#portfolio" id="services">Services</a></li>
                            <li role="presentation"><a href="#portfolio" id="desktop">Desktop</a></li>
                            <li role="presentation"><a href="#portfolio" id="web">Web</a></li>
                            <li role="presentation"><a href="#portfolio" id="mobile">Mobile</a></li>
                            <li role="presentation"><a href="#portfolio" id="design">Design</a></li>
                        </ul>   
                    </nav>
                </div>
                <div class="col-md-10">
                    <div class="row" id="thumb">

                    </div>
                </div>
            </div>
        </div>
<!-- js -->
$.ajax({
            type:"GET",
            url:"portfolio.xml",
            dataType:"xml",
            success:function(xml)
            {

                $(xml).find('thumbnail').each(function()
                {
                    var $thumbnail=$(this);

                                            var type=$thumbnail.find('type').text();
                                            var descr=$thumbnail.find('description').text();
                                            var title=$thumbnail.attr('title');
                    var imageurl=$thumbnail.attr('imageurl');
                    var thum='<div class="col-xs-6 col-md-3"> </div>';
                                            thum=$(thum).appendTo("#thumb");
                    thum = $('<a href="#" class="thumbnail forHove"></a>').appendTo(thum);
                    var thumName = $('<div class="thumTitle"></div>').appendTo(thum);
                    $('<h2>'+title+'</h2>').appendTo(thumName);
                    $('<p>'+type+'</p>').appendTo(thumName)
                    thum = $('<img src="'+imageurl+'" alt="image" class="thumbImgSize imgSlide">').appendTo(thum);
                    $(".forHove").mouseup(function()
                    {
     //here is the redirection code, and want to pass $thumbnail to  testxml.html page
window.location="http://www.bookmane.in/skillworks/testxml.html";
                $(thum).appendTo(".s");
        });
                });
            }

        });

score 0 · Answer 1 · answered Dec 18 '15 at 09:51

Well, one of the alternative is using Web Storage API. Just store img html and use it.

// use 'click' instead of 'mouseup'
$(".forHove").click(function()
{
  // store image html to sessionStorage
  window.sessionStorage.image_data = $thumbnail.clone().wrapAll("<div>").parent().html();
  
  window.location="http://www.bookmane.in/skillworks/testxml.html";
  $(thum).appendTo(".s");
});


// in http://www.bookmane.in/skillworks/testxml.html
// You have data sotred and insert it somewhere
$(document.body).append(window.sessionStorage.image_data);

score 0 · Answer 2 · edited May 23 '17 at 12:15

You can achieve this thing using the following steps:

Add a form tag like

<form action="YOUR_PATH" method="GET">
    <a class="thubnailClick" href="#" >
        <html_of_your_thumbnail>
        <input type="text" name="NAME_OF_PARAMETER" />
  </a>
</form>

Now override the click event of <a> tag with

$(document).ready(function() {
    $(".thubnailClick").on('click', function(event) {
        // to override the default behavior of <a> tag. 
        preventDefault();          
        // Find the form element using closest() of jQuery.
        // Call submit event of that form using $(form_element).submit();
    });
})

Now on the other page you can get parameter from URL using location.search or follow:
Getting Query params using JavaScript
Now use these Params according to your needs.

How to pass the values to the other html page and redirect the to that page for onclick thumbnail using jquery?

2 Answers2