So I have a to upload image files to the server and correspondingly save their info in the database. Some of these files are big and take time to upload, so I need to incorporate a loading.gif when the upload is on using ajax. I also use the same AJAX function to prevent page refresh as I upload several images.
These are the two JS functions I am using
function showLoading(){
document.getElementById("loading").style = "visibility: visible";
}
function hideLoading(){
document.getElementById("loading").style = "visibility: hidden";
}
This is the AJAX
$(function () {
$('form#data').submit(function (e){
e.preventDefault();
e.stopImmediatePropagation();
var formData = new FormData($(this)[0]);
showLoading();
$.ajax({
type:'POST',
url: 'upload.php',
data: formData,
async:false,
cache:false,
contentType: false,
processData: false,
success: function (returndata) {
$('#result').hideLoading().html(returndata);
alert("Data has been Uploaded: ");
}
});
return false;
});
});
This is the image tag
<img id='loading' src='loading.gif' style='visibility: hidden;'>
When I click submit, i can only see the loading.gif. It previously used to tell me that the file has been uploaded and returned the input details. Also I need the loading.gif to hide once the file has been uploaded.
Where am I going wrong?
This:
$('#result').hideLoading().html(returndata);
you're calling hideloading() as if it was a JQuery method. it's not, so that code is a syntax error: call to undefined method.
You should have
success: function() {
hideLoading();
}
And note that your code simply assumes success. If the upload fails for whatever reason, you'll STILL be showing the loading gif. You should move that hide call to a complete handler instead, so that regardless of the success/failure, the gif will hide when the ajax call is done.
Related
I am loading a PHP file using Ajax below which works great except I want to be able to load some javascrip/jQuery items within that file to function on the main index page.
prices();
function prices()
{
$.ajax({
type: "GET",
url: "inc/load_prices.php",
cache: false,
success: function(response){
$("#prices").hide().html(response).fadeIn(500);
}
});
}
setInterval(prices, 600000);
Inside load_prices.php I have some stock ticker type output which works fine outside the AJAX call using the below. However when loading the contact via AJAX it wont trigger the webticker.min.js file and wont render properly.
<!-- If loading this without AJAX the ticker works fine -->
<script src="js/jquery.webticker.min.js"></script>
<script>
$("#ticker").webTicker({
duplicate:true,
hoverpause:false,
});
</script>
How do I allow the contents of the prices() AJAX function to render properly when needed to reference jQuery?
Not sure but in load_prices.php
src="../js/jquery.webticker.min.js"
as both are in different directory
If interpret Question correctly, use $.getScript() to load webticker.min.js once. Not certain what purpose is of calling .webTicker() every 600000 ms?
$.getScript("js/jquery.webticker.min.js")
.then(function() {
$("#ticker")
.webTicker({
duplicate:true,
hoverpause:false
});
});
I have been trying to get the loading gif to replace the cursor while I am updating the database or loading. It does work when my tabs are loading but it doesn't when I am saving from the jQuery modal popup.
when I debug and look at the rendered html it tells me it is displaying right before it makes the call style="display:block;" when I let it complete the save it switches back to style="display:none;" The below code is just a taste, sorry I can't transfer the actual code from the development network to here. Since I am using these popups for every edit in a huge application, I really would like to get the loading gif showing.
//using jquery to start and stop with ajax
var $loading = $('#waiting').hide();
$(document)
.ajaxStart(function () {
$loading.show();
})
.ajaxStop(function () {
$loading.hide();
});
//my div
<div id="waiting" class="loading-img" style="display:none;"
$("#somePopup").dialog({
autoOpen:false,
height: 'auto',
width: 900,
buttons: { Save: ....
// you get the idea
$ajax({
type:"post",
url: "some procedure",
dataType: "json",
data: DTOvar,
contentType: "application/json",
async: false,
success: function(data){
//refresh main screen and close popup
error : function(errorstuff){
//handle error
}
});
It won't work since you specified "async: false", signalling the browser to use the same ui thread. ajaxStart/ajaxStop methods will never have a chance to run. You should most likely remote the sync option to achieve what you need.
Im trying to show a progressbar when my page is doing an ajax request.
I have a div with an image inside it and i would like to show it on the ajaxStart event. The problem is the img only shows itself when the ajaxStart event is done. However the alert is fired before the ajax request.
$(document).ajaxStart(function () {
alert("test");
document.getElementById('LoadingDiv').style.visibility = "visible";
});
$.ajax({
url: url,
async: true,
dataType: 'json',
success: function (data) {
Posted abit to early changed async to true and works now.
You can show/hide loading spinner like this:
/*LOADING SPINNER*/
jQuery.ajaxSetup({
beforeSend: function() {
$('#loadingDiv').show()
},
complete: function(){
$('#loadingDiv').hide()
},
success: function() {}
});
The #loadingDiv simply contains an animated image. The ajaxSetup method set default values for future Ajax requests.
That means that this loading indicator will be shown every time when making ajax calls.
First of all I want to say I am not a javascript expert at all..
I am testing Ray Stone's leanModal pluggin.
I am able to open and close modal using the pluggin.
I have added a form to modal div.
What I want to do now is to close the modal when user clicks submit button (as you can see in project website).
The problem is that I don't process the form as usual. I get the data using jQuery and I do request to server using $.ajax(). Here is my code:
$(function() {
$('#add-user').submit(function() {
$.ajax({
type: 'post',
url: '***',
data: '***',
contentType: 'application/json',
dataType: 'json'
});
$(this).closest('form').find("input[type=text], textarea").val("");
$(this).leanModal.closeModal('#cp');
return false;
});
});
Where
#add-user is the link that opens the modal.
#cp is the div id of the modal.
In this case the div gets close but the blur behind the div does not dissapear until user do clicks. The effect is the same than using $('#cp').remove();
How can I totally close the div when the request is sent?
Thanks in advance
Update: A jsFiddle with my code is available here.
Some CSS rules are missed and I have not featured the AJAX request but I think the main code is there.
Firstly $.ajax() is asynchronous so the following lines
$(this).closest('form').find("input[type=text], textarea").val("");
$(this).leanModal.closeModal('#cp');
will be executed even if your query is not successful.
You would better do
$.ajax({
...
success: function () {
$(this).closest('form').find("input[type=text], textarea").val("");
$(this).leanModal.closeModal('#cp');
}
});
Secondly, after checking the source, I think you should use
$.leanModal.close_modal('#cp');
$("#lean_overlay") seems to be the "blur" element you want to get rid of.
Ultimately you could do $("#lean_overlay").remove() but the plugin seems to manage it already
Finally you should have
$(function() {
$('#add-user').submit(function(e) {
e.preventDefault();
$.ajax({
type: 'post',
url: '***',
data: '***',
contentType: 'application/json',
dataType: 'json',
success: function () {
$('#add-user :input:not(:submit)').val('');
$.leanModal.close_modal('#add-user');
}
});
return false;
});
});
Here is my full JS code:
var timeOutId;
function ft(){
$.get("progress.txt", null, function(data){
if(data.substr(0,10) == "MSG::MSG::"){
$("#box").html(data);
window.clearTimeout(timeOutId);
}else{
$("#box").html(data);
}
});
};
$(document).ready(function(){
$("#box").corner('20px');
$("#progress").hide();
});
$("#newm").click(function(){
$("#progress").show();
$("#list").html = $.ajax({
url: "action.php",
global: false,
type: "POST",
data: ({keyword : $("#keyword").value()},{format: $("#format").value()},{filename: $("#filename").value()},{list: $("#list").value()}),
dataType: "html"
});
timeOutId = window.setTimeout("ft()", 10000);
});
and there is a hyperlink with ID "newm" on page but clicking on the link doesnt trigger the ajax request. Can anyone tell me what is wrong?
Description
I have tryed your code and recognize that your binding to click is not working because the DOM element is not available at this time.
You should bind it under $(document).ready() to ensure the DOM is fully loaded before binding javascript / jquery to that.
This will enusre that your link will work, but its hard to help you without the html source.
If this will not help, please post the html.