Вот что я хочу / пытаюсь сделать.
Есть форма. Форма имеет кнопку отправки. событие onMouseDown () для кнопки отправки:
<input type='submit' value='Search' name='save' id='save' onmousedown = 'DimOn("test.php", "SearchResultDiv")' /> Теперь, как только кнопка нажата, я хочу, чтобы она делала три вещи в ТОЧНОМ порядке.
1) Снизьте страницу.
2) Выполните запрос Ajax и заполните результаты поиска.
3) Снимите габарит.
РЕДАКТИРОВАТЬ:
Даже попытался использовать beforeSend и завершить события в объекте jQuery
function DimOn(sUrl, sElement) { jQueryAjax(sUrl, sElement); } function jQueryAjax(sUrl, sElement) { $.ajax({ url: sUrl, type: 'GET', async: false, cache: false, timeout: 1000, beforeSend: function(){ $('#dim').fadeIn(); }, complete : function(){ $('#dim').fadeOut(); }, error: function(){ return true; }, success: function(msg){ if (msg != '') PopulateResponse(msg, sElement, false); else PopulateResponse("An Error Has Occured.", sElement, false); } }); }
В настоящее время он будет выглядеть следующим образом:
2) Выполните запрос Ajax и заполните результаты поиска.
2) Снизьте страницу.
3) Снимите габарит.
Где результат заселяется (занимает десять секунд), а диммер быстро и быстро мигает.
Пожалуйста, одолжите мне помощников в команде, я не чужд этой технологии, и почему я отключил асинхронный режим, чтобы попытаться заставить вещи произойти по порядку, но все равно НЕ ДИВАТЬ.
Я решил эту проблему с помощью этой функции:
function jax(sUrl, sElement, bEval, sType, bAsync) { $.ajax({ url: sUrl, type: sType, async: true, cache: false, timeout: 30000, error: function() { return true; }, beforeSend: function(){ $('div#dim').fadeIn(400); }, complete : function(){ $('div#dim').fadeOut(200); if(sUrl.search(/scroll=true/ig) != -1) goToByScroll(sElement); }, success: function(msg){ if (msg != '') { PopulateResponse(msg, sElement, bEval); } else { PopulateResponse("An error has occurred.", sElement, bEval) //Coming soon, ajax call to php file to log javascript failure. } } }); }
Этот CSS
div#dim { background-color:#000; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter: alpha(opacity=60); opacity:.6; height:100%; width:100%; position:fixed; top:0; left:0; z-index:1005; display:none; cursor:wait; } div#dim div { position:relative; top:400px; z-index:1006; text-align:center; cursor:wait; } div#dim div img { z-index:1007; text-align:center; border:none; cursor:wait; }направоdiv#dim { background-color:#000; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter: alpha(opacity=60); opacity:.6; height:100%; width:100%; position:fixed; top:0; left:0; z-index:1005; display:none; cursor:wait; } div#dim div { position:relative; top:400px; z-index:1006; text-align:center; cursor:wait; } div#dim div img { z-index:1007; text-align:center; border:none; cursor:wait; }
и этот HTML-код
<div id='dim'><div style="text-align:center;"><img src="Images/Loading/loading10.gif" alt="Loading... please wait" title="Loading... please wait" /></div></div>