Jquery Two functions to create row problem.

Question

Hi all,

I had only one function to Add another row to the table id="tblOtherParties" and i worked fine, but when I added the second function to do the same with the table id="tblHospitalAction" I get the error of unterminated string constant, but I dont see why as its the same as the first function.

Any help would be very much appreciated.

I have the following functions

<script type="text/javascript">
 var counter = 1;
  function createNewRow (text1,text2){
  var first = counter++;
  $('#tblOtherParties > tbody').append('<tr><td>
   <input type="text" id="txtName_'+first+'" value="'+text1+'" />
   </td><td>
   <input type="text" id="txtRole_'+first+'" value="'+text2+'" />
   </td><td>
   <a class="deleteBtn"/>
   </td></tr>');
   }



 var counterHA = 1;
 function createNewRowHA (text1,text2){
  var first = counterHA++;
  $('#tblHospitalAction > tbody').append('<tr>
   <td>
   <input type="text" id="txtH_'+first+'" value="'+text1+'" />
   </td>
   <td>
   <input type="text" id="txtA_'+first+'" value="'+text2+'" />
  </td><td><a class="deleteBtn"/></td>
   </tr>');
   }

  $(document).ready(function(){
   $(".deleteBtn").live("click", function(){
   $(this).closest('tr').not(':only-child').remove();
   });

   $('#btnAddOther').click(function() {
     createNewRow('','');
    });

   $('#btnAddHA').click(function() {
     createNewRow('','');
    });

});
</script>

And the following tables

<div >
  <span style="float:left;padding-top:34px;"><b>Other involved parties</b></span>
  <table style="float:left;" id="tblOtherParties">
   <thead>
    <tr>
     <td class="title">Name</td>
     <td class="title">Role</td>
     <td><input type="button" id="btnAddOther" value="Add"/></td>
   </tr>
 </thead>
  <tbody>
   <tr>
    <td><input type="text" id="txtName_0" size="35"/></td>
    <td><input type="text" id="txtRole_0" size="35"/></td>
    <td><a class="deleteBtn" /></td>
  </tr>
  </tbody>
</table>
</div>

<div >
  <span style="float:left;><b>Other involved parties</b></span>
  <table style="float:left;" id="tblHospitalAction">
   <thead>
    <tr>
     <td class="title">Name</td>
     <td class="title">Role</td>
     <td><input type="button" id="btnAddHA" value="Add"/></td>
   </tr>
 </thead>
  <tbody>
   <tr>
    <td><input type="text" id="txtH_0" size="35"/></td>
    <td><input type="text" id="txtA_0" size="35"/></td>
    <td><a class="deleteBtn" /></td>
  </tr>
  </tbody>
</table>
</div>

Answer 1

Are your strings spanning multiple lines in your actual source or did you just prettify them for display purposes in your question? Strings that span multiple lines need to either be terminated on each line and concatenated to the next or you have to escape the newline character:

// Unterminated string constant on the first line
"this is a
 test string that spans multiple lines"

// Escaping the newline character
"this is a \
 test string that spans multiple lines"

// Concatenating each line:
"this is a "
+ "test string that spans multiple lines"

The biggest difference between the 2nd and the 3rd is that the 2nd will keep the newlines in the string, the third won't unless you add them manually using \n or \r\n. The downside to the second is that ALL other whitespace characters (spaces, tabs, etc) between the string delimiters are part of the string which makes it awkward to keep your code looking neat.

Answer 2

When Javascript string literals span multiple lines, there should be a backslash () at the end of each line.

http://www.codehouse.com/javascript/tips/string_multiline/