-1

I am a beginner in programming and also I am new to this community, I hope you can help me with my question. I want to know how to redirect from page 1 to page 2 and, after that, immediately call an event of this page 2.

This is the code from page 1:

<!DOCTYPE HTML>
<html>

<head>
  <title>Page1</title>

  <script type="text/javascript">

    /*it doesn't work (i dont know why)*/
    $(document).ready(function recargar2() {

      $("#chiclayo_p").trigger("onclick");
    });

    /*it doesn't work (i dont know why)*/
    $(document).ready(function recargar3() {

      $("#trujillo_p").trigger("onclick");
    });
  </script>

</head>

<body>

  <a href="page2.html#options">Option 1</a>
  <br>
  <a href="page2.html#options" onclick="recargar2();">Option 2</a>
  <br>
  <a href="page2.html#options" onclick="recargar3();">Option 3</a>

</body>

</html>

This is the code from page 2:

<!DOCTYPE html>
<html>

<head>
  <title>Page2</title>

  <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js">
  </script>

  <script>
    $(function () {
      $('.filter').click(function () {

        $(this).addClass('active').siblings().removeClass('active')

        let valor = $(this).attr('data-nombre');

        if (valor == 'lima') {
          $('.lima').show('1000');
          $('.contenedor').not('.' + valor).hide('1000');
          $('.contenedor').filter('.' + valor).show('1000');

        } else {
          $('.contenedor').not('.' + valor).hide('1000');
          $('.contenedor').filter('.' + valor).show('1000');
        }
      });

    });
  </script>

  
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }


    body {
      font-family: 'open sans';
      background: #fff;
    }

    .botones li {
      display: inline-block;
      text-align: center;
      margin-left: 20px;
      margin-bottom: 20px;
      padding: 6px 12px;
      border: 1px solid blue;
      list-style: none;
      color: blue;
    }

    .botones li:hover {
      background: yellow;
      color: red;
      cursor: pointer;
    }

    .botones .active {
      background: rgb(158, 218, 158);
    }

    .galeria {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      overflow: hidden;
    }
  </style>

</head>

<body>

  <div class="botones">
    <ul>
      <li class="filter active" data-nombre='lima' id="lima_p">Lima</li>
      <li class="filter" data-nombre='chiclayo' id="chiclayo_p">Chiclayo</li>
      <li class="filter" data-nombre='trujillo' id="trujillo_p">Trujillo</li>
    </ul>
  </div>

  <div>
    <div class="galeria" id="options">


      <div class="contenedor lima">
        <h1> This is the option 1 - Lima!!!</h1>
      </div>

      <div class="contenedor chiclayo" style="display: none">
        <h1> This is the option 2 - Chiclayo!!!</h1>
      </div>

      <div class="contenedor trujillo" style="display: none">
        <h1> This is the option 3 - Trujillo!!!</h1>
      </div>


    </div>

  </div>

</body>

</html>

What I can't find how to solve is that when I click on option 2 on page 1, in addition to opening page 2, it should show me the selected option "Chiclayo" and the self content of this option; I would like the same thing to happen when clicking on option 3 on page 1, which should select the option "Trujillo" and show me its content. I have tried with the "onclick" event but I have not obtained results, I do not know if it is the correct way or there are better options; maybe with javascript or jquery code. I appreciate you could help me with my query.

Raul Franco
  • 1
  • 2
  • Have you tried the onload() function and applying that to your body? – D-Waqas Jan 18 '21 at 08:21
  • you cannot directly target elements on another page unless that page is already open and even then not the way you are trying. If the 2nd page is open you can communicate between the pages using `postMessage` - but the second page would need a`listener` established to respond to the messages received – Professor Abronsius Jan 18 '21 at 08:22
  • Your links should point to _different_ fragments here to begin with - `page2.html#options`, `page2.html#chiclayo`, `page2.html#trujillo` or similar. Then you can read the current hash value from the URL when that page loads, and trigger functionality based on it. – CBroe Jan 18 '21 at 08:33
  • @D-Waqas thank you so much...the function onload() is the right way... – Raul Franco Jan 19 '21 at 05:09

4 Answers4

2

First, as you called it on Page 2, you need to implement jQuery on Page 1.

Page 1 also needs to be called. For the jquery script codes that you write to work.

<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js">

for redirect;

$( "#other" ).click(function() {
  window.location = "/Page2.html#chiclayo_p";
});
Ahmet Sönmez
  • 96
  • 5
1

You can pass the option Id as query parameter in click function of a button like this on page 1

<a  onclick="recargar('lima_p');">Option 1</a>
  <br>
  <a  onclick="recargar('chiclayo_p');">Option 2</a>
  <br>
  <a onclick="recargar('trujillo_p');">Option 3</a>

then redirect the page 1 to page 2 to pass this value like this

function recargar(option) {
        window.location.href = "page2.html" + "#" + option;
    }

On page 2 you can fetch this query parameter and highlight the selected option and display related content, like this

// Add function body -- <body onload="onload()">
function onload() {
            var option = window.location.hash.substring(1);
            var element = $("#" + option);
            alert(element);
            highlightDiv(element);
        }

        function highlightDiv(option) {            
            $(option).addClass('active').siblings().removeClass('active')

            let valor = $(option).attr('data-nombre');

            if (valor == option) {
                $('.lima').show('1000');
                $('.contenedor').not('.' + valor).hide('1000');
                $('.contenedor').filter('.' + valor).show('1000');

            } else {
                $('.contenedor').not('.' + valor).hide('1000');
                $('.contenedor').filter('.' + valor).show('1000');
            }
        }

    $(function () {
      $('.filter').click(function () {
          highlightDiv(this);
      });

    });
meenakshi
  • 84
  • 2
  • Hi @meenakshi, thank you very much for your answer, but it still doesn't work; maybe there is something I am missing in your code ... – Raul Franco Jan 19 '21 at 04:12
  • thanks again, i used the function onload() and now that works...thank you very much for your answer... – Raul Franco Jan 19 '21 at 05:12
0

What you can do is pass the selected option as a query parameter and then redirect from page 1 to page 2. Then, on ready event of page 2, you can read the query parameter being passed and display your div accordingly.

Akshit Arora
  • 428
  • 3
  • 15
0

Basing on this question, you can do that by using either cookies or local storage, query parameter.

As Fizer Kahn said in his answer, the most recommended way is query parameter.

ExCluSiv3
  • 184
  • 2
  • 20