Changing just one of the params in an object tag

@klanga2049Nov 27.2007

As you probably know, objects tags go like:

[code=html]<object…> <param name=”X” value=”Y”> <param name=”X” value=”Y”> <param name=”X” value=”Y”> … <embed…> </embed> </object>[/code]

I’ve given an ID to my of my params:

[code=html]<param id=”dynamicparam” name=”X” value=”Y”>[/code]

And now all I want to do is:

[code=html]<a href=”#” onclick=’document.getElementById(“dynamicparam”).value=”Whatever”; return false’>Replace the default dynamicparam’s value</a>[/code]

I’ve confirmed it actually works by doing:

[code=html]<a href=”#” onclick=’alert(document.getElementById(“dynamicparam”).outerHTML); return false’>Show the current dynamicparam</a>[/code]

But the object tag just doesn’t get updated!

The only way I’ve managed to find in order to update the object tag was by replacing the whole tag:

[code=html]<object id=”myobject”…> … <a href=”#” onclick=’document.getElementById(“myobject”).outerHTML=”<object … entire paragraphs of code … </object>”; return false’>Replace the whole object tag…</a>[/code]

But it looks very – very – inefficient to me. Why can’t I just replace the value of one poor param?

to post a comment

JavaScript

9 Comments(s) _↴

@TheBearMayNov 27.2007 — #Issue is that object is instantiated at page load and does not recheck the parameters.

@klanga2049authorNov 27.2007 — #Hmm, I suspected that. Is there a way to reload it then?

Also, is there a list of dynamic tags (e.g. "font") vs. static tags (e.g. "object")?

@TheBearMayNov 27.2007 — #Not sure that you have any dynamic tags, just some that are easier to affect a visual difference to. For objects you can separate the declaration and the initialization ( http://www.w3.org/TR/html401/struct/objects.html ) which may give you some leverage. If that doesn't work, removing the object node and adding a new one usually does.

@klanga2049authorNov 27.2007 — #If that doesn't work, removing the object node...[/QUOTE]
How?

@TheBearMayNov 27.2007 — #Off the top of my head something like:

<i>
 </i>var pNode = document.getElementById("myobject").parentNode;
 pNode.removeChild(document.getElementById("myobject"));

should be close...

@klanga2049authorNov 27.2007 — #I've tried this:

[CODE]document.getElementById("myparam").value="whatever"
 ...
 oldobject = pNode.removeChild(document.getElementById("myobject"))
 document.getElementById('anotherid').appendChild(oldobject)[/CODE]

But what happens is that it restores the [B]original[/B] object without "resetting" it after I've changed one of the params.

I see no other choice than putting the whole object tag in a script:

[CODE]<span id="dynamicobject" style="display:none"></span>
 
 <script>
 function myobject(myparam_value) {
 newobject = '<object...>
 <param name="dynamicparam" value="' + myparam_value+ '"...
 ...
 </object>'
 document.getElementById("dynamicobject").innerHTML = newobject
 }
 myobject("default_whatever")
 document.getElementById("dynamicobject").style.display = ""
 </script>[/CODE]

And then I can create as many links with onclick='myobject("whatever")' as I want.

@TheBearMayNov 28.2007 — #Might want to try:

<i>
 </i>document.getElementById("myparam").value="whatever";
 var pNode = document.getElementById("myobject").parentNode;
 var newObj = document.getElementById("myobject").cloneNode(true);
 pNode.removeChild(document.getElementById("myobject"));
 pNode.appendChild(newObj);

@klanga2049authorDec 01.2007 — #Yes, cloning and appending did the job, thanks!

Do you know why it actually works? Because of the deepBoolean - that is, the word "true" in cloneNode(true) also copies sub-nodes. In this case (when the node is object), the params and not just the embed.

There's also a problem. I don't manage to do it more than once. My whole point is to be able to have a function that accepts a newparam and applies it.

@klanga2049authorDec 03.2007 — #There's no need to use removeChild and appendChild because there's also replaceChild.

As for the problem, it happens (at least in IE6) when you try to run the function from within its own script. I've fixed it using a pause function (even using 0 iMilliseconds is enough):

[CODE]<script>
 function pause( iMilliseconds )
 {
 var sDialogScript = 'window.setTimeout( function () { window.close(); }, ' + iMilliseconds + ');';
 window.showModalDialog('javascript:document.writeln ("<script>' + sDialogScript + '<' + 
 
 '/script>")');
 }
 
 function changeparam(param_value) {
 document.getElementById("myparam").value=param_value
 pNode = document.getElementById("myobject").parentNode;
 // Uncomment this if you plan to run this function from within this script:
 //pause(0)
 newObj = document.getElementById("myobject").cloneNode(true);
 pNode.replaceChild(newObj, document.getElementById("myobject"))
 }
 
 // If you uncomment the following, you must also uncomment the call to "pause" in the function:
 /*
 changeparam("whatever")
 changeparam("whatever")
 changeparam("whatever")
 */
 
 </script>
 
 <!-- The following works fine even without pausing -->
 
 <p>
 <a href="#" onclick='changeparam("whatever"); return false'>Enable file #1</a>
 <p>
 <a href="#" onclick='changeparam("whatever"); return false'>Enable file #2</a>
 <p>
 <a href="#" onclick='changeparam("whatever"); return false'>Enable file #3</a>[/CODE]

With this solved, now the question is how to change the relevant parameter in the internal embed tag?

See, it doesn't have its own ID (if you declare one, it's simply ignored).

Also in #JavaScript _↴

Is it possible to read the console and display the messages in the User Interface.file copy Rpg javascript

Success!

Help @klanga2049 spread the word by sharing this article on Twitter...

Tweet This

Changing just one of the params in an object tag

9 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Changing just one of the params in an object tag

9 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

9 Comments(s) _↴

Also in #JavaScript _↴