changing param value of object in html using ajax

Question

Hello all,

I am building a small web application to run midi files. Currently I am using quick time to play the midi files. The problem is that I do not know to what source I need to tie the object until the user enters some information (something like a search ). I need to be able to update the quicktime movie to the correct path. Is it possible? Does ajax support this?

Answer 1

AJAX is a technique. What you want to do is to change the QuickTime Movie path with JavaScript.

var qtMovie=document.getElementById('yourMovieEmbedID');
qtMovie.src='your new source';

You should wrap this code in a function and run it when the user clicks on the OK button.

Answer 2

If you actually need to add a <param> (as opposed to adjusting an attribute value), I've discovered that grabbing the <object>, cloning it, adding the <param> and then replacing the current <object> tag seems to work in most browsers (although it doesn't seem to work in Firefox). See this answer for a working example.

That linked answer is for every <object> on a page, here is how you would do it for a single instance of the tag:

// create the appropriate <param>
var elementToAppend = document.createElement('param');
elementToAppend.setAttribute('name', 'src');
elementToAppend.setAttribute('value', 'blah.midi');
// get a reference to the <object>
var obj = document.getElementById('yourMidiPlayerObject');
// duplicate the <object>
var newObj = obj.cloneNode(true);
// append the <param> to the <object>
newObj.appendChild(elementToAppend);
// replace the <object> on the page
obj.parentNode.replaceChild(newObj, obj);

If the <param> you want to modify already exists things are a bit different:

// get a reference to the <object>
var obj = document.getElementById('yourMidiPlayerObject');
// duplicate the <object>
var newObj = obj.cloneNode(true);
// get a reference to the current <param>
var param = document.getElementById('theParamId');
// duplicate the <param>
var newParam = param.cloneNode(true);
// change the value of the <param>
newParam.setAttribute('value', 'newblah.midi');
// replace the <param> tag on the <object>
newObj.replaceChild(newParam, param);
// replace the <object> on the page
obj.parentNode.replaceChild(newObj, obj);

In both cases, the trick to getting it working in IE, Opera, Safari and Chrome is to replace the <object> on the page. Appending a new <param> to the existing <object> doesn't seem to make it reparse the value or load the newly referred to content.