Question

如下所示，假设我在A.html中有一个点击按钮来打开一个ui对话框，并且对话框将加载B.html作为内容。

所以，如果我想在用户点击对话框中的“ok”按钮后得到B.html中id = inputName的值，我该怎么办？我总是得到“未定义”。

很抱歉，这可能是一个愚蠢的问题，因为我是jQuery的新手。如果你能帮助我，我会非常感激。

A.html

$(function(){
    $('#name').click(function(){
        var aaa = window.parent.$.dialog({
            buttons: {
                'ok': function(){
                    //get the value from B.html(ex.the value which id=inputName)
                    $aaa.dialog('close');
                }
            }
        });

        var link = 'B.html';
        aaa.load(link);
        aaa.dialog('open')
    });
}); //jquery code


<div>
    <input type="button" value="input your name" id='name'>
</div>  //html code

B.html

<input type="text" name="inputName" id="inputName"/>

Answer 1

这里的问题是.load（）是异步的。

可能的解决方案如下。关键是你只能在加载完成时，即在回调中弹出一个对话框。请注意，在下面的示例中，将创建一个不可见元素作为加载HTML的持有者。加载完成后，您可以遍历其子项或只从文档中获取元素：

<h1 id="dialogtest">Click me for a dialog!</h1>
<script type="text/javascript">
var myElementValue = null;
$(function(){
    $('#dialogtest').click(function(){
    var dialogElement = document.createElement("div");
    var link = 'B.html';
    $(dialogElement).load(
        link,
        function(responseText, textStatus, XMLHttpRequest) {
            alert('Load complete: ' + responseText + "; " + textStatus + ";\n " + dialogElement.outerHTML);
            var myDialog = $(dialogElement).dialog({
                autoOpen: false,
                buttons: {
                    'ok': function(){
                        // You can traverse the childNodes of dialogElement, or do just thie following.
                        // For example, this is the value of a text node:
                        myElementValue = document.getElementById("myElement").childNodes[0].data;
                        alert(myElementValue);
                        myDialog.dialog('close');
                    }
                }
            });
            $(myDialog).dialog('open'); // Can autoOpen it above instead
        }
    );
    });
}); //jquery code
</script>

Answer 2

实际上，我希望通过ajax请求获取B.html中用于CGI目的的值。换句话说，我完成了这项工作，将以下代码添加到 B.html ：

<script type="text/javascript">
var okBtn = $('.ui-dialog-buttonpane').children("button:last");
okBtn.click(function(){ ajaxRequest(); });

function ajaxRequest() {
        var data
        data.name = $('#inputName').val();
        var url="(cgi link)";
        $.get(url,data);
        return;
}
</script>

如何从外部页面加载的jQuery UI Dialog中检索值

2 个答案: