I have the function Nextthing that hides first iframe and shows the next one, but as you will see in the code of the function I did just for only one next iframe, so if he makes the action for the second iframe to hides it and shows the next iframes it will display but in the wrong place.
How can I make the function to stop after one running?
function Nextthing (){
$("#i").hide();
$('.table').eq(1).find('tbody tr').eq(2).after(
'<tr><td colspan=10><iframe class="iframe" src="/msg.html?msgId=' +
$('.table').eq(1).find('tbody tr').eq(2)
.find('td a').eq(0).text()+'&constant=1"></iframe></td></tr>);
}
UPDATE: as you can see that iframe is called from that page msg.html, well that page has an input and a submit button, and the function Nextthing is called in that button like this:
<input type="submit" onclick="parent.Nextthing();" />
When somebody presses the submit button in the iframe it will load the iframe of the next page of msg.html based on msgId, and I want this load to be only once...
you can use
.one() handler.. It will run the code once and stop the execution.
$('input[type=submit]').one('click', function() {
$("#i").hide();
$('.table').eq(1).find('tbody tr').eq(2).after('<tr><td colspan=10><iframe class="iframe"
src="/msg.html?msgId='+$('.table').eq(1).find('tbody tr').eq(2).find('td
a').eq(0).text()+'&constant=1"></iframe></td></tr>);
});
For this I usually just have a global variable such as elTriggers = false and check for that and make it true when it is triggered. You could also check out jquery's one function.
Related
I have set up a page with a form that users can make changes to using PHP. When they try to navigate away from the page or refresh, an alert box appears using JS. However when they click the Save button the alert box still appears.
Is there any way I can stop the alert box appearing when the user clicks on the save button?
here is my JS:
var needToConfirm = true;
$('#save').click(function(){
var needToConfirm = false;
})
if (needToConfirm == true)
window.onbeforeunload = confirmExit;
function confirmExit()
{
return "You have attempted to leave this page. If you have made any changes to the fields without clicking the Save button, your changes will be lost. Are you sure you want to exit this page?";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Here is my HTML (just the button): -->
<input type="submit" id="save" />
<input type="hidden" id="save" name="submitted" value="TRUE" />
If I understand correctly, you don't want to show the confirmation dialog when someone clicks the save button right? Why not just deregister the onbeforeunload method in that click handler like so:
window.onbeforeunload = confirmExit; //By default assign the confirmExit
//If user clicks on save, just set it to null.
$('#save').click function(){
window.onbeforeunload = null;
}
This way, you don't need to maintain a separate variable called needToConfirm. Also, try to understand the way javascript executes your code. It does it line by line. So, your needToConfirm defined inside the click handler right now gets set to false when the user clicks save. But even before that callback is called, you already have bound the onbeforeunload event as the default value of needToConfirm is true.
Try to also keep in mind the scoping of variables in javascript. If you redefine variable needToConfirm inside a click handler it would not necessarily access the "global" variable you intend to share across different functions. And ofcourse, like other people pointed out, don't use the same id for different HTML elements. It is not supposed to be used like that.
First of all, you are not executing your conditional code inside the if statement. It is out of it, fix that and try again. If it still doesn't work then try the following:
The page get refreshed before the $("#save").click() returns anything (in this case, needToConfirm = false. Therefore the alert box appears as usual. You have to modify your html as follows:
<input type="button" id="save" />
and use javascript to actually submit the form... You can do that as follows:
$("#save").click(function() {
var needToConfirm = false;
$("#idOfForm").submit();
return false;
}
Also, change ID of one of the buttons as 2 elements can never have the same ID... or use class instead!
I have a page with a button named "projects",a div id="main"> and a label inside it. The main text of the page is written in the label. When I press the button, the text changes, using the label.text = .. inside the button_Click event inside C#. This is the button:
<asp:Button ID="projects" runat="server" OnClick="projects_Click"/>
What I want to do is to add a fading effect when changing the text. I saw that the easiest way was to use jQuery. I added this:
<head>
<script type='text/javascript'>
$(function () {
$("#projects").click(function (e) {
e.preventDefault();
$('#main').fadeOut(1000);
$("#main").fadeIn(1000);
});
});
</script>
</head>
What happens now is that if I press the projects button, the text only fades out and then it fades in, but it's not changed, projects_Click isn't executed. If I remove e.preventDefault(); , the text changes but there is no fading effect. How can I make them work together? Old text fades out, projects_Click is executed and fadeIn comes into action.
If you can move following part(mentioned in your question) to JS , then it will work..
When I press the button, the text changes, using the label.text = .. inside the button_Click event inside C#.
Lets say that text is XYZ, then you can do it like this.
$(function () {
$("#projects").click(function (e) {
e.preventDefault();
$("#main").html("XYZ");
$('#main').fadeOut(1000);
$("#main").fadeIn(1000);
});
});
And if that is calculated on server side, then move those code block to a webmethod and do a ajax call in .click event and in success handler set text and do animations.
Tutorial for above - http://www.aspsnippets.com/Articles/Calling-ASPNet-WebMethod-using-jQuery-AJAX.aspx
OR
I have one more suggestion .
Define a javascript function in aspx. Like following.
function animate(){
$('#main').fadeOut(1000);
$("#main").fadeIn(1000);
}
In button click handler, after setting label text, use following line to initiate animation on page load ( after page postback / button click event handler completes).
Page.ClientScript.RegisterStartupScript(this.GetType(), "scr", "<script>animate();</script>");
NOTE - you can not simultaneously use server side code to set some text or do preventDefault to set animation in JS. This will make you in catch 22 situation.
The text is too large to be put inside the script.
Since it was made for one key, I eventually had to make it work for every each key on the page.
I did this:
<head>
<script type='text/javascript'>
$(function () {
$('#main').hide;
$("#main").fadeIn(1000);
});
});
</script>
</head>
This function executes every time the page reloads and since this is a one page site with only the main text changing in the middle, it is executed on every button click.
Aspx changes the text, jQuery immediately hides it and it fades it in slowly. There is no fade out, but this method works great also and thinking about it, I like it better.
This may seem like a simple question. I've tried to Google the answer, but I can't seem to find it so that's why I'm here for help. Part of the problem is that I can't really phrase the question properly, so I will try to explain it here. Here goes...
I have two functions in my JavaScript file (let's name them fn1() and fn2()). I am calling these functions using onclick in my HTML file. For example:
<span class="test" onclick="fn1();">Button #1</span>
<span class="test" onclick="fn2();">Button #2</span>
The functions work perfectly fine when a user clicks on their respective buttons. However, if a users clicks on Button #1, and then Button #2 - both functions are called/loaded simultaneously.
Question: How do I make it so that fn1() is disabled (or cleared) as soon as the user clicks on Button #2, which will load fn2()?
Thank you.
You can use jQuery way the noop method
Within fn1() function you should use $.noop() to empty the function fn2()
Or simply as you are calling it on onclick you can remove that attribute within that function. (I don't recommend to use this)
$('span.test').not($(this)).removeAttr('onclick');
But I extremely recommend to use namespace by which you can unbind the click event like the following instead of calling inline javascript:
The on method
$( "span.test" ).on( "click.something", function( event ) {
//do your stuff here
});
Later you can unbind the click event like this:
The off method
$("span.test").off("click.something");
The nice way: disable the fn2 button when you enter fn1 (rather than disabling the function). This also has a side effect of letting the user know that the button is not available. Disabled elements do not fire 'click' events.
$('span.test').not($(this)).prop('disable', true);
The not-so-nice-way: set a variable when you're in one function, and clear it when you exit. Return early from the functions if the variable is set.
The downright ugly way: unbind the onclick from the other buttons if one is clicked. This is so messy that you really don't want to do that.
The I-really-can't-recommend-it-less way: redefine the other functions with no-ops.
I don't know if I understand your question correctly and I don't have enough rep to comment
but if you want the user not to be able to press the second button until the first finishes execution then you could do the follwing
in the first line of your fn2() add the following line
document.getElementById("button1").disabled = true
but you should first give an id button1 to the first button
this will grey the button button1 when the user press the button
after your code finishes execution you should add:
document.getElementById("button1").disabled = false
this will make the button pressable again
u may try this with flags, this is not going to clear the function e.g.:
var runFn1 = true;
function fn1() {
if (!runFn1) {
return;
}
// ur code here
}
function fn2() {
runFn1 = false;
// ur code here
}
"The functions work perfectly fine when a user clicks on their respective buttons. However, if a users clicks on Button #1, and then Button #2 - both functions are called/loaded simultaneously."
javascript being single threaded. fn1() execution is first completed and then followed by fn2(). Hope you understand there will not be a case where both are called simultaneously.
For example
function fn1(){
while(true){
}
}
function fn2(){
alert("2");
}
<input type="button" value="Btn1" onClick="fn1();"/>
<input type="button" value="Btn2" onClick="fn2();"/>
Try invoking fn1(). you will be surprised fn2() cannot be invoked!
I am trying to restrict the user from clicking on a button multiple times. They can click on the button once when the page loads. If the page is reloaded the same should apply the user can click on the button only once.
I am using the following code however it doesn't seem to work for me
$("#doAccess").click(function() {
$("#doAccess").removeAttr('onclick');
DoSave();
});
Disable the button after it's been clicked
var accessBtn = $('#doAccess');
accessBtn.click(function() {
accessBtn[0].disabled = true;
DoSave();
});
Sounds like what you really need is:
$("#doAccess").one('click', DoSave);
jsFiddle example
.one() - Attach a handler to an event for the elements. The handler is executed at most once per element per event type.
Why not this?
$("#doAccess").once('click', function() {
DoSave();
});
You should probably also gray out or disable #doAccess, whatever it is.
I have a webpage which contains one section called 'answer'. The 'answer' section should be hidden until users click the 'show-answer' hyper link.
So I use JQuery toggle command to achieve this:
$('.show-answer').toggle(function() { show_answer ...} ,
function() {hide_answer ...} )
It works well by itself.
However, I got a problem when I add another form on the same page. When the form is submitted, I redirect it to this page with an anchor "#xxx" appended in the end.
Then I found that the toggle function got triggered unexpectedly. Basically, if the 'answer' section is hidden before the form submitted, it becomes visible after the browser is redirected to the page.
May be using a click handler will help you
$(document).ready(function(){
$('.answer').on('click', function(e){
e.preventDefault();
$('.show-answer').toggle('show');
//Or use the following
//$('.show-answer').slideToggle();
});
});
A fiddle is here.