Need Help Debugging Unexpected EOF Javascript error

Question

I'm running Woocommerce on Wordpress. I get SyntaxError: Unexpected EOF in Safari when trying to reveal new fields when I click on a "Add new Field" button. And in Firebug I get this error:

SyntaxError: unterminated string literal


var newRow = '\

This is the script that this error is associated with, and I don't know how to fix it.

<script>

                            jQuery(document).ready(function(){

                                 var newRow = '\

                                     <tr>\

                                        <td align="center">\

                                            <select name="wc_custom_checkout_newfield[enabled][]">\


                                                    <option value="1">Yes</option>\


                                                    <option value="0">No</option>\


                                            </select>\

                                        </td>\

                                        <td>\

                                            <select name="wc_custom_checkout_newfield[section][]">\


                                                    <option value="billing">Billing</option>\


                                                    <option value="shipping">Shipping</option>\


                                                    <option value="account">Account</option>\


                                                    <option value="order">Order</option>\


                                            </select>\

                                        </td>\

                                        <td>\

                                            <select name="wc_custom_checkout_newfield[type][]">\


                                                    <option value="text">Text</option>\


                                                    <option value="textarea">Textarea</option>\


                                                    <option value="password">Password</option>\


                                                    <option value="date">Date</option>\


                                                    <option value="country">Country</option>\


                                                    <option value="state">State</option>\


                                                    <option value="select">Select</option>\


                                                    <option value="checkbox">Checkbox</option>\


                                            </select>\

                                        </td>\

                                        <td><input name="wc_custom_checkout_newfield[label][]" type="text" value="New Field Label" /></td>\

                                        <td>\

                                            <input name="wc_custom_checkout_newfield[field_name][]" type="hidden" value="newfield" />\

                                            <input name="wc_custom_checkout_newfield[field_name][]" type="text" value="newfield" disabled="disabled" />\

                                        </td>\

                                        <td><input name="wc_custom_checkout_newfield[placeholder][]" type="text" value="New Field" /></td>\

                                        <td><input name="wc_custom_checkout_newfield[class][]" type="text" value="form-row-wide" size="12" /></td>\

                                        <td><input name="wc_custom_checkout_newfield[options][]" type="text" value="" size="12" /></td>\

                                        <td><input name="wc_custom_checkout_newfield[order][]" type="text" value="" size="6" /></td>\

                                        <td align="center">\

                                            <select name="wc_custom_checkout_newfield[required][]">\


                                                    <option value="1">Yes</option>\


                                                    <option value="0">No</option>\


                                            </select>\

                                        </td>\

                                        <td align="center">\

                                            <input name="wc_custom_checkout_newfield[default][]" type="hidden" value="0" />\

                                            <input id="removeRow" type="button" value="X" title="remove this row">\

                                        </td>\

                                    </tr>';



                                 jQuery('#addRow').click(function(){

                                  jQuery('#block').append(newRow);

                                  reIndex();

                                 })



                                 jQuery('#removeRow').live('click', function(){

                                  jQuery(this).closest('tr').remove();

                                  reIndex();

                                 })



                                 function reIndex(){

                                   jQuery('#block').find('.index').each(function(i){

                                   jQuery(this).html(i+2);

                                  })

                                 }



                                })

                                </script>

I tried disabling plugins, and removing all other javascript to see if there is a conflict, but nothing seems to work. Any ideas?

Answer 1

Get rid of all those double line breaks.

The backslash characters at the end of each line in the quoted string (var newRow = '...';) are line continuation markers. These signal to the Javascript parser that the following line is a continuation of the current line. In effect, a backslash followed by a line break character will both be ignored.

But because you have somehow turned every line break into two line breaks (probably by saving the file with Windows \r\n line breaks), you are destroying the continuity so that Javascript is unable to parse the string.

So for example:

// This is fine:
var string1 = 'This string is split \
across two lines';

// ... but this is not:
var string2 = 'This string is split \

across three lines';