jQueryのショーのロードイメージボタン上のジョブが

Question

を終了したら、私は「（バックエンドで数スクリプトを実行し、フロントエンドの出力を表示します）2つのフォームを送信するためのボタンを使用しているボタンをクリックし、表示します。

HTML -

<form id="form2" class="form-wrapper" name="myForm" action="http://10.1.6.65/cgi-bin/testresult2.py" method="get" > 
    <div class="container"> 
    <label><b> Client Name</b></label> 
    <input id="clientName_details" placeholder="Enter client name" type="text" name="De_Client_name" required > 
    <label><b> Version</b></label> 
    <input id="Version_details" placeholder="Enter version" type="text" name="De_version" > 
    <label><b> DB Name</b></label> 
    <input id="dbName_details" placeholder="Enter DB name" type="text" name="De_dbname" > 
    <label><b> HOST Name</b></label> 
    <input id="hostName_details" placeholder="Enter HOST name" type="text" name="De_Host"> 
    <label><b> Email</b></label> 
    <input type="email" class="input-field" placeholder="Enter Email" name="email" value="" required/> 
    </div> 
    </form> 
    <dev class=bottom> 
    <form id> 
     <dev class=tag><b>Do you want to proceed with Upgrade : </b> </dev> 
    <input type="button" id="subbut" value="YES"> 
    <div id="divMsg" style="display:none;"> 
    <img src="http://www.javascriptsource.com/img/ajax-loader.gif" alt="Please wait.." /> 
</div> 
    <div id="msg"></div> 
    </form> 

JS -

$(document).ready(function() { 
     $("#subbut").click(function() { 
      $(this).parent().append('<img src="data:image/gif;base64,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" />'); 
      $.post($("#form1").attr("action"), $("#form1").serialize(), 
       function(data) { 
       $("#msg").append(data); 
       $.post($("#form2").attr("action"), $("#form2").serialize(), 
        function(data) { 
        $("#msg").append(data); 
         $(this).hide(); 
        }); 
       }); 
      }); 
     }); 

しかし、唯一の問題は、ロードは、我々はそうとすぐに実行の背後にあるコードはLOAを完了することを制限することができますどのように無限time.Butためです丁寧なイメージがなくなるはずです。あなたは、単純なショー/ここdivMsg

を非表示にしていないのはなぜ

Answer 1

は、あなたがこの$（この）.hide（）を隠しているコード

$(document).ready(function() { 
    $("#subbut").click(function() { 
     $("#divMsg").show(); 
     $.post($("#form1").attr("action"), $("#form1").serialize(), 
      function(data) { 
      $("#msg").append(data); 
      $.post($("#form2").attr("action"), $("#form2").serialize(), 
       function(data) { 
       $("#msg").append(data); 
        $("#divMsg").hide(); 
       }); 
      }); 
     }); 
    });