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.
Related
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();
},
Hi everyone i have one problem with my ajax loading animation. The problem is when i hover any image the loading animation active under all images.
Like this FIDDLE
I want to make when i hover first image then .ajax-loading activated for only that image. and if i hover second image then .ajax-loading active for only second image ext..
Anyone can help me here ?
CSS
.ajax-loading {
transition: all 0.3s;
opacity: 0;
z-index: -1;
}
.ajax-loading.active {
opacity: 1;
z-index: 100;
}
and AJAX
$(document).ready(function () {
function showProfileTooltip(e, id) {
//send id & get info from get_profile.php
$.ajax({
url: '/echo/html/',
data: {
html: response,
delay: 0
},
method: 'post',
beforeSend: function() {
$('.ajax-loading').addClass('active');
},
success: function (returnHtml) {
e.find('.user-container').empty().html(returnHtml).promise().done(function () {
$('.the-container').addClass('loaded');
});
}
}).complete(function() {
$('.ajax-loading').removeClass('active');
});
}
function hideProfileTooltip() {
$('.the-container').removeClass('loaded');
}
$('.the-container').hover(function (e) {
var id = $(this).find('.summary').attr('data-id');
showProfileTooltip($(this), id);
}, function () {
hideProfileTooltip();
});
});
The problem is that the beforeSend function activate the class active for all the elements with the class .ajax-loading.
Since you're passing the jQuery object that is receiving the hover to the function, you can take advantage of that and add the class active only to those elements with the class .ajax-loading under it.
beforeSend: function() {
$('.ajax-loading',e).addClass('active');// Note the ,e that I added
},
Fiddle
Hope it helps.
Is there a way to animate new DOM elements without having to hide them first? If so, how?
For example, what I'm doing now is:
$(document).ready(function() {
$(document).on("click", ".link", function(event) {
event.preventDefault();
var count = 1;
$.ajax({
url: 'php/get_data.php',
type: 'POST',
dataType: 'json',
data: { total_count: count },
success: function(data) {
$(".new-elements").append(data).hide().slideDown(function() {
}
});
});
});
Thanks.
Yes, you try to add css (for default for these elements) for example display: none or if you prefer opacity: 0 only, then you try to animate them.
I have this code
<script type="text/javascript">
$(function () {
$(".a").live("click", function () {
var $this = $(this),
ProductImageId = $this.data('ProductImageId');
$.ajax({
url: '/Home/AddToCart',
type: "post",
cache: false,
data: { ProductImageId: ProductImageId },
success: function (data) {
data = eval(data);
$this.addClass('productSelected');
},
error: function (result) {
$(".validation-summary-errors").append("<li>Error connecting to server.</li>");
}
});
});
Every time someone click on this button I want a image to load for like 1 sec
so the user knows that something happened..
any kind of help is appreciated
Something like:
var $loader = $('<img src="loader.gif">').appendTo(document.body);
And then
success: function (data) {
setTimeout(function() {
$loader.remove();
data = eval(data);
$this.addClass('productSelected');
},1000);
}
It will show the image for 1sec + the ajax loading time. Although, as a visitor of your site I would probably prefer to skip the 1sec delay...
Add before send like this :
beforeSend: function(){
$("some element").append("<img src='url' id='one_sec_img' />");
SetTimeout(1000, function(){
$("#one_sec_img").hide();
})
}
But, I think your requirement is something normal :
Here, bcoz of the before send, as soon as you click button that triggers ajax, the image will be loaded, and on success, the image can be hidden . This is the usual process, in this case,setTimeout is not needed . But, if your requirement is something like, the image should appear only one sec, you can use set timeout. Otherwise, below code is enough.
beforeSend: function(){
$("some element").append("<img src='url' id='one_sec_img' />");
},
success: function(res){
$("#one_sec_img").hide();
}
<script type="text/javascript">
$(function () {
$(".a").live("click", function () {
var html=$(this).html();
$(this).html('loading');//<img src="" />
var $this = $(this),
ProductImageId = $this.data('ProductImageId');
$.ajax({
url: '/Home/AddToCart',
type: "post",
cache: false,
data: { ProductImageId: ProductImageId },
success: function (data) {
$(".a").html(html);
data = eval(data);
$this.addClass('productSelected');
},
error: function (result) {
$(".validation-summary-errors").append("<li>Error connecting to server.</li>");
}
});
});
try this.
Use jQuery BlockUI Plugin to show the image, may be it solve your problem.
Try:
$(".a").click( function( ) {
$("#idOfImage").show().delay( 1000 ).hide();
// ajax call
});
else if you only want the image to disappear only after the ajax call
$(".a").click( function( ) {
$("#idOfImage").show();
$.ajax({
// parameters
}).done( function( ) {
$("#idOfImage").hide( );
});
});
The code i current have is this.
function update (){
latest_id = $('#image:first').data('position'); /* == 12 */
$.ajax({
type: "POST",
url: "../web/update/" + latest_id + "",
success: function(data) {
$('#my_like').after(data);
$('.newly-added').animate({"margin-left": "+=66px"}, "fast");
},
error: function(response) {
alert("failed");
},
});
}
setInterval(function() {
update();
}, 4000);
But because the element has been newly added it doesn't receive the new animate part. I done some research and found .live but that needs something to start it, e.g a click.
Fixed, there was a issue with jquery I was including.