The setInterval function is not working in my jsp page, below is my code:-
<script>
$(document).ready(function(){
$('form[name="lgform"]').submit(function(evnt){
evnt.preventDefault();
try{
mapPlotVar.clearInterval();
}
catch(e)
{
}
mapPlotVar=setInterval($("#btn_login").click(function(){console.log("update");},20000));
});
$("#btn_login").click(function(){
alert("hi");
});
});
</script>
<body>
<form name="lgform">
<div>
<table id="table" >
<tr>
<td width="35px"><input id="mob" type="text" name="mob_nu" placeholder="1234567890" maxlength="10"></td>
<td width="100px"><input type="button" name="login_btn" id="btn_login" value="Login"></td>
<td width="100px"><label for="Login" style="color: red" id="login_val"></label></td>
</tr>
</table>
</div>
</form>
</body>
</html>
After clicking the "btn_login" once i want the function to be called after every 20 seconds so that i get the alert message "hi" after every 20 seconds, but "hi" is only showing once, setInterval function is not working. What is wrong with my code? Any piece of code is appreciated.
I tried to use the set Interval here in a different manner because, i want the function to be called just after my first click and continue after every 20s and it wont work if we put the set interval function inside the function we call on button click in usual way.
Thanks in advance
setInterval($("#btn_login").click(function(){console.log("update");},20000));
The above will call jQuery.click once and pass its return value (a jQuery object) to setInterval but setInterval expects a callable function as its first argument.
The correct way to do it by wrapping into an anonymous function:
setInterval(function() {
$("#btn_login").click(function(){console.log("update");})
}, 20000);
But this still makes not much sense, since this way a new click event handler will be added (but not executed) to element every twenty seconds.
Your code has a lot of problems. Ignoring the other issues, if you want to set a 20s interval for a function on button click, you need to kick off the interval inside of the click handler.
$("#btn_login").click(function(){
setInterval( function () {
alert('hi');
}, 20000);
});
Of course, this will then happen on every button click. One way to solve it would be to use .one('click', function() { setInterval...}) instead of .click() because it will then work on first click only. But since it looks like you also want to cancel the interval, you'll need to take care of that as well.
edit:
var interval;
$("#btn_login").one( 'click', function() {
function run () {alert('hi');}
run();
interval = setInterval( run, 20000 );
});
// you can now cancel this interval somewhere else
function someCallback () {
if ( interval )
clearInterval(interval);
}
There are four basic things wrong with your code:
You do everything when the form is submitted, but you have no mechanism to submit the form (and your description says you don't want it to trigger on submission anyway).
Your code to tell the browser do stuff when the button is clicked is being passed to setInterval instead of the other way around.
You aren't passing a function to setInterval.
The code you want to run every time period is nowhere near your interval code
You need to throw out most of the code and start again.
var interval;
function run_on_interval_when_button_is_clicked(){
alert("hi!");
}
function run_when_button_is_clicked(event) {
event.preventDefault();
interval = setInterval(
run_on_interval_when_button_is_clicked,
20000
);
}
$(document).ready(function(){
$("#btn_login").on('click', run_when_button_is_clicked);
});
None of this has anything to do with JSP. That's server side code.
var interval;
$('#btn').on('click',function(){
if(typeof (interval) === 'undefined') {
interval = setInterval(function(){
alert('hi');
},20000);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">Click</button>
$('#btn_login').on('click', function(){
setInterval(function(){ console.log("update"); }, 20000);
});
Related
I am trying to make a quantity feild in wordpress (woocommerce)...
It is working, but, i need to fire an event when i Press + or - beside Quantity,
that will "Update cart".
I did it as follows:
<script type="text/javascript">
jQuery('div.woocommerce')
.on('click', 'input.plus', //When I click on "input.plus
function funkca (){ // Run function
jQuery("[name='update_cart']").trigger("click"); //Click a button named update_cart
}
);
</script>
But the "function" (jQuery("[name='update_cart']").trigger("click")) needs to be fired cca. 1000ms after the initial click...
Anyone got any ideas?
Kind regards
Just put a timeout in, as so:
jQuery('div.woocommerce').on('click', 'input.plus', function(){ setTimeout(function (){
jQuery("[name='update_cart']").trigger("click");
}, 1000)});
you can use setTimeOut function like
function funkca (){ // Run function
setTimeout(function(){
jQuery("[name='update_cart']").trigger("click"); //Click a button named update_cart
}, 1000);
});
i hope it might help.
I have a button that is set up to call a javascript function to automatically activate a "tab" on a page. When that tab is loaded, there are subtabs that display. I am trying to set it up so that one of the subtabs is also automatically activated when the button is clicked.
Currently I can get the first tab to select, but I can't get the subtab to select. #detailsTab is the id of the first tab. #personal-information is the id of the subtab I am trying to select.
The following is what I have.
This is all in the same file:
HTML:
<button class="button button--primary button--sm" onclick="viewDetials()">View Details</button>
Javascript:
<script type="text/javascript">
function viewDetials() {
$("#detailsTab").click();
personalSubTab();
}
window.onload = function personalSubTab() {
$("#personal-information").click();
}
</script>
Try combining your functions and adding a short delay for the subtab.
function viewDetials() {
$("#detailsTab").click();
setTimeout(function(){
$("#personal-information").click();
}, 200); // This value can be tweaked
}
The following will be called when the document is ready.
<script type="text/javascript">
function viewDetials() {
$("#detailsTab").click();
personalSubTab();
}
function personalSubTab() {
$("#personal-information").click();
}
// Document ready
$(function () {
personalSubTab();
});
</script>
I'm not exactly sure what you want to do - but if you want to generate a click event on another button/div use trigger, not click - like this:
function personalSubTab() {
$("#personal-information").trigger('click');}
I tried using an infinite loop within this function however, when I set up the setInterval the function doesn't repeat. The problem is when the user sends the form and after the time interval passes. The function stays on the sent message and doesn't start from the beginning. Please see my JSBin.
Javascript:
$(function(){
function show_fb() {
$("#feedback_box").show("slow");
}
function hideAll() {
$("#feedback_box").hide("slow");
}
$("#feedback_box #close").click(function() { // When the X is pressed
$("#feedback_box").hide("slow"); // Hide the form
});
setInterval(show_fb,1000); // Show the form after 6 seconds , you can change 6000 to anything you like
$("#feedback_form").submit(function() { //When the form is submitted
$('#feedback_form #fb_title').css('background-color','#4444FF').text('Sending...').slideDown(900); //show "Sending" message
$.post("form_submit.php",{ mesaj:$('#mesaj').val(),rand:Math.random() } ,function(data) { //subimit the feedback via AJAX
$('#feed_subm').attr("disabled", "false"); //disable the "SEND" button
$('#feedback_form #fb_title').css('background-color','#C33').text('Thank You!').slideDown(900); //Shows a thank you message
setTimeout(hideAll,2000); // Hide the form after 2 seconds
});
});
return false; //Tells the code not to post the form physically
});
HTML:
</head>
<body>
<div id="feedback_box">
<form id="feedback_form">
<span id="fb_title">Give us some feedback :)</span><span id="close">X</span>
<textarea id="mesaj"></textarea>
<input type="submit" value="Send" class="mysubm" id="feed_subm"/>
</form>
</div>
</body>
You can repeat a function in jQuery like this:
Javascript:
$(document).ready(function() {
// First we will create the function that will be repeated
function repeat() {
setTimeout(function() {
// Enter your code that you want to repeat in here
repeat(); // This is where the function repeats
}, 1); // Where 1 is the delay (in milliseconds)
}
repeat(); // Here we are initially firing the function
});
In your example above, I can't see why you would need a function constantly being repeated however your question was How I can repeat a function in jQuery?
Which I think means How can I repeat a function in jQuery?
Well here's your answer.
I'm developing an application in that i need to capture user input from text box, if he stops typing for more than 3 sec. means we need to capture that text using javascript and need to store it in mysql db... plz help me out of this?
Thank you.....
Attach events to the input (e.g. keyup, keydown, keypress). There you will set up a setTimeout with a callback. Of course the timeout ID will be stored in a var (e.g. window.type_timeout). The setTimeout callback will do what you want ater those 3 seconds of inactivity.
You can start here. E.g.(using jQuery):
$('input').on('keyup',function(){
if( window.type_timeout ) clearTimeout( window.type_timeout );
window.type_timeout = setTimeout( do_stuff , 3000 , this /* extra data */ );
});
function do_stuff( input ){ /* do your stuff */ }
Use setTimeout. W3 schools has a pretty good reference on JavaScript timing
<script>
inputSaveTimeout = null;
function DoSomething() {
window.clearTimeout(inputSaveTimeout);
alert('I just did something');
}
function Updated(e) {
window.clearTimeout(inputSaveTimeout);
inputSaveTimeout = setTimeout(Save, 3000, e.value);
}
function Save(data) {
alert('Saved: ' + data);
}
</script>
<input type="text" onkeydown="Updated(this);" /><input type="button" value="Do Something" onclick="DoSomething(); return false;" />
In JavaScript, I am trying to execute a function 2 seconds after a link is clicked, and wait until the function completes its execution before going to the link destination.
/* JavaScript */
function myFunction() { /* Block of code, with no 'return false'. */ }
<!-- HTML -->
<a onclick="setTimeout(myFunction, 2000);" href="http://www.siku-siku.com">Link</a>
The problem is upon click, the browser immediately goes to the link destination i.e. myFunction didn't have time to execute. Did I miss anything here?
Thanks beforehand.
You will need to return false from your onclick event, to cancel the actual browser handled page load.
And since you want to follow the link (once the function is complete) you will need to do that through javascript. But you are using a timeout so you loose the reference to the clicked element, so we need to pass that too in the method (if you want this logic for multiple links)
html
<a onclick="return createTimedLink(this, myFunction, 2000);" href="http://www.siku-siku.com">Link</a>
javascript
function createTimedLink(element, callback, timeout){
setTimeout( function(){callback(element);}, timeout);
return false;
}
function myFunction(element) {
/* Block of code, with no 'return false'. */
window.location = element.href;
}
demo at http://jsfiddle.net/gaby/mdkjX/2/
<a onclick="setTimeout(myFunction, 2000);" href="#">Link</a>
JAVASCRIPT
function myFunction(){
////your other code
///
///
window.location="http://www.siku-siku.com";//at the end
}
demo here
Yes, the default behavior for a link is a GET request sent by the browser. Imagine that before you register your handler, browser has registered another handler to initiate a get request (just imaginary). This is the case here. You should return false in your inline handler:
onclick = '(function(){ setTimeout(yourFunction, 2000); return false;})()'
or more simpler:
onclick = 'setTimeout(yourfunction, 2000); return false;'
Update:
Use this (it requires jQuery):
$(function () {
$('a').click(function (e) {
e.preventDefault();
var target = $(this).attr('href');
setTimeout('go("' + target + '")', 2000);
});
});
function go(target) {
console.log('2 seconds passed');
document.location = target;
}