ajaxでローディングバーを見せてもらうのに苦労しました

Question

ここで初めての質問は、専門家ではありません。

私は送信ボタンをクリックすると、そのscraper.phpを使用して情報をスクラップするフォームを持っています。

コンテンツがスクラップされることがありますが、ロードするには数秒（10〜）かかることがあります。そのため、スクラップ中に読み込み中のgifディスプレイが必要です。

私はローディングバーでdivを作成し、それをCSSでスタイリングし、noneを表示するように設定しました。ただし、[送信]をクリックしたときに表示されることはありません。

以下はjsコードと、それを動作させるために使用しようとしていた別の「古い」バージョンのコードです。どんな助けも非常に高く評価されるでしょう。

$("#search").submit(function(e) { 
    $('#wait').show(); 
    var url = "scraper.php"; 
    $.ajax({ 
     type: "POST", 
     url: url, 
     data: $("#search").serialize(), 
     success: function (data) { 
      render (data); 
      $('#wait').hide(); 
     } 

    }); 
    e.preventDefault(); // avoid to execute the actual submit of the form. 

、ここでは、私も試してみました、古いコードです：

$("#search").submit(function(e) { 
var url = "scraper.php"; 
$.ajax({ 
type: "POST", 
url: url, 
beforeSend: function() { $('#wait').show(); }, 
complete: function() { $('#wait').hide(); }, 
data: $("#search").serialize(), 
     success: function (data) { render (data); } 

}); 

、ここでそれぞれのHTML & CSSコードです：

<div id="wait"></div> 

#wait { 
display: none; 
position: fixed; 
z-index: 1000; 
top:  0; 
left:  0; 
height:  100%; 
width:  100%; 
background: rgba(255, 255, 255, .8) 
      url('http://i.stack.imgur.com/FhHRx.gif') 
      50% 50% 
      no-repeat; 
} 

ありがとう！

Answer 1

それは仕事、見るん：

function showwait() { 
 
    $('#wait').show(); 
 
}

#wait { 
 
display: none; 
 
position: fixed; 
 
z-index: 1000; 
 
top:  0; 
 
left:  0; 
 
height:  100%; 
 
width:  100%; 
 
background: rgba(255, 255, 255, .8) 
 
      url('http://i.stack.imgur.com/FhHRx.gif') 
 
      50% 50% 
 
      no-repeat; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wait"></div> 
 

 
<button onclick="showwait();">Show</button>

は何をする必要があるので、同様にあなたの関数の先頭に$('#wait').show();一部を移動さ：

$("#search").submit(function(e) { 
    $('#wait').show(); 
    var url = "scraper.php"; 
    $.ajax({ 
    type: "POST", 
    url: url, 
    complete: function() { $('#wait').hide(); }, 
    data: $("#search").serialize(), 
    success: function (data) { render (data); } 
    }); 
}); 

Answer 2

ますそれを持っている。私はCSSに関するいくつかの事柄を変えるだろう。ここでは、あなたのコードを使ってJSFiddleを使ってそれを行う方法を示します。あなたのウェブサイトで使用しないのjQueryのバージョンは何

https://jsfiddle.net/iamjpg/aep4hguh/

CSS

#wait { 
    display: none; 
    position: absolute; 
    z-index: 1000; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    background: rgba(255, 255, 255, .8) url('http://i.stack.imgur.com/FhHRx.gif') center center no-repeat; 
} 

Javascriptを

// Mimic Ajax Call 
var submitForm = function() { 
    $('#wait').show(); 
    $.ajax({ 
    method: 'get', 
    url: ' https://jsfiddle.net/echo/jsonp/', 
    dataType: 'jsonp', 
    success: function() { 
     // Mimic wait 
     setTimeout(function() { 
     $('#wait').hide(); 
     alert('DONE!'); 
     }, 5000) 
    } 
    }) 
} 

$('button').on('click', submitForm) 

HTML

<div id="wait"></div> 
<button> 
    Submit Form 
</button>