Задержка открытия диалогового окна JQuery в методе Javascript

У меня есть кнопка сохранения на моей чистой HTML-странице, где я вызываю функцию JS, которая использует XMLHttpRequest для сохранения данных. Я пытаюсь реализовать модальное всплывающее окно JQuery, которое будет показывать загружаемое изображение при нажатии кнопки сохранения. Но для открытия диалога требуется около 2 секунд, может кто-нибудь скажет мне, почему.Задержка открытия диалогового окна JQuery в методе Javascript

Вот HTML часть

<div id="dialog1" title="Waiting" style="text-align:center;background-color:#ffffff;border:none;display:none;"> 
    <img src="~/Images/icon-load.gif" border="0" align="left" hspace="12" height="175" width="175" />

Вот та часть JS

function addnewentity() { 


var aa= document.getElementById('aaa').value; 
var bb= document.getElementById('bbb').value; 
var cc= document.getElementById('ccc').value; 
var validation = document.getElementById("valmsgentity"); 

if (aa!= "" && bb!= "" && cc!= "") { 

    validation.style.display = "none"; 
    $('#dialog1').dialog('open'); 
    $("#dialog1").prev(".ui-dialog-titlebar").hide(); 

    var source = { 
     "A": aa, "B":bb , "C": cc 
    } 

    var jsonsource = JSON.stringify(source); 
    var method = "POST"; 
    var request = new XMLHttpRequest(); 
    request.onload = function() { 
     var status = request.status; 
     var data = request.responseText; 
    } 
    request.open(method, createurl, false); 
    request.setRequestHeader("Content-Type", "application/json;charset=UTF-8"); 
    request.send(jsonsource); 

    setTimeout(function() { 
     $('#dialog1').dialog('close'); 

     ScrollToTop(); 

     $("#message").show(); 

     //200 OK ; 201 Created ; 202 Accepted 
     if (request.status == 200 || request.status == 201 || request.status == 202) { 

      $("#message").text('Added successfully!!!'); 
      $("#message").css("color", "green"); 
      setTimeout(function() { fadeLabelOut(); }, 5000); 
      setTimeout(function() { location.reload(); }, 7000); 
     } 
     else { 

      $("#message").text("Failed to add !!!"); 
      $("#message").css("color", "red"); 
      setTimeout(function() { fadeLabelOut(); }, 5000); 
      console.log(request.responseText); 
     } 
    }, 2500); 
} 
else { 
    validation.style.display = "block"; 
}

}

источник

2015-12-15 Arjun Menon

Измените false на true в request.open (...). Вы хотите async, а не синхронизацию. – Drakes

Если его синхронно, это означает, что запрос будет ждать ответа на выполнение программы для продолжения rt? Поэтому я сначала вызываю открытый метод, поэтому откроется диалоговое окно, тогда мы вызываем только xmlhttprequest и ожидаем ответа и делаем все остальное, поэтому почему тогда задержка. В любом случае работа с ur предложением :) –

Но это изменение вызвало серьезную проблему, потому что мое условие, в котором проверено код ответа, всегда отображается неудачно, поскольку эта строка кода не ждет ответа. –

На самом деле я был в состоянии решить эту проблему, сделав запрос асинхр и запись зависимого кода после успеха/неудачи в request.readyStateChanged ev так вот.

 request.onreadystatechange = function() { 
     if (request.readyState == 4) { 

      $('#dialog1').dialog('close'); 
      ScrollToTop(); 

      $("#message").show(); 

      //200 OK ; 201 Created ; 202 Accepted 
      if (request.status == 200 || request.status == 201 || request.status == 202) { 
       $("#message").text('Attribute deleted successfully!!!'); 
       $("#message").css("color", "green"); 
       setTimeout(function() { fadeLabelOut(); }, 5000); 
       setTimeout(function() { attributedetails(); }, 6500); 
      } 
      else { 
       $("#message").text("Failed to add attribute!!!"); 
       $("#message").css("color", "red"); 
       setTimeout(function() { fadeLabelOut(); }, 5000); 
      } 
     } 
    }

Спасибо Drakes за вход asyn, который действительно помог мне.

источник

2015-12-16 09:46:12

Задержка открытия диалогового окна JQuery в методе Javascript

ответ

Смежные вопросы