I'm working on a preload for an article abstracts page. I manage to get the preload to show, but the first time the page loads, the preload disappears before the article summaries are fully loaded. It takes about 5 seconds for summaries to load after the preload disappears. Behavior that is not wanted.
The second time onwards it works as desired
$(window).on("load", function () {
var p2 = new Promise(function (resolve, reject) {
resolve(1);
});
p2.then(function (value) {
$('#preloader .inner').fadeOut();
return value + 1;
}).then(function (value) {
PegaListaPosts();
return value + 1;
}).then(function (value) {
$('#preloader').delay(10).fadeOut('slow');
return value + 1;
}).then(function (value) {
$('body').delay(10).css({ 'overflow': 'visible' });
});
//$('#preloader .inner').fadeOut();
//var con = await PegaListaPosts();
//$('#preloader').delay(10).fadeOut('slow');
//$('body').delay(10).css({ 'overflow': 'visible' });
});
function PegaListaPosts() {
$.ajax({
url: "/Blog/PegaResumoPost",
type: "GET",
datatype: "json",
contenttype: "application/json; charset=utf-8",
success: function (data) {
var lista = data.resumosPosts;
if (data.culturaAtual == 2) {
CarregarResumos(lista, data.culturaAtual);
}
else if (data.culturaAtual == 1) {
CarregarResumos(lista, data.culturaAtual);
}
else {
CarregarResumos(lista, data.culturaAtual);
}
},
});
}
I solved the problem as follows.
I put the "PegaListaPosts()" function in Window onload, and inside the called function, I call the preload functions.
The code was like this:
$(window).on("load", function () {
PegaListaPosts();
});
function PegaListaPosts() {
$('#preloader .inner').fadeOut();
$.ajax({
url: "/Blog/PegaResumoPost",
type: "GET",
datatype: "json",
contenttype: "application/json; charset=utf-8",
success: function (data)
{
var lista = data.resumosPosts;
if (data.culturaAtual == 2) {
CarregarResumos(lista, data.culturaAtual);
}
else if (data.culturaAtual == 1) {
CarregarResumos(lista, data.culturaAtual);
}
else {
CarregarResumos(lista, data.culturaAtual);
}
$('#preloader').delay(10).fadeOut('slow');
$('body').delay(10).css({ 'overflow': 'visible' });
},
error: function () {
$('#preloader').delay(10).fadeOut('slow');
$('body').delay(10).css({ 'overflow': 'visible' });
alert('Não foi possível carregar os resumos dos posts!');
}
});
}
With this, the preload only disappears when the article summaries have all been loaded.
Related
We have more option into DropZone.js such as removedFile. In this Javascript script, I try to remove DropZone thumbnail after deleting file from server. Removing file from server works fine, but I can't detach thumbnails
<script type="text/javascript">
var DropzoneUp = function () {
var _componentDropzone = function () {
if (typeof Dropzone == 'undefined') {
console.warn('Warning - dropzone.min.js is not loaded.');
return;
}
// Multiple files
Dropzone.options.dropzoneMultiple = {
paramName: "file",
//...
params: {
prefixFile: '{{csrf_token()}}'
},
removedfile: function (file) {
jQuery.ajax({
//...
dataType: "json",
success: function (data) {
}
});
}
};
};
return {
init: function () {
_componentDropzone();
}
}
}();
DropzoneUp.init();
</script>
How can I do that and how can I remove thumbnails?
My problem solved by this code in success call back function:
removedfile: function (file) {
jQuery.ajax({
//...
type: "POST",
dataType: "json",
success: function (data) {
let _ref;
return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
}
});
},
I have this code :
.on('finish.countdown', function() {
var onEndAuction = function () {
$.ajax({
type: "POST",
url: "{{path('app_auction_end')}}",
data: {auctionId:{{ aReturn.oAuction.getId()}}},
success: function (data) {
console.log(data);
if (data == 0) {
setTimeout(onEndAuction, i_timer);
} else {
document.location.reload(true);
}
}
});
};
});
I want if data == 0 need to make another call on app_auction_end after 10 sec. Can you help me please ? Thx in advance and sorry for my english
Give the operation a named function:
var someFunction = function () {
$.ajax({
//...
});
};
Which you would then use for your .on() call:
.on('finish.countdown', someFunction)
And in the success handler, set a timeout for that function:
if (data == 0) {
setTimeout(someFunction, i_timer);
}
.on('finish.countdown', function() {
var onEndAuction = function () {
$.ajax({
type: "POST",
url: "{{path('app_auction_end')}}",
data: {auctionId:{{ aReturn.oAuction.getId()}}},
success: function (data) {
console.log(data);
if (data == 0) {
setTimeout(onEndAuction, i_timer);
} else {
document.location.reload(true);
}
}
});
};
//do our initial call otherwise it will never get called.
onEndAuction();
});
I have made a function that is controlling a row in a my database for a certain number with AJAX.
Im calling the function with a click function and putting the function in a setInterval function to make the check 10 times a second.
In the beginning it will return 0, but at some point (usually within 5 seconds) it will return something els than 0, when it does i want to clearInterval.
But im not sure how to this?
This is my function:
function get_buzzer() {
$.ajax({
url: 'ajax_buzzer.php',
dataType: 'json',
async: false,
type: 'post',
data: {
job: 'get'
},
success:function(s) {
if(s['number'] == 0) {
var player = false;
} else {
var player = true;
}
}, error:function(e) {
}
});
}
$(document).ready(function() {
$('#test').click(function() {
var buzzer = setInterval("get_buzzer()",100);
});
});
You can do something like
$(document).ready(function () {
//make buzzer a share variable
var buzzer;
$('#test').click(function () {
buzzer = setInterval(get_buzzer, 100);
});
function get_buzzer() {
$.ajax({
url: 'ajax_buzzer.php',
dataType: 'json',
async: false,
type: 'post',
data: {
job: 'get'
},
success: function (s) {
if (s['number'] != 0) {
//if number is not 0 then clear the interval
clearInterval(buzzer)
}
},
error: function (e) {}
});
}
});
Try this : declare global variable to store interval and call window.clearInterval in success call of ajax
var buzzer;
function get_buzzer() {
$.ajax({
url: 'ajax_buzzer.php',
dataType: 'json',
async: false,
type: 'post',
data: {
job: 'get'
},
success:function(s) {
if(s['number'] == 0) {
var player = false;
} else {
var player = true;
//clear interval
window.clearInterval(buzzer);
}
}, error:function(e) {
}
});
}
$(document).ready(function() {
$('#test').click(function() {
buzzer = setInterval("get_buzzer()",100);
});
});
Use:
inside success use: And make var buzzer Gloval var.
clearInterval(buzzer);
Refence
You just need to clear the interval in the success handler of ajax call over a condition.
success: function (s) {
if (s['number'] != 0) {
//if number is not 0 then clear the interval
clearInterval(buzzer)
}
},
error: function (e) {}
This question already has answers here:
How do I return the response from an asynchronous call?
(41 answers)
How can I get jQuery to perform a synchronous, rather than asynchronous, Ajax request?
(14 answers)
Closed 9 years ago.
How do I make function out of this?
//check if station is alive
$.ajax({
url: "lib/grab.php",
data: "check_live=1&stream_url="+valueSelected,
type: "GET",
success: function (resp) {
if (resp == 1) {
play_this(valueSelected);
} else {
//
}
},
error: function (e) {
console.dir(e);
}
});
I thought I could do something like this:
function is_alive(valueSelected) {
result = false;
//check if station is alive
$.ajax({
url: "lib/grab.php",
data: "check_live=1&stream_url="+valueSelected,
type: "GET",
success: function (resp) {
if (resp == 1) {
result = true;
} else {
//
}
},
error: function (e) {
console.dir(e);
}
});
return result;
}
But obviously due to asynchronous nature of ajax call, result always returns false.
What is the trick of dealing with this situation?
Seems to work:
//check if station is alive
function is_alive(url) {
//
var result = false;
//
return $.ajax({
url: "lib/grab.php",
data: "check_live=1&stream_url="+url,
type: "GET",
success: function (resp) {
if (resp == 1) {
//
result = true;
//
}
},
error: function (e) {
console.dir(e);
}
}).then(function() {
return $.Deferred(function(def) {
def.resolveWith({},[result,url]);
}).promise();
});
}
And call it like this:
//Change song on select, works both for fav and station lists
$(document).on("click", ".ui-listview li a", function(){
var valueSelected = $(this).data("station-url");
//
is_alive(valueSelected).done(function(result,url){
if (result) {
//
play_this(valueSelected);
//
}
});
});
You don't have to make it synchronous to make it a useful function.
function is_alive(valueSelected) {
//check if station is alive
return $.ajax({
url: "lib/grab.php",
data: "check_live=1&stream_url=" + valueSelected,
type: "GET",
error: function (e) {
console.dir(e);
}
});
}
is_alive(somevalue).then(function(result){
console.log(result, somevalue);
});
You can supply the async: false option
function is_alive(valueSelected) {
result = false;
//check if station is alive
$.ajax({
async: false,
url: "lib/grab.php",
data: "check_live=1&stream_url="+valueSelected,
type: "GET",
success: function (resp) {
if (resp == 1) {
result = true;
} else {
//
}
},
error: function (e) {
console.dir(e);
}
});
return result;
}
First of all i am not good enough in js.
I have two function in a page and i have to call another function in an existing function.
I have=>
function suggest1(inputString){
if(inputString.length == 0) {
$('#suggestions1').fadeOut();
}
else{
$('#p_name').addClass('load');
$.post("autosuggest.php", {queryString: ""+inputString+""}, function(data)
{
if(data.length >0)
{
$('#suggestions1').fadeIn();
$('#suggestionsList1').html(data);
$('#p_name').removeClass('load');
}
});
}
}
function fill1(thisValue) {
$('#p_name').val(thisValue);
$('#p_nameA').val(thisValue);
setTimeout("$('#suggestions1').fadeOut();", 100);
}
This is an auto suggest function
Ineed to call function which is bellow, which can use the value of $('#p_name').val(thisValue); in var name_tast. Is it possible or not?
function getAccaounce()
{
var name_tast = document.getElementById("p_nameA").value;
$.ajax({
type: "POST",
url: 'ajax_accaounce.php',
dataType: 'json',
data: {
'p_nameA': name_tast,
},
success: function(data)
{
$('#available1').html(data.message1);
$('#price1').html(data.message2);
}
});
}
Thanks in advance.