wyc
wyc

Reputation: 55273

Uncaught SyntaxError: Unexpected token ILLEGAL in jQuery string

  $('#post-2233 > h2').text('Feeds / Downloads');

  $('#post-2233 > h2').after(
    '<div class="clo-column-before"> \
       <p>Please login on the right to access the content below.</p> \
       <p>Below is all the downloadable content on the website. Your account gives you access to all the items with a check mark next to it. </p> \
       <p>You can purchase additional access from your <a href="http://www.chineselearnonline.com/amember/member.php">member page</a>. If you have any problems accessing any of the content below, please <a href="http://www.chineselearnonline.com/contact-us/">contact us</a>.</p> \
     </div>'
  );

  $('#post-2233 > .entrytext').after(
    '<div class="clo-column-after"> \
       <h2>Download instructions: PC / Mac, iPhone / iPad, Android</h2> \
       <h3>PC / Mac:</h3> \
       <p>Click directly on the links to open the content. You can then download it directly from the page that opens.</p> \
       <p>Click on the iTunes logo to open the content into iTunes.</p> \
       <p>Note that the PDFs are in a zip archive that will need to extracted after download.</p>
     </div>'
  );

});

This is the problematic line:

<div class="clo-column-after"> \

I don't see anything strange, though.

Upvotes: 0

Views: 185

Answers (1)

Cᴏʀʏ
Cᴏʀʏ

Reputation: 107536

It's very possible that your browser is inserting end of line characters at each \ because of the way you are splitting that multi-line string, and maybe jQuery doesn't like those characters. Just researching your questions, almost every article I saw recommended against this type of line splitting. Instead, you could do a couple of things:

EDIT: You are missing a \ on the last <p> line. I would still consider one of the following changes, however.

  1. Just use regular string concatenation:

    $('#post-2233 > .entrytext').after(
        '<div class="clo-column-after">' +
           '<h2>Download instructions: PC / Mac, iPhone / iPad, Android</h2>' +
           '<h3>PC / Mac:</h3>' +
           '<p>Click directly on the links to open the content. You can then download it directly from the page that opens.</p>' +
           '<p>Click on the iTunes logo to open the content into iTunes.</p>' +
           '<p>Note that the PDFs are in a zip archive that will need to extracted after download.</p>' +
         '</div>'
     );
    
  2. Use templates:

    <script id="dl-instructions" type="text/template">
        <div class="clo-column-after">
           <h2>Download instructions: PC / Mac, iPhone / iPad, Android</h2>
           <h3>PC / Mac:</h3>
           <p>Click directly on the links to open the content. You can then download it directly from the page that opens.</p>
           <p>Click on the iTunes logo to open the content into iTunes.</p>
           <p>Note that the PDFs are in a zip archive that will need to extracted after download.</p>
         </div>
    </script>
    

    Then your jQuery after() call becomes:

    $('#post-2233 > .entrytext').after($('#dl-instructions').html());
    

Upvotes: 1

Related Questions