Javascript - Load content, callback and loading - javascript

Here is my 'getContent' functions which takes a URL:
function getContent(url, callback) {
var request = new Sys.Net.WebRequest();
request.set_url(url);
request.set_httpVerb("GET");
var del = Function.createCallback(getContentResults, callback);
request.add_completed(del);
request.invoke();
}
What I'd like to do is display a loading image when this is called and then hide it when the callback is complete?
Can any suggest antying?

You can use the jQuery .load() function to load your HTML, then use the .ajaxStart() and .ajaxStop() event handlers to show and hide the loading animation.
Here is an example:
$(document).ready(function() {
$("#loadlink").click( function() {
$("#container").load( "load.htm" );
});
$("#loadlink").ajaxStart( function() {
console.log("start");
});
$("#loadlink").ajaxStop( function() {
console.log("stop");
});
});

$('#selector').html('<img src="loading.gif" />').ajax({
URL: 'myurl',
type: 'GET',
dataType:'html',
success:function (data){
console.log('This has changed');
// data is your html returned/response
},
error: function (){
//this handles errors such as 404,500, etc...
}
});
Whats happening?
$('#selector')//is where the result would be shown this instance <div id="selector">
.html('<img src="loading.gif" />')// adds an image to <div id="selector"><img src="loading" /></div>
.ajax();//well its the ajax call to get the page data
for more information
http://api.jquery.com/jQuery.ajax/

Related

How to put a loader in ajax requests?

One is a small code that allows me to view error messages when the form fields are empty or when everything is fine. What I would like to do is enter a loader or text to indicate that the submitted action is being processed. I really don't know where to start, can someone help me understand how to achieve this?
jQuery(document).ready(function($) {
$('.mts-edit-account').on('submit', function(e) {
e.preventDefault();
//Ajax Handling Error
var $form = $(this);
jQuery.post(
$form.attr('action'),
$form.serialize(),
function(data) {
jQuery('.newdiv').html(data);
}, 'json',
);
//Ajax function
jQuery.ajax({
type: "post",
data: jQuery(".mts-edit-account").serialize(),
});
});
});
Firstly put the loader in your HTML file where you want to display it. i.e: below the submit button
<img
src="https://thumbs.gfycat.com/PessimisticGlamorousDunnart-size_restricted.gif"
class="loader"
alt="Loader"
height=25
width=25
>
Then add CSS for this loader:
.loader{
display:none;
}
Then put the below code in jQuery:
jQuery(document).ready(function($) {
$('.mts-edit-account').on('submit', function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "your_url",
data: $(".mts-edit-account").serialize(),
beforeSend: function() {
$(".loader").show();
},
success: function(msg) {
$(".loader").hide();
}
});
});
});
AJAX requests using jQuery allows you to handle request completion, failure or success using the returned value from ajax() function. In your case you need to start by showing the loader before starting the request, then hide on completion. To do that, you can use always() function. That will make sure it's always called in case of success or failure.
// Show loader
jQuery.ajax({
// ..
}).always(() => {
// Hide loader
});

AJAX call before document.ready

I have a requirment where in AJAX call has to happen before document.ready and the response from the AJAX call will be used to update some HTML elements.
So I have something like below:
var ajaxget = $.ajax({
type: 'GET',
url:'/xxx/get',
success: function(resp) {
//logic
}
});
$(document).ready(function(){
$.when(ajaxget).done(function(resp) {
//do ur logic
$(documet).trigger("yyyy");
});
});
//the above part is common across pages and placed in the <head>
//below one goes into multiple places based on the pages
$(document).ready(function(){
$(document).on('yyyy', function() {
});
});
The issue is the trigger event "yyyy" doesn't get executed in IE and intermittently on other browsers as well. Please help!
Might be better to use then() instead of success to be sure that whatever happens in success is completed before the $.when.done
Note that success is not part of the promise chain
Try:
var ajaxget = $.ajax({
type: 'GET',
url: '/xxx/get'
}).then(function(resp) {
//logic
return resp;
});
$(document).ready(function() {
ajaxget.then(function(resp) {
//do ur logic
$(documet).trigger("yyyy");
});
});
But also note you are triggering the event before you register it also if the order shown in question is correct
This code works for me. Simply i defined "yyyy" event before triggering.
$(document).ready(function () {
$(document).on("yyyy", function () {
console.log('triggered');
});
$.ajax({
type:'GET',
url:'some.jsp',//your url
success:function(resp){
//logic
$(document).trigger("yyyy");
console.log(resp);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

How to check if my container fully load is completed?

I have an issue, do not know if it possible or not, how to check if my container is already loaded or not, because sometimes it is being loaded faster, sometimes slower and if it does not succeed in time getting an error in javaScript where gridview some functions are not recognizable(because the gridview is not loaded fast enough). Hope it is clear. Thanks for Your time.
Code:
function LoadPartial(partialUrl, container) {
$.ajax({
type: 'POST',
url: partialUrl,
success: function (returnData) {
$(container).html(returnData);
}
});
//.done(function () {
// return;
//});
}
you can use something like this.
$(".container").load(function (){
alert("Loaded :)");
});
Let me know in-case this doesn't work.
You can try using .data()
if ($('#mycontainer').data('loaded')) {
// your code
}
If you mean to find event when data received use "complete" function:
$.ajax({
type: 'POST',
url: partialUrl,
success: function (returnData) {
$(container).html(returnData);
},
complete: function() {
console.log('container filled with data');
}
});

where do i put jQuery .fade() function in ajax success callback?

I have an ajax call that is populating a portion of my page with the html it returning in the success callback:
function LoadCurrentCourses(masterKey, status) {
status = 'S';
$.ajax({
type: "GET",
url: "/Home/LoadCurrentCourses/?masterKey=" + masterKey + "&status=" + status,
dataType: "html",
success: function (evt) {
$('#currentCourses').fadeIn(1500, function () { $('#currentCourses').html(evt) });
},
error: function (req, status, error) {
$('#currentCourses').html("<p>Error occured retrieving current courses</p>");
}
});
}
the #currentCourses markup just has a header and loading .gif in there.
<div class="span4 moduleBox" id="currentCourses">
<h2>Current Courses</h2>
<img style="margin-left: 45%; margin-top: 5%; margin-bottom: 5%;" src="~/Images/11.gif" />
</div>
The ajax is being called from my main page on doc.ready():
<script>
$(document).ready(function () {
var masterKey = '#Model.MasterKey';
//load degree overview
LoadCurrentCourses(masterKey);
});
</script>
What I am trying to do is one the data gets returned I would like the html to slowly fade in to the main page, replacing the gif and header. Right now it works fine, everything loads, and is replaced, but I can't seem to figure out where I should put the jQuery .fadein() method.
Any ideas?
You should load the text before fading in
success: function (evt) {
$('#currentCourses').html(evt);
$('#currentCourses').fadeIn(1500);
},
You may also need to fadeout or hide that container before fading in, or it will appear to do nothing and just load the new data.
Should be like:
success: function (evt) {
$('#currentCourses').html( evt ).fadeIn(1500);
}
Fade in after the element is populated, otherwise calling .html() inside the .fadeIn() callback will result in:
fade--(fade ends)-->--(HTML applied)

Categories

Resources