Storing HTML into a javascript variable

Question

I'm having some trouble with some javascript. I'm using jQuery to dynamiclly add rows to a table. Additionally the javascript is being generated from some PHP and Kohana code.

Here is the script.

<script type="text/javascript">   
    function delExtensionNumber(element){
        $(element).prev().attr('value', 'X'); 
        $(element).parent().parent().hide();
    }

    function addExtensionNumber(){
        lines = <?php echo form::dropdown($ext_id."[did]", $lines, ''); ?>;
        extensions = <?php echo form::dropdown($ext_id."[extension]", $phones, ''); ?>;

        $('#line-extensions > tbody:last').append('<tr><td>'+lines+'</td><td>'+extensions+'</td><td><input type="hidden" name="'+<?php echo $ext_id;?>+'[state]" value="0" /><a class="hide" onclick="delExtensionNumber(this)"></a></td></tr>');

        <?php $ext_id++; ?>
    }
</script>

This works fine in Firefox. But in IE and Chrome it doesn't work. Nothing happens in google Chrome. In IE I get an error on the page. The error is a syntax error. It doesn't like the < character after the word line.

Ok, so I thought I better put some quotes around this string. But... when I do that nothing works.

Answer 1

I'm just going to assume that form::dropdown is spitting out plain HTML. In Firefox, this is being interpreted with E4X , and then turned back into a string when concatenated. IE and Chrome do not support E4X. To make it work, you could do something like this:

lines = <?php echo json_encode(form::dropdown(...)); ?>;

Edit: The reason it's not working when you're putting quotes around it is because the HTML contains quotes. The code above will escape the quotes correctly.

Answer 2

Chrome does not support XML literal syntax, you can't write eg line = <div>foo</div> , you have to enclose the data into a string.

lines = '<?php echo form::dropdown($ext_id."[did]", $lines, ""); ?>;'

could work (and you should possibly also escape ' )

Answer 3

I strongly recommend you to use Jquery DOM Creation Plugin

• Easy DOM creation for jQuery

it would be a lot, easier.