I got 2 pages: index.html and contact.html and each of them have a button (a tag for index page). When I click a button on the contact page, it should redirect to the index page and auto click on the index page. Is this possible?
Here my index page:
<div id = "wrapper">
<a id="btn-show-content" href="#"></a>
</div>
Here's my contact page:
<div id = "contact-wrapper">
<button id="btn-back"></button>
</div>
you can add query to button in contact page
<div id = "contact-wrapper">
</div>
Then, when the index page loads, it triggers triggerMe() function in the index page, you do the check of url hash
<body onload="triggerMe()"></body>
<script>
function triggerMe() {
var check = location.hash;
if (check == "triggerbtn") {
//button trigger even though you do not click on it
$('#btn-show-content').trigger('click');
}
}
</script>
I assume that you only need to trigger the function when click button in contact page. If you need the action happen all time you go to index page, you can use
$(document).ready(function() {
$('#btn-show-content').trigger('click');
});
You can use the JQuery .trigger() function. For your problem you wish to click a button on the contact page and it'll redirect you to the index page. When you go onto the index page and the document loads, this function will be performed.
Documentation here
(document).ready(function(){
$('#id').trigger('click');
});
In order to take away the issue of not being able to use Index.html everytime without it autoclicking. You can pass over a value to trigger the function on contact.html and then parse it in index.html, check out the solution to this question for that:
How to pass values from one page to another in jQuery
Related
I have a login and register modal and these modals share one same attribute, so I wanted to create an onclick function for each of the modals' submit buttons to trigger errors in respective modals. I tried this code to see if the button can trigger for the modals to show,
function loginModal(){
$('#modal-register').modal('show');
}
document.getElementById("modal-login-btn").addEventListener("click", loginModal);
and it does, however it only works before the page reload, as when i click the submit button, the page will reload. I want the modal to show after the page reload. I also tried this but it doesn't work.
$(document).ready(function(){
function loginModal(){
if (count($errors) > 0){
$(document).ready(function(){
$('#modal-login').modal('show');
});
}
}
});
document.getElementById("modal-login-btn").addEventListener("click", loginModal);
Does anyone have any idea how to make the function run after page reload?
You can use a GET value at the url of the page when the page reload:
you can set the url in javascript at the moment of reload
for example
window.location.replace(window.location.href+"?reloaded=true");
implement a function who detect if the url contains a reload GET
value.
if the GET value exist, show the modal directly.
I'm working on designing a website, which I have two pages the first page contains a button when it's clicked the hidden class belongs to some element from the second page must be removed. I searched a lot but nothing works for me, Hope you can help me.
The first page contains something like this:
<button class="btn btn-primary add" >Click me!</button>
The second page contains something like this:
<div class="hidden" id="someDivId">Some content!</div>
jQuery code in the first page:
$('.add').click(function (){
//Access the second page
//Remove hidden class from #someDivId
});
You can use localStorage for storing data through the pages. After user opens website page with hidden element you just call javascript which checks the localStorage.
$(".add").click(function() {
//sets hidden on false
localStorage.setItem("hidden", false);
})
//on another website page load check localstorage value
let isHidden = localStorage.getItem("hidden") ? localStorage.getItem("hidden") : false;
if(isHidden) {
$(".hidden").removeClass("hidden");
}
I need a solution which makes element visible after history.back triggered.
Initially, the div is hidden on a page. After a user clicks the button, the div becomes visible. Then then user visits another link and load page2. When user clicks Back button on browser from page2, I want to make the div is still visible on page1.
Page1 - HTML:
<html>
...
<body>
<div class="the-div hidden">
<h4>You see me now!</h4>
</div>
<button onclick="foo()">Click me!<button>
</body>
</html>
Page1 - JS:
foo = function(){
$(".the-div").removeClass("hidden");
// Expects the code here with history.pushState or something ..
}
Try to explore localStorage.
localStorage.setItem('buttonClicked', false);
on click of button, change the value of localStorage
I am working on a jquermobile template (only one HTML page with 10 DIVs as data-role=page) and I have a scenario where I have one button which when clicked should perform two activities at the same time -
Refresh the forms (that means.. reset the form fields)
Navigate to home screen
For this I am doing two things -
An onClick function that calls location.reload() - to refresh the page
For the same button, added an anchor tag referring to a screen (which is a DIV tag in jquerymobile template).
The problem here is, only the location.reload() works and the anchor tag fails to navigate to the given link (e.g. a href="index.html/#myDiv" - this doesn't do anything)
Can anyone suggest me an approach or provide me a working example for the above scenario, in which both the functionalities work for the same button?
The reason is when you do a reload it lost the track and never redirect you, so you can manually clean the entries and then reload to other page
First clear all the values
then navigate away to other page
these both step will be perform sequentially
function SomeName()
{
document.getElementById('elementid').value = "";
....
....
document.location.href='the_link_to_go_to.html';
}
Hope it helps
You can use the following
In the script
<script>
function clickEvent(){
refresh();
navigate to home();
}
</script>
in html
<input type="button" value="Dont show this again! " onClick="clickEvent();" />
On page1.php I have a click event that causes the user to be redirected to page2.php. It goes something like this:
$("#someButton").click(function() {
window.location = "page2.php";
});
And that works great. But what I really want is to open a hidden, UI-blocking <div> on page2. The user can already open this <div> manually by clicking another button on page2, that goes something like this:
$('#someOtherButton').click(function() {
$("#pageContainer").block({message: $("#theDivIWant2See")});
});
Can I make a click event from the JavaScript on one page call the JavaScript on another? Or will I need to add in some HTML-parsing to pass information between pages? (I'm not looking for a JavaScript hand-out here, just a strategy to help me move forward.)
When you redirect from the first page, add a querystring value in your url. and in the second page, using your server side page language, set in in a hidden field and in the document ready event check the value of that hidden field. If the value is expected, call a javascript function to show the popup.
Some thing like this
$("#someButton").click(function() {
window.location = "page2.php?showpopup=yes";
});
and in page2.php set it (forgive for errors, i am not a php guy)
<input type='<?php $_GET["showpopup"] ?>' id='hdnShow' />
and in the script
$(function(){
if($("#hdnShow").val()=="yes")
{
//Call here the method to show pop up
}
});
You need to do your stuff when DOM for page2 is ready. You can use jQuery's ready function for that.
$(document).ready(function() {
// put code for showing your div here
});
Hope that helps.
Could you pass a query string argument or assign a cookie that the other page could then check when the document loads? If the value exists then present a modal dialog (e.g. jQuery UI Modal Popup)
http://jqueryui.com/demos/dialog/