Setting Textarea text to properly formatted HTML code with jQuery

Question

I am trying to generate the text for my Textarea thru Javascript (jQuery), because I have a variable in JS I need to include in there. This is what I do now:

$("#txt_banner1").text(
            '<a href="'+producturl+'"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="125" height="125"><param name="movie" value="../../images/banerxsky2.swf" /><param name="quality" value="high" /><embed src="http://www.xSkySoftware.com/images/banerxsky2.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="125" height="125"></embed></object>')

Now you are probably going to think: "Dude, format your code". well, thats the problem - I would like my textarea to contain my HTML code properly formated, however when I format my code in the parameters, it wont work (script stops).

Any suggestions?

EDIT: Formated code, which is not working:

        $("#txt_banner1").text(
        '<a href="'+producturl+'">
        <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="125" height="125">
        <param name="movie" value="../../images/banerxsky2.swf" />
        <param name="quality" value="high" />
        <embed src="http://www.xSkySoftware.com/images/banerxsky2.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="125" height="125">
        </embed>
        </object>');

EDIT2: Here is my Textarea code:

<textarea id="txt_banner1"><a href="AFF_URL">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="125" height="125">
  <param name="movie" value="http://xSkySoftware.com//images/banerxsky2.swf" />
  <param name="quality" value="high" />
  <embed src="http://www.xSkySoftware.com/images/banerxsky2.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="125" height="125"></embed>
  </object>
</textarea>

Answer 1

I would suggest you put the link markup in the page itself using, say, a hidden <div> element:

<div id="content" style="display: none;"><a href="#">
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
            codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"
            width="125" height="125">
        <param name="movie" value="../../images/banerxsky2.swf" />
        <param name="quality" value="high" />
        <embed src="http://www.xSkySoftware.com/images/banerxsky2.swf"
               quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer"
               type="application/x-shockwave-flash" width="125" height="125" />
    </object>
</a></div>

Then, you can use jQuery to clone the link, modify its href attribute on the fly and use the resulting markup to populate your <textarea> element:

var $content = $("#content").clone();
$content.children("a").attr("href", producturl);
$("#txt_banner1").val($content.html());

EDIT: Slightly tweaked markup for better results. Fiddle available here.

Answer 2

The snide answer is "You're doing it wrong". Don't worry, it's an easy fix.

JavaScript doesn't allow multiline strings. You can write:

"foo bar\nbaz"

but not

"foo bar
baz"

Unless you escape the newline char (this is not a part of the ECMA Spec, but all browsers I've tested support this)

"foo bar\
baz"

The "correct" way to do multiline strings is to add newline characters to the string, but you can simulate the newline with some more quotes:

"foo bar\n"+
"baz"

Yes, it sucks, but there you have it.

Answer 3

You can place your HTML snipped in a hidden container on your page and format it the way you like:

Style:

#html_codez { display: none }

Markup:

<div id="html_codez">
    <a href="{producturl}">
        <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
            codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"
            width="125" height="125"><param name="movie" value="../../images/banerxsky2.swf" />
            <param name="quality" value="high" />
            <embed src="http://www.xSkySoftware.com/images/banerxsky2.swf"
                quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer"
                type="application/x-shockwave-flash" width="125" height="125">
            </embed>
        </object>
    </a>
</div>

(Note the closing </a> that you missed.)

Then, grab it via innerHTML, which, in most browsers, gets normalized to compact HTML. If it doesn't on a particular browser, you can still use some regular expression replacement to clean up the white space between the tags. On Chrome, you still have to trim the leading and trailing white space:

var code = $.trim($("#html_codez").html());

Then you can place this inside your textarea:

$("#txt_banner1").val(code.replace("{producturl}", producturl));

Answer 4

You could set the value of your txt_banner1 beforehand, and the just replace the producturl in the script:

<div id="txt_banner1"><a href='MY_NEW_URL'><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="125" height="125"><param name="movie" value="../../images/banerxsky2.swf" /><param name="quality" value="high" /><embed src="http://www.xSkySoftware.com/images/banerxsky2.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="125" height="125"></embed></object>

script:

var text = $("#txt_banner1").text();
$("#txt_banner1").text(text.replace("MY_NEW_URL", producturl);