отображение загрузки изображения с jquery/ajax

Question

Я пытаюсь отобразить вращающееся изображение, пока выполняется вызов ajax. Я использую следующий код jsp и jquery, но он не работает. Любая помощь будет оценена :

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> 

и вот код JQuery

$(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

Проблема в том, что ваша функция ajax является асинхронной, поэтому вы показываете загрузчик, запускаете ajax и сразу скрываете загрузчик, не дожидаясь завершения запроса.

Легко исправить ставит $('#loadingImage').hide(); внутри функции успеха, но было бы лучше, чтобы добавить функцию сделано в случае, если она не

Answer 2

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

shoudn't быть

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

?