I want to have a timeout function so when a form is submitted the alert is displayed two seconds after the submit. The code I am using doesn't work:
$(document).ready(function() {
$("#newsletter").submit(function() {
setTimeout(function() {
alert("submitted");
}, 2000);
});
});
But when I change the 2000ms to 900 is seems to work fine:
$(document).ready(function() {
$("#newsletter").submit(function() {
setTimeout(function() {
alert("submitted");
}, 900);
});
});
How can I get the 2000ms to work?
The only possible reason for this is that your form is getting submitted and the user is taken to the new page (the form's action) before the 2 seconds elapse.
As suggested in Thilo's comment, if showing the alert is unavoidable, submit it via AJAX so that the current page (containing the code to alert) remains intact and therefore executes.
You can use like this. The problem with your original code was that, it got submitted before the alloted time.
$(document).ready(function() {
$("#newsletter").submit(function(e) {
e.preventDefault();
setTimeout(function() {
alert("submitted");
}, 2000);
});
});
You could change your code to this:
$(document).ready(function() {
$("#newsletter").submit(function(event) {
var element = this;
event.preventDefault();
setTimeout(function() {
alert("submitted");
//rest of the code
element.submit();
}, 2000);
});
});
Snippet:
$(document).ready(function() {
$("#newsletter").submit(function(event) {
event.preventDefault();
var element = this;
setTimeout(function() {
alert("submitted");
element.submit();
}, 2000);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form style="width:440px;" action="./" method="post" id="newsletter">
<input type="text"/>
<input type="submit" value="Submit"/>
</form>
Related
Could not working my fade in fade out when i displaying success message onsubmit function:
Here is my Javascript:
<script>
popUpForm = function() {
jQuery('#successMessage').text("Successfully submitted !").fadeIn("slow")
jQuery('#successMessage').css("display", "block")
setTimeout(function() {
jQuery('#successMessage').fadeOut()
jQuery('#successMessage').css("display", "none")
}, 5000);
}
</script> And Here is my message block div: <div th:id = "successMessage" class="alert-box success"></div>
See using following code am not sure.
var auto_info = setInterval(function() {
$("#successMessage").text("Successfully submitted !").fadeIn("successMessage");
$("#successMessage").trigger('updatelayout');
setTimeout(function() {
jQuery('#successMessage').fadeOut();
}, 5000);
});
You need not set display property when using fadeIn / fadeOut functions as these functions themselves take care of hiding and showing elements with fading effect:
<script>
popUpForm = function() {
jQuery('#successMessage').text("Successfully submitted !").fadeIn("slow");
setTimeout(function() {
jQuery('#successMessage').fadeOut();
}, 5000);
}
</script>
I want to click a button automatically on every page refresh.But when i have the window.location.reload function the button click is not happening.I am really confused on this one.What to do to get a button clicked automatically on page refresh?
window.setTimeout(function () {
window.location.reload();
repeat();
}, 2000);
function repeat(){
document.getElementById("st").click();
}
window.setTimeout(function () { repeat();
window.location.reload();
}, 2000);
Call repeat before reload function.
This is working!
document.getElementById("st").onclick = function() {
alert('Clicked');
};
window.setTimeout(function() {
window.location.reload();
repeat();
}, 2000);
function repeat() {
document.getElementById("st").click();
}
<div id="st">Div</div>
I am attempting to delay the swapping of text in a div. It should operate like a slider/carousel for text.
I must have the code wrong, as the final text replacement never happens.
Also, how would I animate introducing the replacement text (window blinds, for eg.)?
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script type="text/javascript">
$(document).ready(function() {
$("#showDiv").click(function() {
$('#theDiv').show(1000, function() {
setTimeout(function() {
$('#theDiv').html('Here is some replacement text', function() {
setTimeout(function() {
$('#theDiv').html('More replacement text goes here');
}, 2500);
});
}, 2500);
});
}); //click function ends
}); //END $(document).ready()
</script>
</head>
<body>
Below me is a DIV called "theDiv".<br><br>
<div id="theDiv" style="background-color:yellow;display:none;width:30%;margin:0 auto;">
This text is inside the Div called "theDiv".
</div><br>
<br>
<input type="button" id="showDiv" value="Show DIV">
</body>
</html>
.html() only takes a string OR a function as an argument, not both. Try this:
$("#showDiv").click(function () {
$('#theDiv').show(1000, function () {
setTimeout(function () {
$('#theDiv').html(function () {
setTimeout(function () {
$('#theDiv').html('Here is some replacement text');
}, 0);
setTimeout(function () {
$('#theDiv').html('More replacement text goes here');
}, 2500);
});
}, 2500);
});
}); //click function ends
jsFiddle example
Try this:
function explode(){
alert("Boom!");
}
setTimeout(explode, 2000);
You can also use jQuery's delay() method instead of setTimeout(). It'll give you much more readable code. Here's an example from the docs:
$( "#foo" ).slideUp( 300 ).delay( 800 ).fadeIn( 400 );
The only limitation (that I'm aware of) is that it doesn't give you a way to clear the timeout. If you need to do that then you're better off sticking with all the nested callbacks that setTimeout thrusts upon you.
This is how I solved the problem
The menu closes a few seconds after mouse out (that if hover didn't fire),
//Set timer switch
$setM_swith=0;
$(function(){
$(".navbar-nav li a").click(function(event) {
if (!$(this).parent().hasClass('dropdown'))
$(".navbar-collapse").collapse('hide');
});
$(".navbar-collapse").mouseleave(function(){
$setM_swith=1;
setTimeout(function(){
if($setM_swith==1) {
$(".navbar-collapse").collapse('hide');
$setM_swith=0;}
}, 3000);
});
$(".navbar-collapse").mouseover(function() {
$setM_swith=0;
});
});
I have some problem, i need to block/shut down some click action for some little time. What i'm trying to do is fire all actions after my click, but block this click when this actions is under procesing. So this is my code, thx for help:
carousel_controls_buttons.live('click', function(e){
carousel_controls_buttons.attr('disabled', 'disabled');
setTimeout(function(){
e.preventDefault();
$(xml).find("main_menu").each(function (){
// some actions
});
carousel_controls_buttons.removeAttr('disabled');
}, 450);
});
I am presuming you are wanting something like this:
$(document).ready(function () {
carousel_controls_buttons.attr('disabled', 'disabled');
setTimeout(function(){
carousel_controls_buttons.removeAttr('disabled');
}, 1000);
carousel_controls_buttons.live('click', function(e){
e.preventDefault();
$(xml).find("main_menu").each(function (){
// some actions
});
});
});
I have below code:
<a href="#" id="#item.Id" name="vote" ><img src="/Content/images/021.png" style="float:left" alt="" /></a>
which invokes an ajax call. on the first call. if the return is true, on the second call I want to make an alert box saying you can do vote only once.
<script type="text/javascript">
$(function () {
$("div.slidera_button a").click(function (e) {
var item = $(this);
e.preventDefault();
$.get('#Url.Action("VoteAjax","Home")', { id: item.attr("id") }, function (response) {
if (response.vote == "false") {
alert("foo.");
} else {
//something
}
});
})
});
</script>
this works, if i click on the button then refresh the page but it doesnt work, if i try to click twice.
I want to the user to be able to click multiple times and only after first one, they get a popup.
why this is not working?
how can i fix it?
EDIT: works in FF.. doesnt work in IE.
How about something like this:
<style type="text/css">
a.disabled {
opacity: 0.5;
/* whatever other styles you want */
}
</style>
<script type="text/javascript">
$(function () {
$.ajaxSetup({ cache: false });
$("div.slidera_button a").click(function (e) {
var item = $(this);
if (item.hasClass("disabled")) {
// alert when they vote
// you'll need to handle some way to add this
// server side to account for page reload, yes?
alert('You may only vote once');
}
$.get('#Url.Action("VoteAjax", "Home")'
, { id: item.attr("id") }
, function (response) {
// if this returns successfully, you voted.
item.addClass('disabled');
}
});
return false;
})
});
</script>
Use this script
<script type="text/javascript">
$(function () {
$("div.slidera_button a").live('click',function (e) {
var item = $(this);
e.preventDefault();
$.get('#Url.Action("VoteAjax","Home")', { id: item.attr("id") }, function (response) {
if (response.vote == "false") {
alert("foo.");
} else {
//something
}
});
})
});
</script>
Or JQuery Delegate method to trigger this click