Uncaught SyntaxError: Unexpected token Error

Question

I am have a problem with the following Uncaught SyntaxError: Unexpected token Error after switching from an input box to textarea. This error occurs when trying to delete the text entered into the textarea after submitting it.

textarea:

<textarea name="chatter"></textarea>

Function call:

<a href='javascript:void(0);' 
 onClick='deletecmnt(this, '".$val['id']."', '".BASE_URL."');' 
 title='Delete Chatter'>X</a>; 

delete function:

function deletecmnt(obj, cmt_id, baseurl){
 var lg_chk = loginchk();
 if(lg_chk){
 var object = $(obj).parent().parent();
 $.ajax({
 type: "GET",
 // error: function(error){console.log("Error:");console.log(error);},
 url:baseurl+'deletechatter.php?id='+cmt_id,
 dataType:'json',
 success:function(response){
 object.remove();
 }
 });
 }
 else
 location.href=baseurl;
}

Ok so inside Chrome I receive the error stated above but in Firefox I receive the following:

 SyntaxError: syntax error 
 deletecmnt(this, 

However, I don't see anything wrong with it and it worked when I was using a input box. I even switched it back and it worked so what is it about the textarea that it does like? Please let me know what I am doing wrong.

Here is what I got so far:

<a data-id='".$val['id']."' data-base-url='".BASE_URL."' href='javascript:void(0);' title='Delete Chatter'>x</a>
<script>$("a[title='Delete Chatter']").on('click', deletecmnt);</script>
function deletecmnt(obj, cmt_id, baseurl){
var lg_chk = loginchk();
if(lg_chk){
 var object = $(this).parent().parent();
 $.ajax({
 type: "GET",
 // error: function(error){console.log("Error:");console.log(error);},
 url:baseurl+'deletechatter.php?id='+cmt_id,
 dataType:'json',
 success:function(response){
 object.remove();
 }
 });
}
else
 location.href=baseurl;

}

• Lee Taylor: It looks like you're using PHP. Please show the rendered output. I bet that will lead to the error...
• bfavaretto: ^^^^^ What Lee Taylor says. You'll see the problem immediately if you look at the HTML source instead of the PHP code.

Answer 1

The quotes are wrong:

onClick='deletecmnt(this, "'.$val['id'].'", "'.BASE_URL.'");' 

Look how you open and close single quotes.

Answer 2

You are closing the apostrophe prematurely:

deletecmnt(this,

...becomes the entire onclick. Since you are using jQuery, it makes a lot more sense to bind with it (even if you weren't, I would still suggest doing so with JS).

$("a[title='Delete Chatter']").on('click', deletecmnt);

You can update deletecmnt so that it references this, which would be the anchor. Also, update the anchor to store the ID and BASE_URL as part of the DOM, possibly with:

<a data-id='".$val['id']."' data-base-url='".BASE_URL."'

• Claude Grecea: I think I got everything else but I am not sure how reference this. Can you provide an example?
• Explosion Pills: Inside of the deletecmnt function, just use this and it should be the anchor. var object = $(this).parent().parent() for example
• Claude Grecea: Can you please look at my code I added at the top because it is not firing now.
• Explosion Pills: @ClaudeGrecea you need to get cmt_id and base_url from the anchor: var cmt_id = $(this).data('id'); var base_url = $(this).data('base-url')
• Claude Grecea: Ok, I got it to sort of work but it won't delete in real time. I have to refresh the page. What do you think this is happening?