Question

Based from this link: How to build a jQuery dialog for confirmation (yes/no) that can work anywhere in an app?
I have the following Code, using 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 ');
})

On page Load:
1. Click test dialog, keyin a value in the input field and click Check Value Button, it will give you the current input field value, then the dialog will close
2. Click again test dialog, keyin a NEW value in the input field and click Check Value Button, it will give you the PREVIOUS input field value, then the dialog will close

JsFiddle Here

Q: How can i get the latest field value in the dialog?

Thank you

Answer 1

You can try open dialog like this

<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