Javascript document.write('HTML CODE HERE') and using a var grabbed by flash

Question

so this is 2 questions in one. My first question is how would I do this?

    document.write('
<div id="jwplayer">
<center>
<div id='mediaplayer'></div>
<script type="text/javascript">
  jwplayer('mediaplayer').setup({
    'flashplayer': 'jwplayer/player.swf',
    'id': 'playerID',
    'width': '640',
    'height': '580',
    'provider': 'rtmp',
    'streamer': 'rtmp://domain/recorder/_definst_',
'file': 'onSaveOk("+streamName+")'
  });
</script>
</center>
</div>
');

I basically just want to print out that code when the function is called.

This is the second part of my question, this function runs when the flash video recorder finishes saving the recorded video. It grabs all of the variables in the functions arguments from the flash player. I want to use one of the variables in my jwplayer code, how would I do this?

Here is the function:

    function onSaveOk(streamName,streamDuration,userId,cameraName,micName,recorderId){
        //alert("onSaveOk("+streamName+","+streamDuration+","+userId+","+cameraName+","+micName+")");

        //the user pressed the [save] button inside the recorder and the save_video_to_db.XXX script returned save=ok
        //recorderId: the recorderId sent via flash vars, to be used when there are many recorders on the same web page
            $('#record').hide();
    document.write('
<div id="jwplayer">
<center>
<div id='mediaplayer'></div>
<script type="text/javascript">
  jwplayer('mediaplayer').setup({
    'flashplayer': 'jwplayer/player.swf',
    'id': 'playerID',
    'width': '640',
    'height': '580',
    'provider': 'rtmp',
    'streamer': 'rtmp://domain/recorder/_definst_',
'file': 'onSaveOk("+streamName+")'
  });
</script>
</center>
</div>
');


    }

This is where I try to use the streamName function, but it doesnt work:

'file': 'onSaveOk("+streamName+")'

How would I do this? Thanks.

Answer 1

First, JavaScript doesn't allow multiline strings, so right-off-the-bat your document.write is going to throw a syntax error. You have at least a couple of ways to go about it. You could just remove the line breaks, making the entire string a single line...

var lines = '<div id="jwplayer"><center>...</center></div>';
document.write(lines);

...but that tends to not be so readable. Or you can escape the line breaks with backslashes...

var lines = '<div id="jwplayer">\
    <center>\
      ...\
    </center>\
  </div>';
document.write(lines);

...which is more readable, but probably kind of brittle -- any trailing whitespace after the backslashes will break it without being apparent. Next you could concatenate the string a line at a time...

var lines = '<div id="jwplayer">';
lines += '<center>';
lines += '...';
lines += '</center>';
lines += '</div>';
document.write(lines);

...which I think somewhat mitigates the readability issue of the first method and the brittleness issue of the second. Lastly, you could create an array of strings and join them...

var lines = [
  '<div id="jwplayer">',
  '<center>',
  '...',
  '</center>',
  '</div>'].join(' ');
document.write(lines);

...which has the [entirely subjective] advantage of eliminating the repetetive lines += .... In any case, that's by no means an exhaustive list of approaches, it mostly boils down to using whatever you're most comfortable with.

Next, your string is, quite frankly, a huge mish-mash of conflicting single- and double-quotes. If you need to include the same kind of quotes in your string as you're using to enclose the string, then you need to escape them:

var lines = "<div id=\"jwplayer\">";
lines += '<div id=\'mediaplayer\'></div>';

Obviously(?) you'd want to keep the escapes to a minimum, and since you're creating a string(s) of html, you'd probably want to enclose those with single-quotes and use double-quotes for the attribute values. But again, it's whatever style makes the most sense to you.

And finally, both of the above issues are what are causing the streamName parameter passed into the function not to work, since you were already running into numerous errors long before you got to that line. If you keep the string issues straight, then

lines += "'file': 'onSaveOk(" + streamName + ")'";

should work just how you want it to.

Note: I'm foregoing the obligatory warnings about a) using document.write() and b) using <center> tags, but you should take some time to do a little research into both of those issues; I will just say that 1998 called and said, "That's cool, I didn't want those back anyhow".

Answer 2

Late to the party put I actually prefer:

//start the html

var html = ''+
    '<body>'+
        '<div>'+
            '<a href="foo.bar">Foo Bar page</a>'+
        '</div>'+
    '</body>';

Valid javascript 'foo'+\n\r\t'bar' == 'foobar';