A div on click redirect to another HTML page and call a javascript to show a particular div

15,591

Solution 1

You could try something like this:

Add this to FIRST.html

$(document).ready(function() {
    $('div').click(function () {
       id = $(this).attr('id').substring(1);
       window.location = 'SECOND.html?id=' + id;
    });

    var getVar = location.search.replace('?', '').split('=');
    $('div[id$=' + getVar[1] + ']')[0].scrollIntoView();
});

Add this to SECOND.html

$(document).ready(function() {
    $('div').click(function () {
       id = $(this).attr('id').substring(1);
       window.location = 'FIRST.html?id=' + id;
    });

    var getVar = location.search.replace('?', '').split('=');
    $('div[id$=' + getVar[1] + ']')[0].scrollIntoView();
});

Solution 2

    //FIRST.html
    $("#A10").click(function () {
        document.location.href = "SECOND.html?id=B10";
    })

    //SECOND.html

    $(function () {
        //Prepare the parameters
        var q = document.location.search;
        var qp = q.replace("?", "").split("&");
        var params = {};
        $(qp).each(function (i, kv) {
            var p = kv.split("=");
            params[p[0]] = p[1];
        });
        var idToOpen = params["id"]

        $("#" + idToOpen).show();
    })

    //You can add some other parameters
    document.location.href = "SECOND.html?id=B10&message=SomeMessage";

    //Get it like this

    $(function () {
        //Prepare the parameters
        var q = document.location.search;
        var qp = q.replace("?", "").split("&");
        var params = {};
        $(qp).each(function (i, kv) {
            var p = kv.split("=");
            params[p[0]] = p[1];
        });


        var idToOpen = params["id"]
        var message = params["message"]
        $("#" + idToOpen).show();
        alert("message")
    })

Solution 3

in FIRST.html put this code

$('div').click(function() {
var someId = $(this).attr("id");
window.open('SECOND.html/#'+someId);
  });

Or you can use your full URL path instead SECOND.html/#. Its just an idea, not tested, but you can try it. P.S. Those are two different pages, so you can put same ID's on both to try this example. It's not pure JavaScript but Jquery.

Share:
15,591
LINGS
Author by

LINGS

Coming Soon

Updated on June 04, 2022

Comments

  • LINGS
    LINGS over 1 year

    I have two html files namely FIRST.html and SECOND.html

    FIRST.html has DIVs with IDs A1 to A100, SECOND.html has DIVs with IDs B1 to B100

    On clicking a particular DIV in FIRST.html, I want to redirect the user to SECOND.html and show the corresponding DIV.

    For example, if a user clicks DIV id=A10 in FIRST.html, he should be redirected to SECOND.html and be shown the DIV id=B10.

    I need thoughts on how this could be done, I would like to know if we could pass some parameters from one page to another and then call a javascript using those parameters.

    Thank you!

    • ama2
      ama2 over 11 years
      you could store the number in localStorage or sessionStorage using javascript and then look for it in the second page and ....
    • Fredrik Sundmyhr
      Fredrik Sundmyhr over 11 years
      Do you want that the page should be scrolled down to the div? And are you going to use jQuery?
    • LINGS
      LINGS over 11 years
      @ama2 - thank you for your comment, i have no idea about it, should look into it.
    • LINGS
      LINGS over 11 years
      @FredrikSundmyhr - yes! i need to scroll down to the div in the new page, i have the javascripts to reach to that location. It is all about passing the ID number to the next page
    • ama2
      ama2 over 11 years
      this could help you with storage: developer.mozilla.org/en/DOM/Storage , if you need IE 7,8 support you might want to include code.google.com/p/sessionstorage
    • Fredrik Sundmyhr
      Fredrik Sundmyhr over 11 years
      You could also send the number/id as a get variable and get it using javascript.