我在我的網站上有一個html表單。我打電話給裏面有三個值的jQueryUI對話框。當我在對話框中選擇其中一個值時,它將返回到html表單,但是html正在重新加載,並且所有其他字段都被清除。如何將數據從jQueryUI對話框傳遞迴html表單?
如何從對話框傳遞數據而不重新加載頁面並丟失數據?
我在我的網站上有一個html表單。我打電話給裏面有三個值的jQueryUI對話框。當我在對話框中選擇其中一個值時,它將返回到html表單,但是html正在重新加載,並且所有其他字段都被清除。如何將數據從jQueryUI對話框傳遞迴html表單?
如何從對話框傳遞數據而不重新加載頁面並丟失數據?
您可以引用表單中的元素(例如,如果您想更新其值),在按鈕的回調函數中添加一個選擇器。
下面的示例演示如何在用戶單擊jQuery UI對話框中的按鈕時更改ID爲result
的DIV的內容。
直播下面的例子:
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>
這就是: ) 謝謝你的幫助。 –
@MichalT太棒了!我很高興我的回答幫助你解決了你的問題。請不要忘記使用答案左側的「嘀嗒」圖標來接受/提升它。感謝您的協作和快樂編碼:) – GibboK
請發表你做了什麼已經你的代碼? – prasanth
有''return false'或jquery'event.preventDefault()'的形式阻止使用這裏有一些參考文獻http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_event_preventdefault – prasanth