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.
Related
I am developing one stepwise form application where I am displaying some information on Modal popup. I am able to display the required information. If I refresh the page when the Modal is open the current Modal will close. Is there any way to stop closing the Modal on page refresh?
You can not prevent user clicking the refresh button.
Instead you can keep the state of the form in the local storage and in the page load event check if the user was in the middle of the form process.
If so, just show the modal again. There's no any other way.
//This is an example. This should be added when the user seen the dialog.
//This is just a Bootstrap example. Just to demonstrate the logic.
$("#modal-dialog").on("shown.bs.modal", function(){
localStorage.setItem("IS_SET", true);
});
$("#modal-dialog").on("hidden.bs.modal", function(){
localStorage.setItem("IS_SET", false);
});
$(document).ready(function(){
if(localStorage.getItem("IS_SET") && localStorage.getItem("IS_SET") === true){
//Which means the user was in the form process.
//And show the modal again on page refresh.
$("#modal-dialog").modal("show");
}
});
If you don't like the localstorage method, you can set a URL param which can be seen publicly in the URL.
I have a cancel button that is not working correctly.
When I hit it, it cancels, but then reloads the page.
I thought adding "preventDefault" would fix, but it did not.
Here is some background:
On my page called playerData.aspx, it displays the character stats in the this element:
<div id="mainGameText">.
That data is loaded via this page "characterGeneratorDisplay.aspx"
I have a block of jQuery code in "playerData.aspx" that controls the character display/edit area that is supposed to do the following:
When the page loads, it displays the character data.
When the user clicks this area(), the editor loads.
Here is that block of jQuery:
<script>
$(document).ready(function () {
//initial load character read-only
$("#mainGameText").load("../character/characterGeneratorDisplay.aspx?charID=<%= Session("currentCharID") %>");
//load character editor on div click
$("#mainGameText").click(function (e) {
e.preventDefault();
$("#ajaxNodeText").load('../character/characterGeneratorEdit.aspx?charID=<%= Session("currentCharID") %>');
});
return false;
});
</script>
The above script is working. It loads the needed data and it loads the editor when that area is clicked.
In the characterGeneratorEdit.aspx page, I have a "Save" and "Cancel" button.
The "Save" button is a .NET control because it does some backend .NET and database stuff when saving the character.
And the closeWindow() function reloads the read-only page:
function closeEditor() {
$("#mainGameText").load("../character/characterGeneratorDisplay.aspx?charID=<%= Session("currentCharID") %>");
}
The problem is, when I hit cancel, it does load "characterGeneratorDisplay.aspx", but then it re-loads the character editor(characterGeneratorEdit.aspx) again.
I thought adding "e.preventDefault()" would fix that, but it hasn't.
How can I get the cancel button to just close "characterGeneratorEdit.aspx" and reload "characterGeneratorDisplay.aspx" in the element?
Thanks!
Try event.stopPropagation.
Also, ensure that your "Cancel" button does not have "submit" type or return false in your onClick handler.
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();" />
I have an anchor on my page which looks like this: <a id="login" href="login.php"></a>
However, when a user inputs data in the page, in order that he shouldn't lose that data when going to the login page (the data can be saved without being logged in), I change it by taking out the href and adding an onclick to warn the user, as follows:
if (-code which checks for user input-){
$('#login').attr('href','javascript:void(0)');$('#login').attr('onclick','logincheck()');
}
function logincheck(){
alert("Going to the login page will make you lose your work. If you want to save them to a collection, please do so now. When you're ready, click the login button again.");
$('#login').attr('onclick','');$('#login').attr('href','login.php');
}
So the user gets the warning, and now the he can click the login button again to login.
The problem I'm having that for some reason the $('#login').attr('href','login.php');makes the page redirect right away. I'm guessing this is because the we're still in the middle of the anchor click.
How can I change this href but keep the page from actually redirecting before the button is clicked again? I tried adding return false but that didn't help.
Thanks in advance!
Why not consolidate it into a single item?
$('#login').on('click',function(e){
if($(this).data('clicked')!=='true'){
e.preventDefault();
alert("Going to the login page will make you lose your work. If you want to save them to a collection, please do so now. When you're ready, click the login button again.");
$(this).data('clicked','true');
}
});
This will prevent the action the first time, provide the alert, and give it the clicked data to show it has been clicked. The second time it won't meet the if condition, and continue to login.
This avoids the javascript:void(0) bit, as well as any onclick attributes ... everything is contained in your JS file.
You need e.preventDefault();
$('#login').on('click', function(e){
if(!$(this).data('clicked')){
$(this).data('clicked', true);
e.preventDefault();
alert("Going to the login page will make you lose your work. If you want to save them to a collection, please do so now. When you're ready, click the login button again.");
}
});
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/