display loading image with jquery/ajax

Question

I am trying to display a spinning image while ajax call is being completed. I am using the following jsp and jquery code yet it is not working. Any help will be appreciated jsp:

<div class="tab-content" id="rdfTabs">
            <div id="data">
                <p>Please enter dataset URL or absolute file location (e.g: c:\data\dbpedia.rdf)</p>
                <table width="100%">
                    <tr>
                        <td colspan="2"><input name="txtDataSource" id="txtDataSource" type="text" class="textbox"/>
                        <input type="button" value="Analyse File"
                            name="btnAnalyseFile" id="btnAnalyseFile" class="btn-blue" /></td>

                    </tr>

                </table>
                **<div id="loadingImage" style="display:none">
                    <img src="http://preloaders.net/preloaders/287/Filling%20broken%20ring.gif">
                </div>**
                <p id="presult">
            </div>

and here is the jquery code

$(document).ready(function()
        {
            $("#presult").hide();
            $("#btnAnalyseFile").click(
                    function(e)
                    {
                        **$("#loadingImage").show();**
                        $.ajax({
                            url : 'CreatePatternServlet',
                            type : 'POST',
                            dataType : 'json',
                            data : $("#formCreatePattern").serialize(),
                            success : function(data)
                            {   
                                if(data.analyseResult==true){
                                var predicates = {};
                                var objectList = {};
                                var ddlSubject = $('#ddlSubject');
                                var ddlPredicate = $('#ddlPredicate');
                                var ddlObject = $('#ddlObject');
                                var ddlClass = $('#ddlClass');
                                $.each(data.Subjects, function(key, value)
                                {
                                    ddlSubject.append($('<option></option>')
                                            .val(value).html(key));
                                });
                                $.each(data.Classes, function(key, value)
                                {
                                    ddlClass.append($('<option></option>')
                                            .val(value).html(key));

                                });
                                $.each(data.Predicates, function(key, value)
                                {
                                    ddlPredicate.append($('<option></option>')
                                            .val(value).html(key));
                                });
                                $.each(data.Objects, function(key, value)
                                        {

                                            ddlObject.append($('<option></option>')
                                                    .val(value).html(key));
                                        });
                                $('#ddlSubject').filterByText(
                                        $('#txtSearchSubject'));
                                $('#ddlPredicate').filterByText(
                                        $('#txtSearchPredicate'));
                                $('#ddlObject').filterByText(
                                        $('#txtSearchObject'));
                                $('#ddlClass').filterByText(
                                        $('#txtSearchClass'));

                                $("#presult").html("Data uploaded successfully");
                                $("#presult").css("color","green");
                                $("#presult").fadeIn(500);
                                }
                                else{
                                    $("#presult").html("Upload failed, please check file path or URL. Server returned error: "+data.result);
                                    $("#presult").css("color","red");
                                    $("#presult").fadeIn(500);
                                }

                            }
                        });
                        **$('#loadingImage').hide();**
                        return false;
                    });
        });

Answer 1

Problem is that your ajax function is asynchronous, so you are showing the loader, firing the ajax and inmediately hiding the loader, without waiting for the request to end.

Easy fix is putting the $('#loadingImage').hide(); inside the success function, but would be better to add a done function in case it fails

Answer 2

$("#btnAnalyseFile").click(function() etc...

shoudn't be

$("#btnAnalyseFile").on("click", function() { etc...

?