I made one simple functionality and works fine in fire fox, but not in google chrome. This gives problems with the hide () function and shows the loaded image, and the rest of the work function works fine.
function setPrivacyToCustom(){
$("form#email_contacts_form #gmail_import_btn").unbind();
$("form#email_contacts_form #gmail_import_btn").click(function()
{
var current_album_id = $(this).siblings('input#selected_album_id').val();
$(this).hide();
var loading_img = addLoadingImage( $(this), "before", 'loading_medium_purple.gif',61, 32 );
var usersList = "";
var total = $("input[name='emails[]']:checked:enabled").length;
$("input[name='emails[]']:checked:enabled").each(function(index)
{
if (index === total - 1)
{
usersList += $(this).attr('rel');
}
else
{
usersList += $(this).attr('rel')+",";
}
});
var thisss = $(this);
$.ajax({
async: false,
url : "/" + PROJECT_NAME + "profile/set-custom-privacy-and-viewers-for-album",
method : "POST",
data :{"custom_viewer" : usersList, "album_id":current_album_id},
type : "post",
dataType : "json",
success : function(jsonData)
{
if(jsonData == 1)
{
$("span#"+loading_img).remove();
$('div#gmail_popup').bPopup().close();
$("span#"+loading_img).remove();
$(thisss).fadeIn();
$(".alert-box").remove();
$(".alert-box1").remove();
$(".alert-box2").remove();
showDefaultMsg( " Your setting changes have been saved.", 1 );
}
else
{
alert("Some error has occured.Please select custom user again.");
}
}
});
});
}
The above code I wrote and
$(this).hide();
var loading_img = addLoadingImage( $(this), "before", 'loading_medium_purple.gif',61, 32 );
these two lines do not work when the button is hidden and the image is loaded.
The display function of the loaded image is as follows
function addLoadingImage(elem, position, image_name, width, height)
{
image_name = typeof image_name !== 'undefined' ? image_name : "loading_small_purple.gif";
width = typeof width !== 'undefined' ? width : "0";
height = typeof height !== 'undefined' ? height : "0";
var unique_num = new Date().getTime();
var obj = "<span class = 'loading' id = '"+unique_num+"' ><table><tr><td style = 'width:"+width+"px; height:"+height+"px'><img src = '/" + PROJECT_NAME + "public/images/" + image_name + "' alt = 'Wait...' /></td></tr></table></span>";
elem.siblings("span.loading").remove();
if( position == "before" )
{
$(obj).insertBefore( elem );
}
else if( position == "after" )
{
$(obj).insertAfter( elem );
}
return unique_num;
}
the above code works fine in fire fox, but not in google chrome :(