Problem using the prependTo() in jQuery

Question

Hi all,

I am having a problem trying to use the prependTo() function in jQuery... for some reason I can't get this to work

$("
<div id="note178" class="note"> 
 <div class="delete"><a href="/chart-notes/delete/178" onclick="$.ajax({ dataType: 'script', url: '/chart-notes/delete/178'}); return false;"><img src='/images/icons/delete.png'></a></div> 
 <div class="timestamp">1 minute ago </div> 
 <div class="content">ñasdas dasdasdasd conclusión</div>  
</div>
").prependTo(".notes").fadeIn("slow");

Although when doing it like this, it works fine

$.ajax({
  url:'/chart-notes/show/<cfoutput>#chartnote.id#</cfoutput>',
  success: function(data) {
   $(data).prependTo(".notes").fadeIn("slow");

   // Scroll to the top of the annotations
   $('html, body').animate({scrollTop: $(".notes").offset().top}, 1000);

   // Clear the form
   $('#chartnote-notes').val("");  
  }
 });

The "data" response from that success function is the same

<div id="note178" class="note"> 
 <div class="delete"><a href="/chart-notes/delete/178" onclick="$.ajax({ dataType: 'script', url: '/chart-notes/delete/178'}); return false;"><img src='/images/icons/delete.png'></a></div> 
 <div class="timestamp">1 minute ago </div> 
 <div class="content">ñasdas dasdasdasd conclusión</div>  
</div>

As before

Answer 1

Try changing all of the double quotes inside of the main $("...") to single quotes. For example, 'note178'

Answer 2

Also, IIRC, you have to set "display: none" for #note178 before calling fadeIn, otherwise you won't see any fade effect.

Answer 3

A JavaScript string cannot literal newlines.

alert("12
       34");

Gives the error: unterminated string literal

Answer 4

Try this one.

$("<div id=\"note178\" class=\"note\"> "+
" <div class=\"delete\"><a href=\"/chart-notes/delete/178\" onclick=\"$.ajax({ dataType: 'script', url: '/chart-notes/delete/178'}); return false;\"><img src='/images/icons/delete.png'></a></div> "+
" <div class=\"timestamp\">1 minute ago </div> "+
" <div class=\"content\">ñasdas dasdasdasd conclusión</div>  "+
"</div>").prependTo(".notes").fadeIn("slow");

You need to escape the double quotes and you cannot have literal new lines in javascript strings. thus the following syntax which concatenates multiple strings.

"..." +
"..." +
"..."