changing param value of object in html using ajax

Question

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?

score 2 · Accepted Answer · answered Jul 29 '09 at 18:11

2

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.

answered Jul 29 '09 at 18:11

Cristian Toma

5,662
2
36
43

Yes, but won't I need to force the page to reload in order for me to listen to the correct source? – vondip Jul 29 '09 at 18:29
No, JavaScript is dynamic. The changes apply immediately. – Cristian Toma Jul 29 '09 at 18:39
ok, this doesn't seem to work =[ When putting this value: function SetSource(newSource) { document.midiFilePlayer.src = newSource alert('new source ' + document.midiFilePlayer.src); } the src value does not update. – vondip Jul 29 '09 at 19:25
1

Try using .setAttribute('src', 'new source'); – Cristian Toma Jul 29 '09 at 19:46
I see, it does seem to update the value, though it doesn't completely solve the problem, I can't seem to update the src value of the embed part, this is the problmatic part of the quick time plug-in code: – vondip Jul 29 '09 at 20:36

score 0 · Answer 2 · edited May 23 '17 at 12:04

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.

changing param value of object in html using ajax

2 Answers2