диалоговое окно JQuery UI закрывается ввести в поле ввода

Question

открыть диалог мой с помощью кнопки затем поместить мой курсор в поле ввода и прессы введите свои диалоговые закрывается и эта строка вставляется в адресную строку:

JQuery:

$('#dialog').load("form-incident.php").dialog({ 
    title: "Add Incident", 
    autoOpen: false, 
    resizable: false, 
    width: 800, 
    modal:true, 
    position: ['center', 'top+50'], 
    buttons: { 
     Add: function(){ 
      $.ajax({ 
       url  : 'save.php', 
       type : 'POST', 
       data : $('form').serialize(), 
       context: $(this), 
       success: function (result) { 
        if (result === "true") { 
         alert('Incident has been added successfully'); 
        } else { 
         alert('ERROR: Cannot insert data to MySQL table'); 
        } 
        window.location.reload(); 
        $(this).dialog("close"); 
       }, 
       error : function(){ 
        alert('ERROR: Check database connection'); 
       } 
      }); 
     }, 
     Cancel: function() { 
      $(this).dialog("close"); 
     } 
    } 
}); 

форм-incident.php:

<form> 
    Name: <input type="text" name="name" id="name"><br><br> 
    Project: 
    <select name="project" id="project"> 
     <option value="test">Test</option> 
    </select><br><br> 
    Incident:<br> <textarea name="incident" id="incident" style="resize:none; width: 100%;" rows="14" cols="94"></textarea> 
</form> 

Как я могу исправить проблему, поэтому диалоговое окно не закрывается, но все же реагирует на ввод, если были какие-то предложения раньше, когда форма была заполнена?

Answer 1

Хорошо, я забыл, что неявное представление все равно произойдет, если в форме есть только один элемент ввода, даже если отсутствует кнопка отправки.

Итак, похоже, что проблема возникает из представленной формы. Но в этом случае вызов preventDefault() на отправку даже исправит.

Я собрал скрипку с фрагментами кода сверху и смог воспроизвести проблему. Как только я положил в preventDefault(), это прекратилось. Проверьте его и посмотрите, как он отличается от вашего кода в реальном времени.

https://jsfiddle.net/elezar/u0sfx22p/2/