Multilevel quote in JavaScript?

Question

OK, this is perhaps stupidest question ever but bear with me....

How to make this work:

$("#basephoto").after(
  '<tr><td valign="bottom">Additional photo:</td>
       <td>&nbsp;&nbsp;&nbsp;</td>
       <td><div id="addphoto'+curupfld+'" class="browsebg">
         <p class="bpath"></p>
         <input onchange="fillBrowse(\"#addphoto'+curupfld+'\",this); validateExt(field);"  class="browse transfield" type="file" name="altphoto'+curupfld+'" size="40" />
         <span onclick="delImgField(this.id)" id="delbtn'+curupfld+'" class="abuttons delbtn"></span></div>
       </td>
   </tr>');

The part of interest:

onchange="fillBrowse(\"#addphoto'+curupfld+'\",this); validateExt(field);"

The problem starts at the "onchange". I can always make a function that calls these two and the solution would be:

$("#basephoto").after(
  '<tr>
     <td valign="bottom">Additional photo:</td>
     <td>&nbsp;&nbsp;&nbsp;</td>
     <td>
       <div id="addphoto'+curupfld+'" class="browsebg">
       <p class="bpath"></p>
       <input onchange=functionCaller("#addphoto'+curupfld+'",this) class="browse transfield" type="file" name="altphoto'+curupfld+'" size="40" />
       <span onclick="delImgField(this.id)" id="delbtn'+curupfld+'" class="abuttons delbtn"></span>
       </div>
      </td>
   </tr>');

This works, but if possible I would like to solve the problem rather than just use a workaround method.

Answer 1

I really don't know what you are really doing. But if you just wan't to write it in a more jQuery way.. This may help..

$('#basephoto').append('<tr />');
$('#basephoto tr').append(
    $('<td />')
        .attr('valign','bottom')
        .html('Additional photo:')
);
$('#basephoto tr').append(
    $('<td />')
        .html('&nbsp;&nbsp;&nbsp;')
);
$('#basephoto tr').append(
    $('<td />')
        .html(
            $('<div />')
            .attr({
                "id":"addphoto-"+curupld,
                "class":"browsebg"  
            })
            .html(
                $('<p />')
                    .attr('class','bpath')
                    .html('')
            )
        )
);
$('#addphoto-'+curupfld).append(
    $('<input />')
        .attr({
            "class":"browse transfield",
            "type":"file",
            "name":"altphoto-"+curupfld,
            "size":"40"
        })
        .change(function(){
            functionCaller('#addphoto-'+curupfld,this);
            validateExt(field);
        })
);
$('#addphoto-'+curupfld).append(
    $('<span />')
        .attr({
            "class":"abuttons delbtn",
            "id":"delbtn-"+curupfld
        })
        .click(function(){
            delImgField($(this).attr('id'));
        })
);

Check out this post to know more how to create elements using jQuery:

• http://mongsang-ga.tumblr.com/post/19914049827/how-to-create-a-element-in-jquery

I guess you just need to add a line like this then to fix your problem:

$('#input_that_has_the_change_event').change(function(){
    fillBrowse('#addphoto'+curupfld,this);
    validateExt(field);
});

*P.S.: Don't say it's stupid. I'm just like you before.. :]

Answer 2

Use a template system like underscore. Maintainable, and easier to read/troubleshoot.

http://documentcloud.github.com/underscore/

Example:

    <script id="templateA" type="text/template">
          <p>
                 Test stuff <a href="/home.html"><%= label %></a>
                 ...
          </p>
    </script>
...

<script type="javascript">
        var templateFunction = _.template($('#templateA').html());
        $('#someDivID').after(templateFunction({label: 'Here'}));
</script>