Well long story short, I am trying hide a div inside Ajax success function depending on whether its visible or not. But don't understand why it isn't working. I can set it to hide simply and which works but in the console when I check I find that it keeps on setting the div to display:none even if it is already hidden.
JS
$(document).ready(function() {
$('#loading').show();
setInterval(function () {
$.ajax({
type: "GET",
url: "generate_list.php",
success: function (result) {
//$('#loading').hide();
$('#loading:visible').hide();
if(result != '') {
$('#empty_storage').hide();
$('#file_list').html(result);
}
else {
$('#file_list').html('');
$('#empty_storage').show();
}
}
});
}, 1700);
});
Toggle visibility
$(document).ready(function() {
$('#loading').css('visibility': 'visible');
setInterval(function () {
$.ajax({
type: "GET",
url: "generate_list.php",
success: function (result) {
if ($('#loading').css('visibility') == 'visible') {
$('#loading').css('visibility','hidden');
}
if(result != '') {
$('#empty_storage').hide();
$('#file_list').html(result);
}
else {
$('#file_list').html('');
$('#empty_storage').show();
}
}
});
}, 1700);
});
CSS : Initially loader will be hidden
#loading {
visibility : hidden;
}
So go with visibility property if you want to check the visibility. But if you want to use .hide() or .show() then it depends on display property
Visibility : http://www.w3schools.com/cssref/pr_class_visibility.asp
Display : http://www.w3schools.com/cssref/pr_class_display.asp
Sample Demo : https://jsbin.com/jiluren/11/edit?html,css,js,output
Hope this helps. Thanks !
Your problem might be that you misplaced the call of showing the loading indicator. You call $('#loading').show(); only once, before starting the setInterval iteration. So the first time your #loading gets hidden, it will stay hidden forever. You should call $('#loading').show(); before each ajax call like this.
$(document).ready(function() {
setInterval(function () {
$('#loading').show();
$.ajax({
type: "GET",
url: "generate_list.php",
success: function (result) {
//$('#loading').hide();
$('#loading:visible').hide();
if(result != '') {
$('#empty_storage').hide();
$('#file_list').html(result);
}
else {
$('#file_list').html('');
$('#empty_storage').show();
}
}
});
}, 1700);
});
Also, note that for such a loading indication it's better to hide it in the always callback of the promise returned by $.ajax. That way the loading panel will be hidden also when an error occures, and the success callback is not called. I mean something like thi.
$("#loading").show();
$.ajax({ ... })
.always(function() {
$("#loading").hide();
});
If i understand your requirement , you need to show the loading icon before ajax call and hide it once ajax call completes
In that case there are predefined callback functions avialable
beforeSend: function (xhr) {
$("#loaderforsearch").show()
},
complete: function()
{
$("#loaderforsearch").hide();
},
How can I call jQuery Lightbox2 with AJAX.
I am using this function for my project.
$(document).ready(function() {
$(".paylasimi-goster").click(function() {
event.preventDefault();
var id = $(this).data("id");
$.ajax({
url: "gonderiyi_goster.php?msg_id=" + id,
type: 'get',
beforeSend: function() {
$("#loader").fadeIn(100);
},
}).done(function(data) {
$("#loader").fadeOut(100);
$(".sidebar").fadeIn().find(".sidebar-content").animate({
"right": 0
}, 200).html(data);
imgResize(jQuery, 'smartresize');
});
});
$(".sidebar").click(function() {
$(".sidebar-content").animate({
"right": "-565px"
}, 200, function() {
$(".sidebar").fadeOut();
})
});
$(".sidebar-content").click(function(e) {
e.stopPropagation();
});
});
Also I have created this DEMO from jsfiddle. In this jsfiddle you can see there white div. Click any white div then see the right sidebar. So in the sidebar have one image. The problem is here : Lightbox2 does not work when you click on the image.
How can I call Lightbox2 with ajax.
The issue here is the e. stopPropagation() on the .sidebar-content click event which is preventing the lightbox from triggering. You can remove that altogether and inside the .sidebar click event instead call:
$(".sidebar").click(function(e){
var preventClick = $(".sidebar-content");
if (!preventClick.is(e.target) && preventClick.has(e.target).length === 0){
//run the hide animate function + callback
$(".sidebar-content").animate({"right":"-200px"},200,function(){
$(".sidebar").fadeOut();
});
};
});
FIDDLE
i want to simply show the content after load not fadeIn how is it possible?
$(function() {
$('.hovers').click(function(event) {
var target = $(this).attr('href');
window.location.hash = target;
$.ajax({
url: target,
success: function(data) {
$('#allcontent')
.fadeOut('slow', function() {
$(this).html(data).fadeIn('slow');
});
}
});
return false;
});
});
maybe i use .show() ?
Thanks for help
success: function(data) {
$('#allcontent').html(data).show();
}
Just fadeIn 0 , which happens immediately
$(this).html(data).fadeIn(0);
also you might want to do this
$(this).html(data).delay(2000).fadeIn(0);
adding a delay of 2 seconds or however much you want, and then show immediately
I have a dropdown box. When the user selects a value from the dropdown box, it performs a query to retrieve the data from the database, and shows the results in the front end using ajax. It takes a little bit of time, so during this time, I want to show a progress bar. I have searched, and I have found numerous tutorials on creating progress bars for uploads, but I haven't liked any. Can anybody provides some helpful guidance for me?
My ajax code:
<script>
$(function() {
$("#client").on("change", function() {
var clientid=$("#client").val();
$.ajax({
type:"post",
url:"clientnetworkpricelist/yourfile.php",
data:"title="+clientid,
success:function(data){
$("#result").html(data);
}
});
});
});
</script>
This link describes how you can add a progress event listener to the xhr object using jquery.
$.ajax({
xhr: function() {
var xhr = new window.XMLHttpRequest();
// Upload progress
xhr.upload.addEventListener("progress", function(evt){
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
//Do something with upload progress
console.log(percentComplete);
}
}, false);
// Download progress
xhr.addEventListener("progress", function(evt){
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
// Do something with download progress
console.log(percentComplete);
}
}, false);
return xhr;
},
type: 'POST',
url: "/",
data: {},
success: function(data){
// Do something success-ish
}
});
<script>
$(function() {
$("#client").on("change", function() {
var clientid=$("#client").val();
//show the loading div here
$.ajax({
type:"post",
url:"clientnetworkpricelist/yourfile.php",
data:"title="+clientid,
success:function(data){
$("#result").html(data);
//hide the loading div here
}
});
});
});
</script>
Or you can also do this:
$(document).ajaxStart(function() {
// show loader on start
$("#loader").css("display","block");
}).ajaxSuccess(function() {
// hide loader on success
$("#loader").css("display","none");
});
Basically you need to have loading image Download free one from here http://www.ajaxload.info/
$(function() {
$("#client").on("change", function() {
var clientid=$("#client").val();
$('#loadingmessage').show();
$.ajax({
type:"post",
url:"clientnetworkpricelist/yourfile.php",
data:"title="+clientid,
success:function(data){
$('#loadingmessage').hide();
$("#result").html(data);
}
});
});
});
On html body
<div id='loadingmessage' style='display:none'>
<img src='img/ajax-loader.gif'/>
</div>
Probably this could help you
Here is an example that's working for me with MVC and Javascript in the Razor. The first function calls an action via ajax on my controller and passes two parameters.
function redirectToAction(var1, var2)
{
try{
var url = '../actionnameinsamecontroller/' + routeId;
$.ajax({
type: "GET",
url: url,
data: { param1: var1, param2: var2 },
dataType: 'html',
success: function(){
},
error: function(xhr, ajaxOptions, thrownError){
alert(error);
}
});
}
catch(err)
{
alert(err.message);
}
}
Use the ajaxStart to start your progress bar code.
$(document).ajaxStart(function(){
try
{
// showing a modal
$("#progressDialog").modal();
var i = 0;
var timeout = 750;
(function progressbar()
{
i++;
if(i < 1000)
{
// some code to make the progress bar move in a loop with a timeout to
// control the speed of the bar
iterateProgressBar();
setTimeout(progressbar, timeout);
}
}
)();
}
catch(err)
{
alert(err.message);
}
});
When the process completes close the progress bar
$(document).ajaxStop(function(){
// hide the progress bar
$("#progressDialog").modal('hide');
});
$(document).ready(function () {
$(document).ajaxStart(function () {
$('#wait').show();
});
$(document).ajaxStop(function () {
$('#wait').hide();
});
$(document).ajaxError(function () {
$('#wait').hide();
});
});
<div id="wait" style="display: none; width: 100%; height: 100%; top: 100px; left: 0px; position: fixed; z-index: 10000; text-align: center;">
<img src="../images/loading_blue2.gif" width="45" height="45" alt="Loading..." style="position: fixed; top: 50%; left: 50%;" />
</div>
After much searching a way to show a progress bar just to make the most elegant charging could not find any way that would serve my purpose. Check the actual status of the request showed demaziado complex and sometimes snippets not then worked created a very simple way but it gives me the experience seeking (or almost), follows the code:
$.ajax({
type : 'GET',
url : url,
dataType: 'html',
timeout: 10000,
beforeSend: function(){
$('.my-box').html('<div class="progress"><div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div></div>');
$('.progress-bar').animate({width: "30%"}, 100);
},
success: function(data){
if(data == 'Unauthorized.'){
location.href = 'logout';
}else{
$('.progress-bar').animate({width: "100%"}, 100);
setTimeout(function(){
$('.progress-bar').css({width: "100%"});
setTimeout(function(){
$('.my-box').html(data);
}, 100);
}, 500);
}
},
error: function(request, status, err) {
alert((status == "timeout") ? "Timeout" : "error: " + request + status + err);
}
});
I know that are already many answers written for this solution however I want to show another javascript method (dependent on JQuery) in which you simply need to include ONLY a single JS File without any dependency on CSS or Gif Images in your code and that will take care of all progress bar related animations that happens during Ajax Request.
You need to simnply pass javascript function like this
var objGlobalEvent = new RegisterGlobalEvents(true, "");
Here is the working fiddle for the code. https://jsfiddle.net/vibs2006/c7wukc41/3/
I did it like this
CSS
html {
-webkit-transition: background-color 1s;
transition: background-color 1s;
}
html, body {
/* For the loading indicator to be vertically centered ensure */
/* the html and body elements take up the full viewport */
min-height: 100%;
}
html.loading {
/* Replace #333 with the background-color of your choice */
/* Replace loading.gif with the loading image of your choice */
background: #333 url('/Images/loading.gif') no-repeat 50% 50%;
/* Ensures that the transition only runs in one direction */
-webkit-transition: background-color 0;
transition: background-color 0;
}
body {
-webkit-transition: opacity 1s ease-in;
transition: opacity 1s ease-in;
}
html.loading body {
/* Make the contents of the body opaque during loading */
opacity: 0;
/* Ensures that the transition only runs in one direction */
-webkit-transition: opacity 0;
transition: opacity 0;
}
JS
$(document).ready(function () {
$(document).ajaxStart(function () {
$("html").addClass("loading");
});
$(document).ajaxStop(function () {
$("html").removeClass("loading");
});
$(document).ajaxError(function () {
$("html").removeClass("loading");
});
});
I usually use this since it's simpler and more useful.
<input id="datainput" type="text">
<div id="result"></div>
<button id="examplebutton"></button>
<script>
$("#examplebutton").click(function(){
let data=$("#datainput").val();
$("#result").html("Please Wait.."); // it starts working when the button is clicked
$.ajax({
url:"../ajax/xyz.php",
type:"POST",
data:{data:data},
success:function(result)
{
$("#result").html(result); // When the data comes, the text will be deleted and the data will come.
}
});
});
</script>
try this it may help you
$.ajax({
type:"post",
url:"clientnetworkpricelist/yourfile.php",
data:"title="+clientid,
beforeSend: function( ) {
// load your loading fiel here
}
})
.done(function( data ) {
//hide your loading file here
});
Well this will definitely work.
Here we go...
function yourFunction(){
setTimeout(function(){
$('#loading').show();
setTimeout(function(){
//your ajax code goes here...
$('#loading').hide();
}, 500);
}, 300);
}
You can set css to your progress bar according to your requirement. Hide this div by default.
<div id="loading">
<img id="loading-image" src="img-src" alt="Loading..." />
</div>
i know how to write code for jquery fadein effect.
suppose i have a html element store in variable.
like
var sHtml="<div>Other content</<div><div id='frm'>hello</<div>"
modal.load(jQuery(sHtml).find('#frm')fadein().html());
i first find the desired div and use the fadein effect when i am assigning the div inside modal box. but it is not working. cany anyone suggest me to do it proper way. i want that when i will set the content into modal box then first i will show a fadein effect and then set the content.
Here i am giving my code
var modal = "";
var sHtml = "";
jQuery.noConflict();
jQuery(document).ready(function () {
jQuery("#btnFeedback1").click(function () {
var modal = new LightFace({
draggable: true,
height: 'auto',
width: 'auto',
title: 'Login',
content: '<div class="BusyStyles"><div>',
buttons: [
{ title: 'OK', event: function () {
if (Validate()) {
if (Save()) {
this.close();
}
}
}
},
{ title: 'Close', event: function () { this.close(); } }
]
}).open();
//}).open();
jQuery.ajax({
type: "POST",
url: "Login_LightFace.aspx/GetHtml",
data: {},
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
sHtml = data.d;
//modal.options.width = 'auto';
//modal.options.height = 'auto';
modal.load(jQuery(sHtml).find('#frm').fadeIn().html());
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
return false;
});
});
There is no such effect in jquery as fadein but there is fadeIn (capital I). Also you missed a dot before fadeIn()
I dont know what is that modal.load but when you are adding new thing to somewhere and want to have fadeIn type of effect, you should first just hide the element you just added (or have style="display:hidden") and then use fadeIn on it.
Add an event handler like this:
modal.load(function() { ...event handling code here...; });
If you don't wrap it in a function(){} it will run immediately instead of when the event fires.