Preload that waits for a function to execute - javascript

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

jQuery remove DropZone.js thumbnail after deleting file

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;
}
});
},

How to repeat ajax request depending return

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();
});

query clearInterval when variable is "x"

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) {}

how to make ajax synchronous? [duplicate]

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;
}

Call JS function with attributes from another function

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.

Categories