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.
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 follow How to clear a textbox using javascript but my scenario is little change. I have a login button and when user click on login a pop-up window is open. He fill the textbox and for some reason he go back to main page. When he again come to login popup window he previous value is not cleared. May be this is because the page is not loaded. And I do not want to load page again. I want to use JQuery/JavaScript to remove the entered text. I has idea that I write code inside Close button but I don't know how to clear the textboxes. Please help.
Here is the code, scenario is that I used popup for login and sign up. In login popup there is link "Don't have login Id" when user click on it the sign up pop up with form is open.
Don't have Login Id
And the JavaScript method is
<script type="text/javascript">
function function_deletePreviousData(){
document.getElementById("signUp").value = "";
}
</script>
But nothing happened. I think this is because I don't give element id, I just give id of element which I used to land on sign up pop up form. Any idea for clear all form without accessing all elements and give it null value.
Instead of including code in close button click event, we should write code in login button click.This is one of my suggestion.
Try this once:
Javascript:
<script type="text/javascript">
function LoginButtonClick() {
document.getElementById`("TextBox_Id").value = "";
}
</script>
JQuery:
jQuery("#LoginButton_Id").Click( function()
{
$('#TextBox_Id').val("");
} );
Finally I find the method in JQuery to reset all fields. Just Trigger reset.
$('#form').trigger("reset");
Thanks all for help.
In my application when i click form submit, service call happens. When the service call happens I need to I need to disable the page conetent til the next page loads.
As i have given cursor:wait the mouse pointer changes to loading symbol and does not allow to click on the page. But still i could use tab and enter or change the values in the page.
Can anyone tell the code to disable page content using transparent image?
You could do that easier than with a transparent image :
$('body.waiting > *').on('click', function(e) {
e.preventDefault();
});
I think that you should only disable the submit input for example :
$('input').attr('disabled', 'disabled');
With a "overlay", add an absolute div at the top of your page :
<div id="overlay" style="position:absolute;background:url('trans.png');left:0;top:0;width:100%;height:100%;display:none;"></div>
And than simply show it when your form is submitted :
$('#overlay').show();
I have a javascript method that creates a bunch of elements on click. When I call it from a button, it only stays on the screen for the duration of that click. when I enter the exact same code into the console, however, it stays on the page until I reload or navigate away (which is exactly what I want).
JavaScript code: (it's the only method in the js file)
function post() {
var postTitle = document.createElement('h3');
var nodeTitle = document.createTextNode('Immigration is good.');
postTitle.appendChild(nodeTitle);
etc....
Where I'm calling it in the html:
<input type="submit" id="post-button" value="Post" onclick="post()">
The script tag is in the header of the html page.
How do I get it to stay on the page past the duration of the click? Any ideas why it's being immediately obliterated?
You still need to cancel the form's submission. A return false; from post, if it exists, won't work because the onclick attribute is calling post() but not returning anything.
You could change it to onclick="return post();", but it would be better to attach the handler directly, and to the submit event of the form and not the click event of the button (people do use Enter sometimes!):
document.getElementById('some-form').onclick = post;
Look at what the button does. It is posting!
When you click the button it is redirecting you back to the page you are currently on! It seems like it is showing up and disappearing what is actually happening though is that the page is refreshing.
There are a couple of options to do what you want. Submitting via Ajax or having your server respond with a hashbang/cookie set to direct the page to do as you wish.
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/