I am creating a framework that allows me to start with a normal static website then if the user has Javascript enabled transforms it into a single page site that pulls in sections from the static pages as the user navigates the site.
I'm still working on the ideas but I'm struggling understanding how to execute Javascript functions in a certain order my code (edited) looks a like this:
EDIT My code in more detail:
When the loadSiteMap() function completes the variable siteMap looks like this:
{
"pageData" : [
{
"loadInTo" : "#aboutUs",
"url" : "aboutUs.html",
"urlSection" : ".sectionInner"
},
{
"loadInTo" : "#whatWeDo",
"url" : "whatWeDo.html",
"urlSection" : ".sectionInner"
},
{
"loadInTo" : "#ourValues",
"url" : "ourValues.html",
"urlSection" : ".sectionInner"
},
{
"loadInTo" : "#ourExpertise",
"url" : "ourExpertise.html",
"urlSection" : ".sectionInner"
}
]
}
The rest of my code:
function loadSiteMap() {
$('#body').empty();
$.ajaxSetup({cache : false});
$.ajax({
url: 'js/siteMap.js',
async: false,
dataType: 'json'
})
.done(function(data){
siteMap = data;
})
.fail(function(jqXHR, status){
alert('Its all gone to shit');
});
}
loadSiteMap();//So this is the first to be executed
$(function(){
function loadDataFromSiteMap() {
var toAppend = '';
var markerID = 'mark-end-of-append' + (new Date).getTime();
var loadGraphic = '<img src="images/loadGraphic.gif" alt="loading..." class="loadGraphic" />'
for(var i=0; i<siteMap.pageData.length; i++) {
var loader = siteMap.pageData[i];
toAppend += '<div id="'+ loader.loadInTo.substr(1) +'" class="sectionOuter">'+ loadGraphic +'</div>';
}
toAppend += '<div id="' + markerID + '"></div>';
$('#body').append(toAppend);
var poller = window.setInterval(function(){
var detected = document.getElementById(markerID);
if(detected){
window.clearInterval(poller);
$(detected).remove();
for(var i=0; i<siteMap.pageData.length; i++){
var loader = siteMap.pageData[i];
var dfd = $.ajax({
url: loader.url,
async: false
});
dfd.done(function(data, status, jqXHR){
var sections = $(data).find(loader.urlSection);
$(loader.loadInTo).html(sections).filter(loader.urlSection);
});
dfd.fail(function(jqXHR, status){
alert('Its all gone to shit');
});
}
}
}, 100);
}
function buildCarousel() {
$('.sectionInner').each(function(i) {
if($(this).has('.carousel').length) {
$(this).append('PrevNext');
$('.prev,.next').fadeIn('slow');
}
});
};
loadDataFromSiteMap();//This runs second then I want to execute...
buildCarousel();//Then when this is complete execute...
anotherFunction();//and so on...
Hopefully from this you can see what I am trying to achieve in terms of executing functions in order. I would like to eventually turn this concept into a jQuery plugin so I can share it. If that has any bearing on what I am trying to achieve now I welcome thoughts.
Many thanks in advance.
I think AJAX is one of the only times you'll have to worry about functions not running in a certain order in JavaScript.
The trick to asynchronous function calls like AJAX is to make use of callbacks. Put everything in the "Doc ready" section into another callable function (or just an anonymous function in the AJAX complete code), then call this function only when your AJAX call completes. The reason being that the rest of your program will go on executing while the AJAX call is being processed, so callbacks insure the AJAX call is done before continuing what you want to execute next.
If any of these other functions are asynchronous then you'll have to similarly make a callback on completion that will continue executing the rest of the functions.
As it stands, though, I see no reason every function but the AJAX one should not be called in order. At least, not without knowing how those functions work.
Edit: A code example of a callback:
$.ajax({
url: 'ajax/test.html',
success: function(data) {
//Set sitemap
(function() {
//Make the calls to your list of functions
})(); //<- Execute function right away
}
});
Also, according to here, async: false will not work on 'Cross-domain requests and dataType: "jsonp" requests', so if you're calling a different domain or using jsonp that might be the problem.
Related
Im using the following function to call an ajax request, and fill certain corresponding divs with the response:
$( function() {
$(document).ready(function() {
var postData = "";
$.ajax( {
url : \'functions/ajax_api.php?\',
type : \'post\',
data : postData,
success : function( resp ) {
$(\'#id1\').html($(\'#id1\' , resp).html());
$(\'#id2\').html($(\'#id2\' , resp).html());
}
});
return false;
});
});
The function works fine. My question is how can I call it automatically every few seconds?
I tried using window.setTimeout(function, 3000) but I couldnt set it up correctly.
use setInterval(); instead of .setTimeout()
Let me help you a little bit with that
var interval , setItinterval; // just a variables you can change names
interval = function(){
// ajax code here
}
to run it .. use:
setItinterval = setInterval(interval , 3000);
to stop it .. use
clearInterval(setItinterval);
Make sure to read setInterval for more information.
For Complete answer and Last thing I want to say when using setInterval(); Its better to use visibilitychange to avoid server error , server load or something like that
document.addEventListener('visibilitychange',function(){
if(document.visibilityState == 'visible'){
// user view the page
}else{
// user not see the page
}
});
You can use setTimeout() or setInterval, but setInterval may result in multiple simultaneous ajax calls if those calls take too long to respond. That isn't a problem if you call setTimeout() in the ajax success callback.
To use setTimeout(), first wrap your ajax call in a function. You can then add a call to setTimeout() to the ajax success callback. You also need to call the function once to start of the looping.
$(function() {
function postData() {
var postData = "";
$.ajax({
url: 'functions/ajax_api.php?',
type: 'post',
data: postData,
success: function(resp) {
$('#id1').html($('#id1', resp).html());
$('#id2').html($('#id2', resp).html());
// Call postData again after 5 seconds.
setTimeout(function() { postData(); }, 5000);
}
});
}
// Call postDate the first time to start it off.
postData();
});
Note: With the call to setTimeout in the success callback, the cycle will break if an ajax call fails. You may want that, but if you want it to act more like setInterval, you can place the call to setTimeout in the complete callback.
Here's some example code that will do it (note that it runs the function when the document loads, and then starts the interval). You can always use clearInterval(refresh_interval) if you need to stop it.
var refresh_interval;
function update_content() {
$.ajax({
url : \'functions/ajax_api.php?\',
type : \'post\',
data : postData,
success : function( resp ) {
$(\'#id1\').html($(\'#id1\' , resp).html());
$(\'#id2\').html($(\'#id2\' , resp).html());
}
});
}
$(document).ready(function() {
update_content();
setInterval(update_content, 3000);
}
The relevant documentation for using intervals is here: https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval
Though you may want to look into Server Sent Events, it's probably a better solution for what you want.
I have comment system using live ajax php, and also include for vote system on that comment
Logic: when i post new comment, system will call ajax function with method post, and display response in above of textarea for comment, that response is include vote system (a class="with_unique_id"), but when i click that vote, it wont calling ajax function (nothing happend in browser console), whereas in current comment that displaying in above of new comment, it working fine.
This is my ajax code for vote
jQuery(document).ready(function($){
$(".voteMe").click(function() {
var voteId = this.id;
var upOrDown = voteId.split('_');
$.ajax({
type: "post",
url: "<?php echo base_url('blog/likepost');?>/"+upOrDown[0],
cache: false,
data:'voteId='+upOrDown[0] + '&upOrDown=' +upOrDown[1],
success: function(response){
try{
if(response=='true'){
var newValue = parseInt($("#"+voteId+'_result').text()) + 1;
$("#"+voteId+'_result').html(newValue);
document.getElementById('likeStatus_'+upOrDown[0]).innerHTML = 'Success';
$("#likeStatus_"+upOrDown[0]).show();
setTimeout(function() { $("#likeStatus_"+upOrDown[0]).hide(); }, 5000);
}else{
$("#likeStatus_"+upOrDown[0]).show();
document.getElementById('likeStatus_'+upOrDown[0]).innerHTML = 'Liked';
setTimeout(function() { $("#likeStatus_"+upOrDown[0]).hide(); }, 5000);
}
}catch(err) {
alert(err.message);
}
},
error: function(){
alert('Error while request..');
}
});
});
});
It took me a while to read your code, but I guess this is the root cause:
if(response=='true'){
var newValue = parseInt($("#"+voteId+'_result').text()) + 1;
$("#"+voteId+'_result').html(newValue);
document.getElementById('likeStatus_'+upOrDown[0]).innerHTML = 'Success';
$("#likeStatus_"+upOrDown[0]).show();
setTimeout(function() { $("#likeStatus_"+upOrDown[0]).hide(); }, 5000);
}
This line here:
$("#"+voteId+'_result').html(newValue);
That become the link you want to click again. Right?
If that is so, then you need to re-assign the event handler.
By replacing the DOM element, you have also removed the assigned event handler
PS: You code is very hard to read. It will be nightmare for you to maintain it.
i have fixed my code with adding same ajax code function in response of current ajax with different id.
thankyou
I am trying to make a ajax call back to a Drupal 7. The problem I am encountering is that the url I want to use to make the callback is appended to the current page the user is viewing. I am not sure why this is happening and am wondering if some can point out my error for me. Here is the javascript code I am using to make the call:
(function($) {
function todaysHours(context) {
var callbackFunction = window.location.host +'/' + Drupal.settings.library_hours.callbackFunction,
content = $("#todays-hours").find(".block");
nIntervId = setInterval(checkTime, 300000);
function checkTime() {
request = $.ajax({
url: callbackFunction,
dataType: "json",
type: "GET"
});
request.done(function( result ) {
content.text(result[0].data);
})
}
}
Drupal.behaviors.library_hours = {
attach: function(context) {
todaysHours(context);
}
}
})(jQuery);
The url I expect to use is http://mydomain.com/ajax/get-time but what is actually being used in the ajax call is http://mydomain.com/current-page/mydomain.com/ajax/get-time even though the callbackfunction variable is set to mydomain.com/ajax/get-time.
Why is this happening and how do I fix it? Thanks.
Problem:
Protocol is not defined in the url
Solution:
update the following part in the code
(function($) {
function todaysHours(context) {
var callbackFunction = '//'+window.location.host +'/' + Drupal.settings.library_hours.callbackFunction,
// rest code
})(jQuery);
I have the following piece of code. Interval is set to 10sec.
(function($){
$(document).ready(function() {
disp_log();
setInterval(function () {
disp_log();
}, 10 * 1000);
function disp_log() {
$.ajax({
"type" : "GET",
"url" : "/get_log/",
"dataType" : "json",
"cache" : false,
"success" : function(json) {
data=""
for(var j = 0; j < json.length; j++) {
data+="<tr><td>"+json[j]+"</td></tr>"
}
$("#log").html(data);
}
})(jQuery);
}
});
})(django.jQuery);
But refreshing dosen't happen. Can someone plz tell why?
The thing you need to do here is debug. First of all work out if you are getting any code back at all. You can do this by using....
"success" : function(json) {
console.log(json);
//or..
alert(json);
}
If they don't return anything, then your AJAX request is the problem, not your setInterval code.
However on your setInterval code, you should know that the ajax call could take any time to load, so you shouldn't just keep running it. A better way would be to use setTimeout....
setTimeout(disp_log,10*1000);
Then, inside your success function, put that same code in again...
"success" : function(json) {
setTimeout(function() {
disp_log()
},10*1000);
}
This will ensure that your code keeps running 10 seconds after the last time the data was successful. There are other issues to consider (how you keep the script running if the ajax call fails, for example) but this will ensure you don't end up getting out of sync with your server requests!
You have an error here : $.ajax does not return you something to call jQuery on. No need for that (jQuery)
Use it as below.
setInterval(disp_log, 10 * 1000);
if you function is in global then use it as
setInterval("disp_log()", 10 * 1000);
also you don't need (jQuery) after end of ajax call.
And more important you have (function($){ and $(document).ready(function() {.
You don't need it because both are same use either one.
Working Tested Code
<script type="text/javascript">
$(document).ready(function()
{
disp_log();
setInterval(disp_log, 10 * 1000);
function disp_log()
{
$.ajax({
"type" : "GET",
"url" : "/get_log/",
"dataType" : "json",
"cache" : false,
"success" : function(json)
{
var data;
for(var j = 0; j < json.length; j++)
{
data+="<tr><td>"+json[j]+"</td></tr>"
}
$("#log").html(data);
}
});
}
});
</script>
PROBLEM MAY BE OF THE BROWSER
I had a problem using this setInterval() function, but later I found it was the problem of my mozilla. When I tried to run in Chrome, it was perfect.
I want a basic spinner or processing animation while my AJAX POST is processing. I'm using JQuery and Python. I looked at the documentation but can't figure out exactly where to put the ajaxStart and ajaxStop functions.
Here is my js:
<script type="text/javascript">
$(function() {
$('.error').hide();
$("#checkin-button").click(function() {
var mid = $("input#mid").val();
var message = $("textarea#message").val();
var facebook = $('input#facebook').is(':checked');
var name = $("input#name").val();
var bgg_id = $("input#bgg-id").val();
var thumbnail = $("input#thumbnail").val();
var dataString = 'mid='+mid+'&message='+message+'&facebook='+facebook+'&name='+name+'&bgg_id='+bgg_id+'&thumbnail='+thumbnail;
$.ajax({
type: "POST",
url: "/game-checkin",
data: dataString,
success: function(badges) {
$('#checkin-form').html("<div id='message'></div><div id='badges'></div>");
$('#message').html("<h2><img class=\"check-mark\" src=\"/static/images/check-mark.png\"/>You are checked in!</h2>");
$.each(badges, function(i,badge) {
$('#badges').append("<h2>New Badge!</h2><p><img class='badge' src='"+badge.image_url+"'><span class='badge-title'>"+badge.name+"</span></p>");
});
}
});
return false;
});
});
</script>
$.ajax({
type: "POST",
url: "/game-checkin",
data: dataString,
beforeSend: function () {
// ... your initialization code here (so show loader) ...
},
complete: function () {
// ... your finalization code here (hide loader) ...
},
success: function (badges) {
$('#checkin-form').html("<div id='message'></div><div id='badges'></div>");
$('#message').html("<h2><img class=\"check-mark\" src=\"/static/images/check-mark.png\"/>You are checked in!</h2>");
$.each(badges, function (i, badge) {
$('#badges').append("<h2>New Badge!</h2><p><img class='badge' src='" + badge.image_url + "'><span class='badge-title'>" + badge.name + "</span></p>");
})
}
});
http://api.jquery.com/jQuery.ajax/:
Here are the callback hooks provided by $.ajax():
beforeSend callback is invoked; it receives the jqXHR object and the settings map as parameters.
error callbacks are invoked, in the order they are registered, if the request fails. They receive the jqXHR, a string indicating the error type, and an exception object if applicable. Some built-in errors will provide a string as the exception object: "abort", "timeout", "No Transport".
dataFilter callback is invoked immediately upon successful receipt of response data. It receives the returned data and the value of dataType, and must return the (possibly altered) data to pass on to success.
success callbacks are then invoked, in the order they are registered, if the request succeeds. They receive the returned data, a string containing the success code, and the jqXHR object.
complete callbacks fire, in the order they are registered, when the request finishes, whether in failure or success. They receive the jqXHR object, as well as a string containing the success or error code.
Note the beforeSend and complete method additions to the code.
Hope that helps.
If you're using jQuery 1.5 you could do that nicely, unobtrusively and generically with a prefilter. Let's make a very simple plugin for this:
(function($) {
var animations = {};
$.ajaxPrefilter(function( options, _, jqXHR ) {
var animation = options.animation && animations[ options.animation ];
if ( animation ) {
animation.start();
jqXHR.then( animation.stop, animation.stop );
}
});
$.ajaxAnimation = function( name, object ) {
if ( object ) {
animations[ name ] = object;
}
return animations[ name ];
};
})( jQuery );
You install an animation as follows:
jQuery.ajaxAnimation( "spinner" , {
start: function() {
// code that starts the animation
}
stop: function() {
// code that stops the animation
}
} );
then, you specify the animation in your ajax options:
jQuery.ajax({
type: "POST",
url: "/game-checkin",
data: dataString,
animation: "spinner",
success: function() {
// your success code here
}
});
and the prefilter will ensure the "spinner" animation is started and stopped when needed.
Of course, that way, you can have alternative animations installed and select the one you need per request. You can even set a default animation for all requests using ajaxSetup:
jQuery.ajaxSetup({
animation: "spinner"
});
The best method I have found, assuming you are populating a present but empty field is to have a .loading class defined with background-image: url('images/loading.gif') in your CSS. You can then add and remove the loading class as necessary with jQuery.
you can set global ajax loading icon handler using here #ajxLoader takes your loading icon
$( document ).ajaxStart(function() {
$("#ajxLoader").fadeIn();
});
$( document ).ajaxComplete(function() {
$("#ajxLoader").fadeOut();
});
$(function() {
$('.error').hide();
$("#checkin-button").click(function() {
var mid = $("input#mid").val();
var message = $("textarea#message").val();
var facebook = $('input#facebook').is(':checked');
var name = $("input#name").val();
var bgg_id = $("input#bgg-id").val();
var thumbnail = $("input#thumbnail").val();
var dataString = 'mid=' + mid + '&message=' + message + '&facebook=' + facebook + '&name=' + name + '&bgg_id=' + bgg_id + '&thumbnail=' + thumbnail;
$.ajax({
type : "POST",
url : "/game-checkin",
data : dataString,
beforeSend : function() {
$('#preloader').addClass('active');
},
success : function(badges) {
$('#preloader').removeClass('active');
$('#checkin-form').html("<div id='message'></div><div id='badges'></div>");
$('#message').html("<h2><img class=\"check-mark\" src=\"/static/images/check-mark.png\"/>You are checked in!</h2>");
$.each(badges, function(i, badge) {
$('#badges').append("<h2>New Badge!</h2><p><img class='badge' src='" + badge.image_url + "'><span class='badge-title'>" + badge.name + "</span></p>");
});
},
complete : function() {
$('#preloader').removeClass('active');
}
});
return false;
});
});
#preloader{
background: url(staticpreloader.gif);
}
.active {
background: url(activepreloader.gif);
}
I wrote a blog post about how to do this on a generic document level.
// prepare the form when the DOM is ready
$(document).ready(function() {
// Setup the ajax indicator
$('body').append('<div id="ajaxBusy"><p><img src="images/loading.gif"></p></div>');
$('#ajaxBusy').css({
display:"none",
margin:"0px",
paddingLeft:"0px",
paddingRight:"0px",
paddingTop:"0px",
paddingBottom:"0px",
position:"absolute",
right:"3px",
top:"3px",
width:"auto"
});
});
// Ajax activity indicator bound to ajax start/stop document events
$(document).ajaxStart(function(){
$('#ajaxBusy').show();
}).ajaxStop(function(){
$('#ajaxBusy').hide();
});
The AJAX process starts when you run the $.ajax() method, and it stops when the 'complete' callback is run. So, start your processing imagery/notification right before the $.ajax() line, and end it in the 'complete' callback.
ajaxStart and ajaxStop handlers can be added to any elements, and will be called whenever ajax requests start or stop (if there are concurrent instances, start only gets called on the first one, stop on the last to go). So, it's just a different way of doing global notification if you had, for example, a status spinner somewhere on the page that represents any and all activity.