Problem using dynamically added html object from javascript

Question

I have a problem with dynamically including an object tag in my html. We have an external service that we call to get some html fragment, it includes a tag object, a script and a simple html form. I take this content and add it to a div on my page, and then try to execute a script that uses the included object. When I debug using Firebug, I see that the code is correctly inserted into the page, but the script receives an error message when trying to access the object. It seems to me that the object is not initialized. Let me show you some code to show what I mean.

getFragment makes an ajax call using jQuery to get the content.

var htmlSnippet = RequestModule.getFragment( dto );
$('#plugin').html( htmlSnippet ).hide();

The included content in the plugin-div is as follows

<div id="plugin" style="display: none; ">
    Browser:
    Chrome
    <object name="signer" id="signer" type="application/x-personal-signer2"></object>

<form method="POST" name="signerData" action="#success">
    <input name="nonce" value="ASyhs..." type="hidden">
    <input name="signature" value="" type="hidden">
    <input name="encodedTbs" value="U2l..." type="hidden">
    <input name="provider" value="nexus-personal_4X" type="hidden">

    <input type="submit" onclick="doSign()" value="Sign">
</form>
</div>

The javascript that is trying to use the "signer" object is as follows:

function doSign(){
    var signer2 = document.getElementById("signer");

   retVal = signer2.SetParam('TextToBeSigned', 'some value...');

   ... and then some more
}

Its when I call the signer2.SetParam method, I get an error

Object #<an HTMLObjectElement> has no method 'SetParam'

But when I use the source page on which the content is loaded, when the page loads the script work, I know that there is a SetParam method for the object and that the script works. But for some reason this does not work when I dynamically add it to the page later.

Ive googled this a lot the last couple of days with no luck. Does anyone know how to make this work?

Regards, Henrik

Answer 1

() , , jQuery ( document.createDocumentFragment) / / DOM, , .

, , document.createElement document.appendChild jQuery.html. document.innerHTML, , , .

, :

<script type="text/javascript">
function addElement(parentid, tag, attributes) {
    var el = document.createElement(tag);
    // Add attributes
    if (typeof attributes != 'undefined') {
        for (var a in attributes) {
          el.setAttribute(a, attributes[a]);
        }
    }

    // Append element to parent
    document.getElementById(parentid).appendChild(el);
}
addElement('plugin', 'object', {name:"signer",id:"signer",type:"application/x-personal-signer2"});
</script>

, , , :

<script type="text/javascript">
    /*
     * Goes through al the object tags in the element with the containerid id
     * and tries to re-create them using the DOM builtin methods
     */
    function reattachObjectTags(containerid) {
        jQuery('#'+containerid+' object').each(function(){
            var attrs = {}, el = this;
            // We're insterested in preserving all the attributes
            var saved_attrs = {}, attr;
            for(var i=0; i < el.attributes.length; i++) {
                attr = el.attributes.item(i);
                if(attr.specified) {
                    saved_attrs[attr.nodeName]=attr.nodeValue;
                }
            }
            this.parentNode.removeChild(this);

            var new_element = document.createElement('object');
            for (var a in saved_attrs) {
                new_element.setAttribute(a,saved_attrs[a]);
            }
            document.getElementById(containerid).appendChild(new_element);
        });
    }

    // Do your stuff
    var htmlSnippet = RequestModule.getFragment( dto ); 
    $('#plugin').html( htmlSnippet ).hide();
    // reattach all the object elements in #plugin
    reattachObjectTags('plugin');
</script>

• - , IE .

Answer 2

script : https://dl.dropbox.com/u/74874/test_scripts/object.html

Firebug/Web Inspector, , SetParam . , , . <param> , DOM API . script , , :

var obj_signer = document.getElementById('signer');

var obj_p = document.createElement('param');
    obj_p.id = "myp2"; 
    obj_p.name = "TextToBeSigned";
    obj_p.value = "some value ...";
    obj_p.setAttribute('valueType', 'ref');
obj_signer.appendChild(e);

jQuery:

$("#signer").append("<param id='myp2' name='TextToBeSigned' value='some value ...' valueType='ref'></param>");

Answer 3

jQuery , :

$("input:submit").click(function(){
    $("#signer").append('<param name="TextToBeSigned" value="some value ...">');

    ... and then some more
});

, class id , .

, .