Как передать данные из диалога jQueryUI обратно в форму html?

Question

У меня есть html-форма на моем сайте. Я вызываю диалоговое окно jQueryUI с тремя значениями внутри. Когда я выбираю одно из значений в диалоговом окне, он возвращается к форме html, но html перезагружается и все остальные поля очищаются.

Как передать данные из диалога без перезагрузки страницы и потери данных?

Answer 1

Вы можете ссылаться на элемент в форме (например, если вы хотите обновить его значение), добавив селектор в функцию обратного вызова для кнопок.

В следующем примере показано, как изменить содержимое DIV с идентификатором result, когда пользователь нажимает кнопку в диалоговом окне пользовательского интерфейса jQuery.

Живой пример ниже:

http://jsfiddle.net/gibbok/m7gzt32o/

---

$("#dialog-message").dialog({ 
    modal: true, 
    draggable: false, 
    resizable: false, 
    position: ['center', 'top'], 
    show: 'blind', 
    hide: 'blind', 
    width: 400, 
    dialogClass: 'ui-dialog-osx', 
    buttons: { 
    "I've read and understand this": function() { 
     // this code s executed when user click the button inside the dialog 
     $(this).dialog("close"); 
     $('#result').text('some info here'); 
    } 
    } 
}); 

---

body { 
    font: normal normal normal 10px/1.5 Arial, Helvetica, sans-serif; 
} 

.ui-dialog-osx { 
    -moz-border-radius: 0 0 8px 8px; 
    -webkit-border-radius: 0 0 8px 8px; 
    border-radius: 0 0 8px 8px; 
    border-width: 0 8px 8px 8px; 
} 

---

<p>Hello World! 
</p> 

<form> 
<div id="result"></div> 
<div id="dialog-message" title="Important information"> 
    <span class="ui-state-default"><span class="ui-icon ui-icon-info" style="float:left; margin:0 7px 0 0;"></span></span> 
    <div style="margin-left: 23px;"> 
    <p> 
     We're closed during the winter holiday from 21st of December, 2010 until 10th of January 2011. 
     <br /> 
     <br /> Our hotel will reopen at 11th of January 2011. 
     <br /> 
     <br /> Another line which demonstrates the auto height adjustment of the dialog component. 
    </p> 
    </div> 
</div> 
</form>