Question

JS/JQuery Newb here!

I have a value stored in variable, and I need to plug it into a particular <parameter> element associated with an <object>. Here’s an example of what I was hoping I could do:

<script>

    function SetParam(incomingValue){
         $('#baz').value = incomingValue ;
    }

    $(document).ready (function() {

       // jquery POST happens here, which takes a second or two to complete
       // SUCCESS condition calls SetParam() with a value  

        });
</script>

<object class="foo">
    <param name="bar" value="xyzzy" />
   <param name="baz" value="" id="baz" />
</object>

No joy. The baz parameter controls how the object is visually rendered, and I see no changes to indicate I’ve successfully changed the value.

I’m not sure if:

A. My syntax is wrong in terms of addressing the “baz” parameter in SetParam()

B. My syntax is fine, but the object has already rendered by the time I hit SetParam(), so setting the value of baz does nothing useful

C. All of the above

Can anyone kick me in the right direction?

(and if my problem includes scenario “B” – is there a way to delay the loading of that <object> until I’ve actually set the value of the <parameter> that I need to?)

Here’s a “JSFiddle” of same – Just found about about this and jsbin. Woot!

http://jsfiddle.net/sPhrw/

Answer 1

You’ll need to either use plain javascript, or jQuery:

$('#baz').val(incomingValue);

or

$('#baz')[0].value = incomingValue;

or

document.getElementById('baz').value = incomingValue; 

or

function SetParam(incomingValue){
     var $foo = $('<object class="foo"></object>'),
         $bar = $('<param name="bar" value="xyzzy" />'),
         $baz = $('<param name="baz" value="'+ incomingValue +'" id="baz" />');
         $foo.append($bar).append($baz).appendTo(someParent);
}