選択したページのみで共通のJavaScriptでAjaxStartを実行する方法

Question

すべてのページで使用されるajaxStart関数を持つJavascriptファイルがあります。

私の問題は、ボタンをクリックしてajaxStartにアクセスするには、選択したページだけを必要とします。これをどのように実装すればよいですか？

JS：

$(document).ready(function() 
{ 
    $(document).ajaxStart(function() 
    { 
     $("#overlay").css 
     ({ 
     "display"   : "block", 
     "background-color" : "rgba(255, 255, 255, 0.4)", 
     "width"    : $(document).width(), 
     "height"   : $(document).height(), 
     "position"   : "absolute", 
     "z-index"   : 99999 
     }) 
    }); 
    $(document).ajaxComplete(function() 
    { 
     $("#overlay").css("display", "none"); 
    }); 
}); 

HTML：

<div id="overlay" style="display:none"> 
    <img src='loading.gif'/> 
</div> 

上記のコードは、ボタンクリックでdivの内側に搭載GIFを表示します。ボタンのクリック機能は異なるHTMLページにあります。

Answer 1

オンロード機能のボタンをクリックするか、その代わりにボタンをクリックしてボタンをクリックしたときにオーバーレイを追加したいかどうかはわかりません。

HTML：：

<button onclick="overlay()">Click me for Overlay</button> 

JS：この

いずれかの方法を使用すると、ボタンを経由して、それをトリガーする方法です

function overlay(){ 
    $(document).ajaxStart(function() 
    { 
     $("#overlay").css 
     ({ 
     "display"   : "block", 
     "background-color" : "rgba(255, 255, 255, 0.4)", 
     "width"    : $(document).width(), 
     "height"   : $(document).height(), 
     "position"   : "absolute", 
     "z-index"   : 99999 
     }) 
    }); 
    $(document).ajaxComplete(function() 
    { 
     $("#overlay").css("display", "none"); 
    }); 
} 

Answer 2

他のと同じスクリプトでそれを入れないでくださいこの場合common.javaに一般的なスクリプトがあります。 'ajaxstart.java'などの別のファイルに入れて、使用する選択されたページにのみ配置します。

しかし、このajaxStartイベントを使用すると、cssを表示したくない呼び出しであっても、すべてのページですべてのajax呼び出しがトリガーされます。あなたが作った各AjaxコールにCSSを手動で追加することをお勧めします。

$('.button').click(function() { 
    // Button click, calling ajax function 
    $("#overlay").css 
    ({ 
    "display"   : "block", 
    "background-color" : "rgba(255, 255, 255, 0.4)", 
    "width"    : $(document).width(), 
    "height"   : $(document).height(), 
    "position"   : "absolute", 
    "z-index"   : 99999 
    }); 

    $.post('script.php', 
    { 
     variable: variable, 
     char: char, 
    }, function(result) { 
     alert(result); 
     // When ajax call complete 
     $("#overlay").css("display", "none"); 
    }); 
});