javascript function working in firefox but not in google chrome

Question

I have made one simple functionality and it is working in fire fox perfectly but not in google chrome . It is giving problem with hide() function and showing loading image and Rest of function is working ok .

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) 
                    {
                        // this is the last one
                        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 is code I have written and

 $(this).hide();
  var loading_img = addLoadingImage( $(this), "before", 'loading_medium_purple.gif',61, 32 );

these two lines are not working where button hides and loading image appears .

The function to show loading 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 is working in fire fox perfectly but not in google chrome :(

Answer 1

That is happening because of async:false . because when i made my ajax call asynchronous false it halted the other events that were to be occur . I should have known the right implementation of asyn:false before writing such a code . thanks @sunny , @ashish kumar for help .