How i can redirect to another page and call an event of this new page at the same time?
Question
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.
4 answers
solution1
1 2021-01-18 08:38:48
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";
});
solution2
1 ACCPTED 2021-01-18 12:39:45
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);
});
});
solution3
0 2021-01-18 08:21:08
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.
solution4
0 2021-01-18 08:27:49
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.