从函数的UI对话框中获取最新的字段值

时间:2012-11-29 03:42:38

标签: jquery jquery-ui

基于此链接:How to build a jQuery dialog for confirmation (yes/no) that can work anywhere in an app?
我有以下代码,使用IE 8

HTML

<ol>
    <li>
        <span class="title">Item 1</span>
        <span class="test">test dialog</span>
    </li>
</ol>

Javascript

function MergeRenameDialog(button1, button2) {
    var btns = {};
    btns[button1] = function() {
        alert($('#mergedPreDefinedNewFilterName').val())
        $(this).dialog("close");
    };
    btns[button2] = function() {
        // Do nothing
        $(this).dialog("close");
    };
    $("<div id='MergeRenameDiv' style='text-align:left'><label>Keyin your New Filter Name.</label><br><br><input id='mergedPreDefinedNewFilterName' /></div>").dialog({
        autoOpen: true,
        width: 450,
        height: 200,
        modal: true,
        resizable: false,
        position: 'center',
        title: 'xxx',
        modal: true,
        buttons: btns
    });
}
$('.test').click(function() {
    MergeRenameDialog('Check Value ', 'Close ');
})

页面加载:
1.单击测试对话框,键入输入字段中的值并单击检查值按钮,它将显示当前输入字段值,然后对话框将关闭
2.再次单击测试对话框,在输入字段中键入 NEW 值,然后单击Check Value按钮,它将为您提供 PREVIOUS 输入字段值,然后对话框将关闭

JsFiddle Here

问:如何在对话框中获得最新字段值?

谢谢

1 个答案:

答案 0 :(得分:0)

你可以试试像这样的对话

<ol>
<li>
    <span class="title">Item 1</span>
    <span class="test">test dialog</span>
</li>
</ol>
<div id='dialogshow'></div>

function MergeRenameDialog(button1, button2) {
document.getElementById('dialogshow').innerHTML = "<div id='MergeRenameDiv' style='text-align:left'><label>Keyin your New Filter Name.</label><br><br><input id='mergedPreDefinedNewFilterName' /></div>";
$( "#dialogshow" ).dialog({
    width: 450,
    height: 300,
    modal: true,
    resizable:false,
    title: 'xxx',
    buttons: {
        Checkvalue: function()
        {
            alert($('#mergedPreDefinedNewFilterName').val());
                            $( this ).dialog( "close" );
        },
        Close: function() {
            $( this ).dialog( "close" );
        }
    }
});

}

$('.test').click(function() {
MergeRenameDialog('Check Value ', 'Close ');
})​;

Check this Fiddle