I have a DIV which is populated from $.get data on doc ready, I then call setInterval every 5 seconds. What im trying to do is on success of the setInterval $.get if the html data for #are_friends is the same as before do nothing but if its different then load the data to #are_friends again.
Does anybody have any idea how I would do this or a better way than Im trying to implement.
<div id="are_friends"></div>
<script type="text/javascript">
$(document).ready(function() {
$.get('<?php echo $siteUrl ?>are_friends.php?userid=<?php echo $userid; ?>', function(data) {
$("#are_friends").html(data);
});
var auto_refresh = setInterval(
function ()
{
$.ajax({
url: "<?php echo $siteUrl ?>are_friends.php?userid=<?php echo $userid; ?>",
success: function(newdata){
var oldcontent = $("#are_friends").html();
if(oldcontent != newdata) {
$("#are_friends").html(newdata);
}
}
});
}, 5000); // refresh every 5000 milliseconds
});
</script>
At least, you could reuse the function getting the data like this:
function getData(callback)
{
$.ajax({
url: "<?php echo $siteUrl ?>are_friends.php?userid=<?php echo $userid; ?>",
success: function(newdata){
callback(newdata);
}
});
}
$(document).ready(function()
{
getData(function(data)
{
$("#are_friends").html(data);
});
var auto_refresh = setInterval(function ()
{
getData(function(newdata)
{
if($("#are_friends").html() != newdata) {
$("#are_friends").html(newdata);
}
});
}, 5000);
});
Practically, the initial call and the subsequent call is the same, so why don't reuse it?
That is related a lot to data you are workign with. Right now you are just producing a lot of useless trafic. I would recommend to send also some marker of current state when you are requesting are_friends.php. PHP will check if something changed using that marker and return "no changes" or updated HTML. Here you should lower server load during if nothing is changed and less trafic(suppose most request will return "no changes"). But again. It depends on what you are doing in are_friends.php, what data do you need etc.
Related
I have an ajax call inside a .each loop wrapped in a setInterval function.
This handles updating of many divs on a dashboard with just a few lines of code on the html page.
I am worried about server lag vs client side speed. What will happen if the server has not responded with the data before the loop moves on to the next iteration?
So, my question is, can the loop be paused until the success is executed?
Ajax call:
setInterval(function() {
$(".ajax_update").each(function(){
$.ajax({
type: "POST",
dataType: "json",
url: "ajax/automated_update/confirmed_appointments.php",
data: "clinic_id=<? echo $clinic_id ?>&tomorrow=<? echo $tomorrow ?>&"+$(this).data('stored'), // serializes the form's elements.
success: function(data)
{
$(data[0]).html(data[1]);
}
});
});
}, 5000); //5 seconds*
</script>
I have looked into .ajaxComplete() but I dont see how to apply this as a solution.
I have also looked at turning the loop into something that calls itself like:
function doLoop() {
if (i >= options.length) {
return;
}
$.ajax({
success: function(data) {
i++;
doLoop();
}
});
}
But would that not interfere with .each? I dont understand how that would play nice with .each and looping based on my div class.
I just cant figure it out! Any help would be appreciated.
I was able to get .when working with the ajax call, but I dont understand how to make .when do what I need (stop the loop until the ajax call is done).
$(".ajax_update").each(function(){
$.ajax({
type: "POST",
dataType: "json",
url: "ajax/automated_update/confirmed_appointments.php",
data: "clinic_id=<? echo $clinic_id ?>&tomorrow=<? echo $tomorrow ?>&"+$(this).data('stored'), // serializes the form's elements.
success: function(data)
{
$(data[0]).html(data[1]);
}
});
$.when( $.ajax() ).done(function() {
alert("Finished it");
});
});
After thinking about your question a bit, perhaps a good solution would be to put an event in place that would trigger a new set of updates with a minimum time between your dashboard updates. This would ensure that all your updates process, that we do wait a minimum time between updates and then trigger the update cycle once again. Thus if you DO encounter any delayed ajax responses you do not try another until the previous one has all completed.
I have not fully tested this code but is should do what I describe:
//create a dashboard object to handle the update deferred
var dashboard = {
update: function (myquery) {
var dfr = $.Deferred();
$.ajax({
type: "POST",
dataType: "json",
url: "ajax/automated_update/confirmed_appointments.php",
data: "clinic_id=<? echo $clinic_id ?>&tomorrow=<? echo $tomorrow ?>&" + myquery,
success: dfr.resolve
});
return dfr.promise();
}
};
//create a simple deferred wait timer
$.wait = function (time) {
return $.Deferred(function (dfd) {
setTimeout(dfd.resolve, time);
});
};
// use map instead of your .each to better manage the deferreds
var mydeferred = $(".ajax_update").map(function (i, elem) {
return dashboard.update($(this).data('stored')).then(function (data, textStatus, jqXHR) {
$(data[0]).html(data[1]);
});
});
//where I hang my dashboardupdate event on and then trigger it
var mydiv = $('#mydiv');
var minimumDashboardUpdate = 5000;
$('#mydiv').on('dashboardupdate', function () {
$.when.apply($, mydeferred.get())
.then(function () {
$.when($.wait(minimumDashboardUpdate)).then(function () {
mydiv.trigger('dashboardupdate');
});
});
});
mydiv.trigger('dashboardupdate');
I'm facing an issue with ajax that several users here also encountered but the proposed solution do not seem to work for my case.
in my index.php file, I have:
<pre>
<script>
function ButtonManager()
{
$( "button" ).click(function()
{
var context = $(this).attr('type');
var page_type = $(this).attr('page');
var referrer = $(this).attr('referrer');
var form_type = $(this).attr('form');
var object_id = $(this).attr('object');
var postData = 'page_type='+page_type+'&form_type='+form_type+'&referrer='+referrer+'&id='+object_id;
$( '#indicator' ).css( "display", "block" );
if (context == 'post_form')
{
var formData = $('#submit_content').serialize();
postData = postData+'&context=post_form&'+formData;
}
if ((context == 'load_form') || (context == 'filter_form'))
{
postData = postData +'&context=load_form';
if (context == 'filter_form')
{
var filter1 = $('select[name=filter1]').val();
var filter2 = $('select[name=filter2]').val();
var filter3 = $('select[name=filter3]').val();
postData = postData + '&filter1='+filter1+'&filter2='+filter2+'&filter3='+filter3;
}
}
$.ajax
({
type: 'POST',
url: 'php/sl.php',
data: postData,
cache: false,
async: false,
dataType: 'html',
success: function(result)
{
ManageLayer(form_type+'_content');
$('#'+form_type+'_content').html(result);
$( '#indicator' ).css( "display", "none" );
},
error: function(XMLHttpRequest, textStatus, errorThrown)
{
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.responseText);
$( '#indicator' ).css( "display", "none" );
},
});
});
}
</script>
<button type="load_form" page="home" referrer="navigation" form="edit" object="">test</button>
</pre>
when a click on the test button, the script calls sl.php to retrieve some html with other buttons in it.
in the output I get from the server I have added:
<pre>
<script>
var myvar=ButtonManager();
</script>
<button type="post_form" page="home" referrer="navigation" form="edit" object="">test2</button>
</pre>
The goal of the ButtonManager function is to manage all my buttons in one function so it needs to be available/known everywhere (in index.php where it's loaded and in all the output I can get from sl.php).
I have added the var myvar=ButtonManager() line because it's the only way I have found to make sure the function is known by the server output. The drawback is that the function is executed multiple times instead of one even if I don't click on the test2 button.
So I'm looking either for a way to prevent my function from being executed multiple times or an alternative to make the function available everywhere.
I don't know what approach would be the best, I'm a casual developper programming for fun and javascript / ajax is not the language I know the best.
Thanks
Laurent
I got the answer from another forum but I wanted to share it in case others are having the same problem.
Code to be used should be like this:
<pre>
$( document ).on("click", "button", function() {
</pre>
It makes the function available to objects that do not exist yet.
I can not get the data passing from the controller ajax me there any solution?
button click action
$(".bajaAlumno").click(function () {
var urlform = "<?php echo $this->url(null, array('controller'=>'Academius','action' =>'bajaAlumnos' ) ); ?>";
var dato= $(this).attr('id');
var myData = {textData:dato};
$.ajax({
type:"POST",
url:"/Academius/bajaAlumnos",
data:{data:myData},
success: function(data){
//The callback function, that is going to be executed
//after the server response. data is the data returned
//from the server.
// Show the returned text
//$("#answer").text(data.text);
//$("#answer").text(data.text);
alert('enviado');
}
});
});
and controller
public function bajaAlumnosAction()
{
die(var_dump($this->params()->fromPost()));
}
one answer?
Is there a way to load external data into jqplot with async call?
I want a live graph that updates every minute, but with async:false the page freezez every time when the data is recieving from server.
The reason it was done that way in the example was for simplicity's sake. The following is an async reworking of this:
var plot2 = null;
function fetchAjaxData(url, success) {
$.ajax({
url: url,
dataType:"json",
success: function(data) {
success(data);
console.log('loaded');
}
});
}
function createPlot(url) {
fetchAjaxData(url, function(data) {
if (plot2 == null) {
plot2 = $.jqplot('chart2', data, {
title: "AJAX JSON Data Renderer"
});
} else {
plot2.replot({data: data});
console.log('replotting');
}
});
}
$(document).ready(function(){
var jsonurl = "./jsondata.txt";
//Regenerate the plot on button click.
$('#ajax-button').click(function() {
createPlot(jsonurl);
});
//Generate the plot first time through.
createPlot(jsonurl);
});
And with HTML:
<div id="chart2" style="height:300px; width:500px;"></div>
<button id="ajax-button">Ajax retrieve</button>
So what this does is asynchronously fetch the data and plot it when the Ajax call succeeds. To keep it simple I am just reloading that same text file, though this could easily be adapted to scenarios where you are plotting a live data stream.
I am creating a simple wordpress plugin and trying to use AJAX, but I always get 0 in ajax response.
<script type="text/javascript" >
jQuery(document).ready(function($) {
var data = {
action: 'my_action',
whatever: '1234'
};
jQuery.post("http://localhost/taichi/wp-admin/admin-ajax.php", data, function(response) {
alert(response);
});
});
</script>
<?php
add_action('wp_ajax_my_action', 'my_action_callback');
add_action( 'wp_ajax_nopriv_my_action', 'my_action_callback' );
function my_action_callback() {
echo "test";
die();
}
what am I doing wrong?
You have to put the add_action at the complete bottom of your file or else it won't find the callback function
Try to change :
jQuery.post("http://localhost/taichi/wp-admin/admin-ajax.php", data, function(response)
To :
jQuery.post(ajaxurl, data, function(response)
And check if it is working on the admin side first. It should work fine.
Error Return Values
If the AJAX request fails when the request url is wp-admin/admin-ajax.php, it will return either -1 or 0 depending on the reason it failed.
Read this
Edit
admin-ajax always return default '0' as output.so while you alerting response you will 0 only.using die() in callback function will terminate that.
Had the same problem, it turned out that my callback was inside a php file which was only included to my "Theme Options" page.
To check if the function is able to trigger trougth admin-ajax.php try to add var_dump(function_exists("your_callback_name")); to the bottom of the wp-admin/admin-ajax.php (before die( '0' );) and then have a look to your ajax output.
Try the following code in your plugin file. or in function.php
jQuery(document).ready(function($){
var ajaxURL = 'http://localhost/taichi/wp-admin/admin-ajax.php';
var dataString = 'action=mnd_news';
$.ajax({
type: "POST",
url: ajaxURL,
data: dataString,
cache: false,
success: function(response){
if(response != 'error') {
alert(response);
}
}
});
});
add_action('wp_ajax_mnd_news', 'get_mnd_ajax');
add_action( 'wp_ajax_nopriv_mnd_news', 'get_mnd_ajax' );
function get_mnd_ajax() {
echo "test";
die();
}