CODEWITHSUNDEEP
javascripthtmljquery
helloApp
helloApp

Reputation: 459

Jquery:How do i pass a Jquery variable inside a string to the alert() function?

Hello i am having difficulty achieving this task, i know how to pass a normal variable but for some reason i can't find a way to make this work.I am having this jquery code

for(let i=0;i<data.length;i++) {
  const newRow = `<tr>
      <td id="commentid">${data[i].id}</td>
      <td id="username">${data[i].userName}</td>
      <td id="usermail">${data[i].email}</td>
      <td id="createdat">${data[i].createdAt}</td>
      <td id="commentmessage"><button type="button" class="btn btn-info btn-fw"
                                                        onclick="alert(${data[i].message})">Show
                                                </button></td>
      <td id="deletecomment">
<a href="/admin/dashboard/showposts/deletecomment/${postid}/${data[i].id}" style="text decoration:none;"class="btn btn-danger btn-fw mx-auto" onclick="return confirm('Are you sure you want to delete this comment?');">Delete Comment</a></td>
      </tr>`

  $("#commentstable").append(newRow)
    }

I am not sure if i pass the

${data[i].message}

correctly to the alert function. Also as you can see the whole block of code is a string assigned to the newRow variable. Now each time i am running the application and click the button i am geting this error

Uncaught SyntaxError: missing ) after argument list

Where is this error comming from?Where do i miss )? it seems that i am having all the ), how can i make this work? Any help would be greatly appreciated !

L.E I am adding the whole function that contains this loop

function openModal2(data,postid){
$("#mysimpleModal2").css("display","block")

//This removes the previous data that is added by the loop.html() works with jquery.
$("#commentstable").html('');


 for(let i=0;i<data.length;i++) {
  const newRow = `<tr>
      <td id="commentid">${data[i].id}</td>
      <td id="username">${data[i].userName}</td>
      <td id="usermail">${data[i].email}</td>
      <td id="createdat">${data[i].createdAt}</td>
      <td id="commentmessage"><button type="button" class="btn btn-info btn-fw"
                                                        onclick="alert('${data[i].message}')">Show
                                                </button></td>
      <td id="deletecomment"><a href="/admin/dashboard/showposts/deletecomment/${postid}/${data[i].id}"
                                                   style="text-decoration:none;"
                                                   class="btn btn-danger btn-fw mx-auto"
                                                   onclick="return confirm('Are you sure you want to delete this comment?');">Delete
                                                   Comment</a></td>
    </tr>`

  $("#commentstable").append(newRow)
    }
}

Upvotes: 1

Views: 194

Answers (1)

flyingfox
flyingfox

Reputation: 13506

You need add single quote ' to wrap the parameter

onclick="alert('${data[i].message}')"

Upvotes: 3

Related Questions