Question

I am developing a social website like facebook in php. I have a page for displaying the messages for the user with two links,that is reply and delete at the right bottom corner for every messages in the inbox. My issue is that when i click the reply link another html block should come where user can send the responses back to the sender.I have written the code like this

<div class="msgutil">
   <a href="" id="reply" onclick="return post_reply()" >reply</a>//this method does'nt works

   <a href="delete_message.php?msg_id=<?php echo $row_msg_id;?>">delete</a> //dont check this
</div><!--end msgutil-->

I have inserted the html document inside the post_reply() like this

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
 </script>

<script type="text/javascript">
function post_reply()
 {
    $("<form id="msgreply" name="msgreply" action="#"> <textarea name="replyfield"    id="replyfield"></textarea> </form>").insertBefore("#reply");
return true;
 }
 </script>

I don’t know why its not working.

Answer 1

You’re using double quotes in a string made with double quotes. This cannot be done, as you keep ending and starting the string again.

Either surround it with single quotes:

$('<form id="msgreply" name="msgreply" action="#"> <textarea name="replyfield" id="replyfield"></textarea></form>').insertBefore("#reply");
//^                                                                                                              ^

or escape the double quotes:

$("<form id=\"msgreply\" name=\"msgreply\" action=\"#\"> <textarea name=\"replyfield\" id=\"replyfield\"></textarea></form>").insertBefore("#reply");
//          ^         ^       ^         ^         ^  ^                  ^           ^     ^           ^

You can also use the following HTML:

<div class="msgutil">
   <a href="#" id="reply">reply</a>
   <a href="delete_message.php?msg_id=<?php echo $row_msg_id;?>">delete</a>
</div><!--end msgutil-->

and the following javascript:

$(document).ready(function() {
    $("#reply").click(function(e) {
        $('<form id="msgreply" name="msgreply" action="#"> <textarea name="replyfield" id="replyfield"></textarea></form>').insertBefore("#reply");
        e.stopPropagation();
        e.preventDefault();
    });
});​

to get the same result.

Here’s a JSFiddle demo.