The program needs to notify when input is changed. Below is my code :
$(document).ready(function(){
var myfunction = setInterval(function(){
$('input').change(function(){
});
$.post("getvalue.php",function(callback){
$(notify.createNotification("NOTIFICATION", {body:"<?php echo $arrb; ?>", icon: "../src/func/notif/icon.jpg"})).html(callback);
});
clearInterval(myfunction) },1000);
});
Use change event handler, you've just bound the change event handler but you're not doing anything when the event occur.
Call function notify when the value of input is changed
There is no need of using setInterval
If you want to use setInterval use setTimeout instead of setInterval as you're clearing it when the callback is called.
Don't use callback as the name of the response variable, use it as response(for better naming convention)
Ex:
var interval = setInterval(function () {
clearInterval(interval);
}, 1000);
Is equivalent to
setTimeout(function () {
}, 1000);
Code:
$(document).ready(function () {
function notify() {
$.post("getvalue.php", function (response) {
$(notify.createNotification("NOTIFICATION", {
body: "<?php echo $arrb; ?>",
icon: "../src/func/notif/icon.jpg"
})).html(response);
});
}
$('input').change(notify);
});
Take the .change handler out of the set interval and call it once you have created your input in the DOM, typically on page load is fine so your script should look something like this:
$(document).ready(function () {
$('input').change(function () {
console.log("any input changed because I hooked all input elements on my page");
});
var myfunction = setInterval(function () {
$.post("getvalue.php", function (callback) {
$(notify.createNotification("NOTIFICATION", {
body: "<?php echo $arrb; ?>",
icon: "../src/func/notif/icon.jpg"
})).html(callback);
});
clearInterval(myfunction);
}, 1000);
});
I'm not sure what your notify function is supposed to do, but it doesn't look much correct other than it will get called once after 1000ms when the page is ready.
Goodluck.
Related
Please, help fix bug: the code currently alerts undefined instead of button's inner contents
function registerClickHandler() {
$('#clickme').click(function() {
setTimeout(function() {
alert(this.innerHTML);
}, 200);
});
}
this inside the timeout handler is not the button
function registerClickHandler() {
$('#clickme').click(function (e) {
setTimeout(function () {
alert(e.currentTarget.innerHTML);
}, 200);
});
}
Try to get the value before setTimeout
function registerClickHandler() {
$('#clickme').click(function () {
var value=this.innerHTML;
setTimeout(function () {
alert(value);
}, 200);
});
}
In java script this points to the last function and inside the timeout handler is not the button, thats why you are getting the error.
Also it's a good practice implement this kind of functions or onclicks using on.('click', function(){...})
below you can see my example:
$(document).ready(function(){
$('#clickme').on('click', function (e) {
setTimeout(function() {
alert(e.currentTarget.innerHTML);
}, 200);
});
});
You can take a look and run it here: http://jsfiddle.net/gon250/6qwk0g1t/1/
Try putting the click eventhandler outside the function. Also pass the value of 'this' to a variable before calling setTimout. Later use this variable inside setTimout. Read more about Javascrpt prototypes here
$(document).ready(function(){
$('#clickme').click(function() {
var me = this;
setTimeout(function() {
alert(me.innerHTML);
}, 200);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clickme">click me</div>
I am having trouble attaching a timing event to my function I want this to on execute the function after 25 seconds. what am I doing wrong?
setTimeout("ajaxTimeout();", 25000);
$(document).on({
//open popup here
'pageshow': function ajaxTimeout(){
$('#askforsomething').popup('open');
}
}, '#homepage');
Two points:
You probably mean $(document).ready(function () { ... }). Alternatively, a shorthand for this is simply $(function () { ... }).
You can (and should) pass a function to setTimeout instead of a code string.
Result:
$(function () {
setTimeout(function () {
$('#askforsomething').popup('open');
}, 25000);
});
I don't know all the logic behind it but this did work for me. and the guy above looks like he was pretty close to the same.
$(document).on({
//open popup here
"pageshow": function () {
setTimeout("$('#askaquestion').popup('open');", 15000);
}
}, "#homepage");
I'm trying to create a jQuery autocomplete for an application:
$("#search-input").on('keyup', function() {
search = $(this).val();
autocomplete_div = $(".autocomplete")
$.get('/ajax/search/', {'search': search,}, function(response){
autocomplete_div.html(response)
});
});
What would I need to add to the above code to add a 400ms delay?
Use
setTimeout(function() {
// your code here
}, 400);
setTimeout is a method provided by the browser's window object.
A more complete example that cancels a timer if already set using clearTimeout would be:
var myTimer = 0;
$("#search-input").on('keydown', function() {
search = $(this).val();
// cancel any previously-set timer
if (myTimer) {
clearTimeout(myTimer);
}
myTimer = setTimeout(function() {
autocomplete_div = $(".autocomplete")
$.get('/ajax/search/', {'search': search,}, function(response){
autocomplete_div.html(response)
});
}, 400);
});
Also note use of on instead of the deprecated live.
Your code should look like this: (for jQuery 1.7+)
$(document).on('keyup', "#search-input", function () {
clearTimeout($(this).data('timeout'));
var _self = this;
$(this).data('timeout', setTimeout(function () {
$.get('/ajax/search/', {
search: _self.value
}, function (response) {
$(".autocomplete").html(response);
});
}, 400));
});
If using older jQuery version, use live() or better delegate(). BTW, you should bind it to closest static container, not document.
You can use the setTimeout() function to delay the start of the expression, in this case, your function. Beware that this does not delay processing beyond this code. It will only delay the start of this function, while continuing to process code after the function.
$("#search-input").live('keydown', setTimeout(function() {
search = $(this).val();
autocomplete_div = $(".autocomplete")
$.get('/ajax/search/', {'search': search,}, function(response){
autocomplete_div.html(response)
})
},400));
EDITED: to correct misplaced parentheses.
script
$(document).ready(function () {
var meter_id = $("#MeterReadingTypes li a.link_active").attr("id");
var range_id = $("#DateRangeTypes li a.link_active").attr("id");
window.setInterval(PostMainChartValues(meter_id, range_id), 5000);
...
});
function PostMainChartValues(meter_id, range_type_id) {
$.ajax({
...
});
}
window.setInterval is not trigerred. If I write an alert in setInterval it works. What is the reason of this? Why function is not triggering? I tracked it with chrome DevTools, and there is no move.
The first parameter to setInterval should be a function (or an evalable string). Right now, you are calling PostMainChartValues() and passing its return value to setInterval().
Change it to:
window.setInterval(function() {
PostMainChartValues(meter_id, range_id);
}, 5000);
This is not an ajax issue. You are using in wrong mode the setInterval parameter.
Create an anonymous function like bellow:
window.setInterval(function () { PostMainChartValues(meter_id, range_id); }, 5000);
I'm trying to make a wall post like Facebook. I need to refresh the content div after every ten seconds and the div shouldn't refresh while the user is typing a comment. The content is reloading but is not stopping. Actually, I want to stop it when i click id = 'comments_option'.
I tried this and called the function reload(uid) at $(document).ready
var intervalId = null;
function reload(uid) {
intervalId = setInterval(function () {
var ol = $('#home_list');
var start = ol.children().length;
$.post('ajax/reloadhome.php', {
uid: uid,
start: start
}, function (data) {
$('#buzzfetch ul').html(data);
});
}, 5000);
$('#comments_option').click(function () {
clearInterval(intervalId);
});
}
Use on as opposed to click:
$("#comments_option").on("click", function () {
clearInterval(intervalId)
});
Because #comments_option is inside of #buzzfetch ul, the click event will only be bound to the first instance of #comments_option when using click. It will not bind to any further instances.
See this answer for further explanation on the differences between bind and on