Как выполнить AjaxStart в общем javascript только по выбранной странице

Question

У меня есть файл Javascript, который имеет функцию ajaxStart, которая используется всеми страницами.

Моя проблема в том, что я хочу только отдельные страницы для доступа к 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> 

Код выше показывает загрузки GIF внутри DIV на кнопку мыши. Функция нажатия кнопки находится на разных HTML-страницах.

Answer 1

Мне не совсем понятно, если вы хотите, чтобы наложение на кнопку щелчка дополнительно активировалось при нажатии кнопки на функциональность onload или вместо нее.

В любом случае это, как вы бы вызвать его с помощью кнопки:

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 вызовет все вызовы ajax на всех страницах, даже на тех вызовах, которые вы не хотите показывать css. Я рекомендую вам вручную добавить css для каждого сделанного вами ajax-вызова, например:

$('.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"); 
    }); 
});