Question

I have a YUI dialog that submits a form to a Java servlet. The servlet returns html and javascript. I take the response and put it into a div on the page and then eval the javascript that is within the div.

My problem is that I get an error in the firebug console saying “YAHOO is not defined” as soon as the servlet returns.

I do not include the YUI js files in the servlet as I didn’t think I would need them, I would expect the files included in the head of the main page would be sufficient.

If I remove all references to YUI from the javascript returned by my servlet then everything works well.

What should I do to stop getting this error as soon as my servlet returns?

My Servlet returns something along the lines of:

<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>

Here is the code that I used to create the dialog, i use the handleSuccess function to put my response from my servlet into the page (note that even though im not actively putting the javascript into the page it still throws the ‘YAHOO not defined’ error.):

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

I don’t know your use case exactly, but if you just need to create some buttons on the fly based on server response, than it would IMO be better to return JSON or XML data with the variable data and then create the buttons. Something like

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

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

And if you really want to append a script node, then the following approach should work:

   var response = o.responseText;

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