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

Question

我有一个 YUI 对话框，用于向 Java servlet 提交表单。 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

我不太清楚您的用例，但如果您只需要根据服务器响应动态创建一些按钮，那么在我看来，最好返回带有变量数据的 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);