使用 ajax 请求的 YUI 对话框 - 想要执行从 Java 返回但超出范围的 javascript

Question

我有一个向 Java servlet 提交表单的 YUI 对话框。 servlet 返回 html 和 javascript。我将响应放入页面上的 div 中，然后评估 div 中的 javascript。

我的问题是，当 servlet 返回时，我在 firebug 控制台中收到错误消息“未定义 YAHOO”。

我没有在 servlet 中包含 YUI js 文件，因为我认为我不需要它们，我希望包含在主页头中的文件就足够了。

如果我从我的 servlet 返回的 javascript 中删除所有对 YUI 的引用，那么一切正常。

当我的 servlet 返回时，我应该怎么做才能停止收到此错误？

我的 Servlet 返回如下内容：

<div id="features">some html to display</div>
<script id="ipadJS" type='text/javascript'>
var editButton1 = new YAHOO.widget.Button('editButton1', { onclick: { fn: editButtonClick, obj: {id: '469155', name : 'name 1'}  } });
var editButton2 = new YAHOO.widget.Button('editButton2', { onclick: { fn: editButtonClick, obj: {id: '84889', name : 'name 2'}  } });
</script>

这是我用来创建对话框的代码，我使用 handleSuccess 函数将来自我的 servlet 的响应放入页面中（请注意，即使我没有主动将 javascript 放入页面中，它仍然会抛出 'YAHOO未定义的错误。）：

YAHOO.namespace("ipad");

YAHOO.util.Event.onDOMReady(function () {

    // Remove progressively enhanced content class, just before creating the module
    YAHOO.util.Dom.removeClass("createNewFeature", "yui-pe-content");

    // Define various event handlers for Dialog
    var handleSubmit = function() {
        this.submit();
    };
    var handleCancel = function() {
        this.cancel();
    };
    var handleSuccess = function(o) {
        var response = o.responseText;
        var div = YAHOO.util.Dom.get('features');
        div.innerHTML = response;
    };


    var handleFailure = function(o) {
        alert("Submission failed: " + o.status);
    };

    // Instantiate the Dialog
    YAHOO.ipad.createNewFeature = new YAHOO.widget.Dialog("createNewFeature", 
                            { width : "450px",
                              fixedcenter : true,
                              visible : false, 
                              constraintoviewport : true,
                              buttons : [ { text:"Submit", handler:handleSubmit, isDefault:true },
                                      { text:"Cancel", handler:handleCancel } ]
                            });

    // Validate the entries in the form to require that both first and last name are entered
    YAHOO.ipad.createNewFeature.validate = function() {
        var data = this.getData();
                return true;
    };

    YAHOO.ipad.createNewFeature.callback = { success: handleSuccess,
             failure: handleFailure,
             upload: handleSuccess };

    // Render the Dialog
    YAHOO.ipad.createNewFeature.render();

    var createNewFeatureShowButton = new YAHOO.widget.Button('createNewFeatureShow');

    YAHOO.util.Event.addListener("createNewFeatureShow", "click", YAHOO.ipad.clearFeatureValues, YAHOO.ipad.clearFeatureValues, true);

    var manager = new YAHOO.widget.OverlayManager(); 
    manager.register(YAHOO.ipad.createNewFeature);
});

Answer 1

我不完全了解您的用例，但如果您只需要根据服务器响应动态创建一些按钮，那么 IMO 最好返回带有可变数据的 JSON 或 XML 数据，然后创建纽扣。类似的东西

var reply = eval('(' + o.responseText + ')');

var editButton1 = new YAHOO.widget.Button('editButton1', 
                     { onclick: { fn: editButtonClick, 
                      obj: {id: reply[id], name : reply[name]}
  } })

如果你真的想附加一个脚本节点，那么下面的方法应该可以工作：

   var response = o.responseText;

   var snode = document.createElement("script");
   snode.innerHTML = response;
   document.body.appendChild(snode);