Good Afternoon,
I have got two functions, one in ajax another one in js as below:
<script>
/* AJAX request to checker */
function check(){
$.ajax({
type: 'POST',
url: 'checker.php',
dataType: 'json',
data: {
counter:$('#message-list1').data('counter')
}
}).done(function( response ) {
/* update counter */
$('#message-list1').data('counter',response.current);
/* check if with response we got a new update */
if(response.update==true){
$('#message-list1').html(response.news);
var audio = new Audio('ding.mp3');
audio.play();
}
});
}
//Every 20 sec check if there is new update
setInterval(check,2000);
</script>
<script>
function reblink() {
$.getScript($('script:first',data).attr('src'), function(){
eval(blink('.blink'););
});
</script>
now reblink function stops right after I call ajax function. Again it does starts when I physically refresh page. What I want to achieve is to start this function after my each call of the ajax function.
I was trying to merging them 2 functions by placing:
$.getScript($('script:first',data).attr('src'), function(){
eval(blink('.blink'););
In if(response.update==true){ } however it does than stop ajax from functioning.
Any suggestions much appreciated.
UPDATE
So after changes mentioned in comments code is now looking like below:
<script>
/* AJAX request to checker */
function check4(){
$.ajax({
type: 'POST',
url: 'checker.php',
dataType: 'json',
data: {
counter:$('#last-orders').data('counter')
}
}).done(function( response ) { /* update counter */
$('#last-orders').data('counter',response.current);
/* check if with response we got a new update */
if(response.update==true){
$('#last-orders').html(response.news4);
var audio = new Audio('ding.mp3');
audio.play();
reblink() // call reblink here to execute
}
});
}
//Every 20 sec check if there is new update
setInterval(check4,2000);
</script>
reblink
<script>
function reblink() {
$.getScript($('script:first',data).attr('src'), function(){
eval(blink('.blink'));
});
}
</script>
and function that actually do the blink effect
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
function blink(selector){
$(selector).fadeOut('slow', function(){
$(this).fadeIn('slow', function(){
blink(this);
});
});
}
blink('.blink');
});//]]>
</script>
And after all of those stil ajax call do stop blinking.
This script here has an error in its syntax.
<script>
function reblink() {
$.getScript($('script:first',data).attr('src'), function(){
eval(blink('.blink');); // the (;) is the error
});
//} this closing bracket for the function here is missing
</script>
And here is the correct syntax below.
<script>
function reblink() {
$.getScript($('script:first',data).attr('src'), function(){
eval(blink('.blink'));
});
}
</script>
UPDATE
I can see there in your code that you are not calling reblink() function. And you mentioned also there that you want to call reblink() after ajax, you should put reblink() inside in your .done({}); portion of your ajax like this.
.done(function( response ) { /* update counter */
$('#message-list1').data('counter',response.current);
/* check if with response we got a new update */
if(response.update==true){
$('#message-list1').html(response.news);
var audio = new Audio('ding.mp3');
audio.play();
reblink() // call reblink here to execute
}
});
Related
I have a requirment where in AJAX call has to happen before document.ready and the response from the AJAX call will be used to update some HTML elements.
So I have something like below:
var ajaxget = $.ajax({
type: 'GET',
url:'/xxx/get',
success: function(resp) {
//logic
}
});
$(document).ready(function(){
$.when(ajaxget).done(function(resp) {
//do ur logic
$(documet).trigger("yyyy");
});
});
//the above part is common across pages and placed in the <head>
//below one goes into multiple places based on the pages
$(document).ready(function(){
$(document).on('yyyy', function() {
});
});
The issue is the trigger event "yyyy" doesn't get executed in IE and intermittently on other browsers as well. Please help!
Might be better to use then() instead of success to be sure that whatever happens in success is completed before the $.when.done
Note that success is not part of the promise chain
Try:
var ajaxget = $.ajax({
type: 'GET',
url: '/xxx/get'
}).then(function(resp) {
//logic
return resp;
});
$(document).ready(function() {
ajaxget.then(function(resp) {
//do ur logic
$(documet).trigger("yyyy");
});
});
But also note you are triggering the event before you register it also if the order shown in question is correct
This code works for me. Simply i defined "yyyy" event before triggering.
$(document).ready(function () {
$(document).on("yyyy", function () {
console.log('triggered');
});
$.ajax({
type:'GET',
url:'some.jsp',//your url
success:function(resp){
//logic
$(document).trigger("yyyy");
console.log(resp);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I have a function newCount that I run on Ajax success and it is working OK, however, I want to also run the same function every time the window is reloaded but for some reason I'm unable to call the function with newCount();
my code:
.ajax
$( document ).ajaxComplete(function() {
newCount();
});
.js
function newCount() {
var sum = 0;
$('.myclass').each(function() {
sum += parseFloat($(this).text());
});
// update count in html
$('#myid').html(sum);
}; // end count function
newCount(); // ajax not working when this in place
when I add newCount(); after the function, it will run correctly on page load, but the ajax will no longer work and vice versa.
What am I missing? How can I call the same function from the ajax success and every time the page is loaded?
Hey I've created this Plunker to show you how you should call the functions.
Here is the Javascript code.
<script>
(function(){
function newCount(msg) {
alert("message from: " + msg);
}; // end count function
debugger;
newCount("Page load");
$.get( "data.json", function( data ) {
alert( "Load was performed." );
});
$(document).ajaxComplete(function() {
newCount("ajax complete");
});
})();
EDIT 1
I've changed the Plunker so you can see that also works inside the $.ajax success property.
$.ajax({
url: "data.json",
data: "",
success: function() {
newCount("ajax complete");
}
});
I have a button, where when you click it, it will show the time, wait 5 seconds, show the time again, and then repeats indefinitely. However, if you click the button again, it'll call the function again, so now there are 2 of the ajax calls running at the same time. So instead of waiting 5 seconds and showing the time, since there are 2 of the ajax calls running at the same time. So depending on when you clicked the button on the second time, it may wait for 2 seconds, show the time, wait for 3 seconds, show the time, repeats indefinitely.
I thought of making the button unclickable once it was clicked, but I can't do that because I plan to add to the button other functions other than the ajax setTimeout callback, and that won't work out if I make the button unclickable. So, my question is, is there a way to cancel the first ajax call before calling the second ajax call, somehow?
test1.php
<style>
#output {
width: 25%;
height: 25%;
border: 1px solid black;
}
</style>
<input type = 'submit' value = 'show time' onclick = "showTime('test2.php', 'output')">
<div id = 'output'></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type = "text/javascript">
function showTime(gotoUrl,output) {
$.ajax({
type: "POST",
url: gotoUrl,
error: function(xhr,status,error){alert(error);},
success:function(data) {
document.getElementById( output ).innerHTML = data;
setTimeout(function(){showTime(gotoUrl, output)}, 5000);
} //end of success:function(data)
}); //end of $.ajax
} //end of function ajaxFunc(gotoUrl, output)
</script>
test2.php
<?php
date_default_timezone_set('America/New_York');
$time = date('H:i:s');
echo $time;
?>
This took more than a few edits, but i'm kind of rushing. It should be along these lines:
var $element = $('selector');
//add event handler on click
$element.click(function () {
//set up indefinite ajax call
setInterval(function (){
$.ajax({
url: url,
data: somedata,
method: 'get'
}).done(function (data) {
//do something
});
}, 5000);
//now we can remove the click event from the button
$element.off('click');
});
//now we can add new ones using the reference
$element.on(//do whatever you want);
If you store the response from setTimeout() in a variable you can cancel it next time the button is clicks with the clearTimeout() method.
clearTimeout(myShowTime);
myShowTime = setTimeout(function(){showTime(gotoUrl, output)}, 5000);
You can use xhr.abort(); method to abort the ajax call like this:
var xhr;
function showTime(gotoUrl, output) {
if (xhr) {
xhr.abort();
}
xhr = $.ajax({
type: "POST",
url: gotoUrl,
error: function (xhr, status, error) {
alert(error);
},
success:function (data) {
document.getElementById( output ).innerHTML = data;
setTimeout(function() {
showTime(gotoUrl, output)
}, 5000);
}
});
}
use jQuery .off() to unbind one handler:
http://api.jquery.com/off/
I need to create a div that will auto refresh every 10 seconds, and stop when it successfully loads. I created this jQuery script:
<script type="text/javascript">
$(document).ready(function(){
var j = jQuery.noConflict();
j(document).ready(function()
{
j(".refresh").everyTime(1000,function(i){
j.ajax({
url: "pin.php",
cache: false,
success: function(html){
j(".refresh").html(html);
}
})
})
});
j('.refresh');
});
</script>
It works but the refresh continues every 10 seconds. I need it to stop if pin.php returns a numeric output.
How can I edit it to stop refresh if pin.php returns a numeric output?
From the documentation over at http://www.jquery-plugins.info/jquery-timers-00013992.htm, the function you need is probably stopTime. Although I haven't tested it, the following in your success should work:
success: function(html) {
if (j.isNumeric(html)) {
j(".refresh").stopTime();
} else {
j(".refresh").html(html);
}
}
Try it with an interval like this, it fires till the loaded call is done then it stops the interval and ajaxcal
$(document).ready(function(){
var j = jQuery.noConflict();
jRefresh();
var jRefresh = setInterval(function(){
ajaxCall()
}, 1000);
function ajaxCall() {
j.ajax({
url: "pin.php",
cache: false,
success: function(html){
if (j.isNumeric(html)) {
myStopFunction();
}
}
})
}
function myStopFunction() {
clearInterval(jRefresh);
}
});
first of all you do not need to call $(document).ready() twice. To aviod conflicts you can write code like this :
jQuery(document).ready(function($){
// Your code here
});
Note the $ parameter
Second, I guess it is unuseful to use everytime ( looks like is a plugin and is not a good idea to load a lot of code since you have good alternatives for your needs ) when you can simply call setInterval;
According to your needs and following what i said above, the code should looks like :
jQuery(document).ready(function($){
var interval_time = 10000;
var interval = null;
var $wrapper = $('.refresh');
interval = setInterval(function(){
$.ajax({
url : 'pin.php',
cache : false,
success : function( html ){
if( $.isNumeric( html ) ){
clearInterval( interval );
}
$wrapper.html( html );
}
})
}, interval_time);
});
You can modify your code something like this:
var temp = setInterval(1000,function(i){
j.ajax({
url: "pin.php",
cache: false,
success: function(html){
if(isNaN(html))
j(".refresh").html(html);
}else{temp.clearInterval();}
})
})
You said, "I need it to stop if pin.php returns a numeric output".
if .refresh html contain number than it stop to call ajax call otherwise it make call.
if(isNaN(j(".refresh").html()){
//put your ajax call in this block
}
I have a code like this:
object1 = $.ajax({
..
..
});
In the event of error I want to be able to restart the ajax, for example, if the connection of the user drops I want to be able to call the same ajax again without having to make $.ajax(.....). Is it possible to do something like:
object1.restart();
?
put it in a function:
function callAjax() {
$.ajax({
..
..
});
Then its like callAjax() if theres an error..
That is easy, and jQuery allows you to do that inside an Ajax request. Have a look
$.ajax({
/* full ajax body */
url: 'page.html',
data: 'if-any',
success: function () {
/* show that ajax request has finished */
},
error: function () {
/* restart the ajax request, by re executing the function */
}
});
You can try this:
function ajax_request () {
$.ajax({
/* full ajax body */
url: 'page.html',
data: 'if-any',
success: function () {
/* show that ajax request has finished */
},
error: function () {
ajax_request(); // using this, you can re execute the function
}
});
}
$.when() is a potential candidate here,
for eg.
var object1 = $.ajax({
..
..
});
$.when(object1).fail(object1);