Reload function after Ajax call - javascript

I have a plugin raty (http://wbotelhos.com/raty) that is loaded to document.ready, the page content changes at the click of a button reloading a part of the DOM, and the document is not ready "recalculated" and I will not reload all javascript (there are other similar behavior) I tried this solution but without success
function star(){
alert("star");
...code plugin...
}
$(document).ready(function() {
star();
});
$.ajax({
..code..
done: function(creaStella) {
alert("D");
star();
},
complete:function(){
alert("C");
star();
},
});
After call ajax i have alert("star") but i haven't my div populated

Incorrect usage of $.ajax
$.ajax({
..code..
success: function(creaStella) {
//code to populate div goes here
alert("complete");
star();
}
}).done(function(){
//or here
alert("complete2");
});
use success/done as show (or both).

I resolve in this Way..(promise().done)
also form with jquery validate plugin before dosen't works
function star(){
//plugin star
}
$(document).ready(function() {
formJqueryValidate1();
formJqueryValidate2();
star();
});
function formJqueryValidate1() {
//my check
function formJqueryValidate2() {
//my check
}
$.ajax({
success: function(msg) {
$('#myid').html(msg.template).promise().done(function(){
formJqueryValidate1();
formJqueryValidate2();
star();
});
}
}
});

Related

Run JS Function on Ajax Success & on Page Load

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

Showing a loading div during a jQuery ajax call

Im trying to show a loading div while waiting for an ajax call to complete. I have tried a couple of methods but cant seem to get anything to work consistently.
with my current code it works if i have a break point on the function that shows the div once the ajax is complete.
Fiddle
var https = 'https://www.googleapis.com/calendar/v3/calendars/';
function HideCheckShowLoading(checkId) {
$("#check_" + checkId).hide('slow', function() {
$("#loading_" + checkId).show('slow');
});
};
function HideLoadingShowCheck(checkId) {
$("#loading_" + checkId).finish().hide('slow', function() {
$("#check_" + checkId).finish().show('slow');
});
};
$(document).ready(function() {
$('#get').click(function() {
HideCheckShowLoading(1);
$.ajax({
url: https,
dataType: 'jsonp',
type: "GET",
success: function(response) {
//do something
},
error: function() {
//do something else
}
}).done(function() {
HideLoadingShowCheck(1)
});
});
$('#get2').click(function() {
HideLoadingShowCheck(1);
});
});
#check_1
{
background-color:red;
}
#loading_1
{
background-color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="check_1">Check</div>
<div hidden id="loading_1">LOADING</div>
<button id="get">Get</button>
<button id="get2">Get2</button>
What i would like to happen is,
on the click of a button we hide the check div
we show the loading div
make the ajax call
if successful do something(Reload the contents of the check div)
hide the loading div
show the check div
As said I have tried a few methods that i have found but i repeatedly get stuck with just the loading div shown
Thanks
I believe you may be slightly over-complicating things here. Something simple like this would suffice:
$('#get').click(function() {
HideCheckShowLoading();
$.ajax({
url: https,
dataType: 'jsonp',
type: "GET",
success: function (response) {
//do something
},
error: function() {
//do something else
},
complete: HideLoadingShowCheck
});
});
If you don't want the HideLoadingShowCheck routine to happen after success or error (standard behavior of complete), you can just move a function call HideLoadingShowCheck(); into your success and error blocks instead of using complete.
When you add () to a function name, it calls it immediately and returns the result. What you want to do is pass the function itself, not the result of the function - and you do that without the ().
There's no need for the $.when (assuming HideCheckShowLoading() doesn't make an ajax call, the jquery animations work differently), and $.ajax returns the promise itself, so you can update your code to:
$(document).ready(function() {
$('#get').click(function() {
HideCheckShowLoading();
$.ajax({
url: https,
dataType: 'jsonp',
type: "GET",
success: function (response) {
//do something
},
error: function() {
//do something else
}
})
//.done(HideLoadingShowCheck);
.done(function() { HideLoadingShowCheck(otherparams); })
});
});
I would change the showcheck function to add .finish() incase it's still animating from the showhide:
function HideLoadingShowCheck() {
$("#loading").finish().hide('slow',function () {
$("#check").finish().show('slow');
});
};

JS, jQuery not working when I refresh part of page with Ajax

I have some JS files included in my page that are simple for displaying blocks on click ant etc..
On another part of page, I have a button. When I click it an ajax call is made that returns some values that I display on the page. To display it, I'm reloading part of page like this:
$(document).ready(function () {
$(document).on('click', '.add', function (e) {
$this = $(this);
$.ajax({
type: 'POST',
url: 'add',
dataType: 'JSON',
data: {product: $this.parent('.input-append').find('input').data('id'),quantity: $this.parent('.input-append').find('input').val()},
success: function (data) {
if(data.success == false){
alert('error')
}else{
$('.test').load(" .test");
$('.sidebar').load(" .sidebar");
$('.top').load(" .top");
}
}
});
});
This reloads part of page, displays values and etc..
However, after the ajax call is made, the JS stops working. When I click my buttons, nothing happens. No errors or anything.
I think it has to do with the ajax when I refresh part of twig and it messes up the previously loaded JS files. But what can I do in that situation? Somehow refresh the loaded JS files? How?
You have to attach event listener on button starting from the container which doesn't get reloaded by Ajax request, like this:
//#mainCont is a container that doesn't get reloaded by Ajax
$("#mainCont").on("click", ".yourBtn", function(){
//do something
});
As said #Nacho M, you need to reinit listener from the loaded element, so you hsould have something like this :
function init() {
$(document).on('click', '.yourclass', function (e) {
//your content
}
// add every button who needs to be reloaded.
}
Init them on loading page first :
$("document").ready(function() {
init();
})
And on success of Ajax call :
$.ajax({
type: 'POST',
url: 'add',
dataType: 'JSON',
data: {product: $this.parent('.input-append').find('input').data('id'),quantity: $this.parent('.input-append').find('input').val()},
success: function (data) {
if(data.success == false){
alert('error')
}else{
$('.test').load(" .test");
$('.sidebar').load(" .sidebar");
$('.top').load(" .top");
init();
}
}
});

Ajax complete is fired before success is ready, how can one prevent this behaviour?

I have an AJAX request which fetches a chunk of HTML which I insert into the DOM. While this is happening I am showing a spinner loading gif.
I want the spinner to hide at the exact same time as the data received from the ajax request is inserted into the DOM.
The problem is that the javascript starts executing the complete part before the HTML is actually inserted into the DOM. So for the end user the spinner goes away and a while after, the DOM pops up.
$('#mySpinner').show();
$.ajax({
success: function(data) {
$('#myElement').html(data);
},
complete:(){
$('#mySpinner').hide(); // This is called when the success part is still executing
}
});
EDIT: I'm not saying complete is fired before success. I am saying complete is fired before success is ready. So the order in what happens is this:
Success is called
$('#myElement').html(data); is called
Complete is called
$('#mySpinner').hide() is called
$('#mySpinner').hide() is finished
$('#myElement').html(data); is finished
Just do this then :
$('#mySpinner').show();
$.ajax({
success: function(data) {
$('#myElement').html(data);
$('#mySpinner').hide();
}
});
But the behaviour you describe is not inline with jQuery doc as complete should only occur after success and error ... can you reproduce this wrong behaviour in a jsFiddle ? It might be the problem is somewhere else...
html() runs synchronously, however the browser could still be rendering when the next statement is executed. You could try to add a simple setTimeout to give the browser time to display the added content:
$('#mySpinner').show();
$.ajax({
success: function(data) {
$('#myElement').html(data);
setTimeout(function() {
$('#mySpinner').hide();
}, 0);
},
error: function() {
$('#mySpinner').hide();
}
});
Another option is to add a specific element to the added html and only continue when that element exists:
function waitForDom(el, cb) {
if ($(el).length) {
$(el).remove();
cb();
return;
}
setTimeout(function() {
waitForDom(el, cb);
}, 10);
}
$('#mySpinner').show();
$.ajax({
success: function(data) {
$('#myElement').html(data + '<div id="waitForDom"></div>');
waitForDom("waitForDom", function() {
$('#mySpinner').hide();
});
},
error: function() {
$('#mySpinner').hide();
}
});
You can simply hide your spinner in success part of ajax code:
$('#mySpinner').show();
$.ajax({
success: function(data) {
$('#myElement').html(data);
$('#mySpinner').hide();
}
});

jquery show/hide doesn't wait for completion

I am trying to periodically:
Fetch data from an ajax call
compare the data to the content of a div
if data != content of the div: hide the div, change data, show the div
Here is my code:
...
<div id="myDiv">old data</div>
</body>
<script type="text/javascript">
$(document).ready( function() {
updates();
done();
});
function done() {
setTimeout( function() {
updates();
done();
}, 5000);
}
function replace(div, content){
$(div).html(content)
}
function updates() {
$.ajaxSetup({ cache: false });
$.getJSON("mywebsite/get_data", function(data) {
if ( $("#myDiv").html() !== data ){
$("#myDiv").hide(400, replace("#myDiv", data));
$("#myDiv").show(400);
}
});
}
</script>
...
The problem is that div content is replaced by the new data before the div is completely hidden, even if the callback function replace() is supplied to the hide() function.
How can make the hide() function to wait for its completion (400 ms in this example) before calling the replace() function?
I also tried with delay() and setTimeout() but it does the same thing.
Thanks
I don't think you need that replace function. Anyway this should work:
function updates() {
$.ajaxSetup({ cache: false });
$.getJSON("mywebsite/get_data", function(data) {
if ( $("#myDiv").html() !== data ) {
$("#myDiv").hide(400, function() {
$("#myDiv").html(data);
$("#myDiv").show(400);
})
}
});
}
SEE JSFIDDLE (without ajax call)

Categories

Resources