How to quote/add javascript variable in html string?

Question

I have tried to use like this

$(nTd).html("<div class='btn-group'> <button class='btn btn-info btn-sm' onclick='viewskpd('"+oData.id+"')' data-toggle='tooltip' title='Detail SKPD'><i class='fa fa-eye' style='color:white'></i></button>");

But it went like this:

<button class="btn btn-info btn-sm" onclick="viewskpd(" 00cc72988f8240428b25ac5327b2a3c6')'="" data-toggle="tooltip" title="" data-original-title="Detail SKPD"><i class="fa fa-eye" style="color:white"></i></button>

But I am not sure why the onclick function that trigger viewskpd() didnt work.

I have checked the console and it tell me like this.

Uncaught SyntaxError: Invalid or unexpected token

Why is this happen ?

I think your quotes around +oData.id+ just needs to be single quotes? so ('+oData.id+') — AJDEV
– AJDEV, Commented May 8, 2018 at 3:59

Sean · Accepted Answer · 2018-05-08 04:05:02Z

3

The oData.id needs to be quoted so it's a string that is quoted with different quotes than enclosing the onclick attribute:

onclick='viewskpd(\""+oData.id+"\")'

In full:

$($0).html("<div class='btn-group'> <button class='btn btn-info btn-sm' onclick='viewskpd(\""+oData.id+"\")' data-toggle='tooltip' title='Detail SKPD'><i class='fa fa-eye' style='color:white'></i></button>");

edited May 8, 2018 at 4:05

answered May 8, 2018 at 3:54

Sean

1,2999 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Gagantous Over a year ago

okay ihave edited my question regarding your answer, and it stll didnt work

Gagantous Over a year ago

coud you explain to me with \"" and "\" thing ? first time i see this kind of quoted

AmerllicA Over a year ago

@Gagantous, Actually you need to know more about RegExp, find a good source and read about it, in your case you can use toString function to avoid complexity.

Sean Over a year ago

That's not a regular expression @AmerllicA. It's just escaping the quote character that's used to start and end the string: ('_\'_' to get _'_ or "_\"_" to get _"_). There are a few other special characters that you'll need to escape to use like a newline, \n. Have a look at developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Brad · Accepted Answer · 2018-05-08 04:08:24Z

2

You're entering some pretty wild territory... script injected into markup attributes by scripts which were probably originally inside of markup language itself. Don't do this, it's a nightmare.

Try something like this instead:

<button data-action="viewskpd" data-skpd-id="00cc72988f8240428b25ac5327b2a3c6" ...

In your script...

$(body).on('click', 'button[data-action="viewskpd"]', (e) => {
  console.log(e.target);  // 
});

Untested, but that should get you started. Put your data in the markup, but your script in your script. Keep them separate.

answered May 8, 2018 at 4:08

Brad

164k57 gold badges381 silver badges559 bronze badges

2 Comments

Gagantous Over a year ago

ohhh, i never thought about that..., why did you used (e) => { i thought it's function(e){

Brad Over a year ago

@Gagantous I'm in the habit of using the ES6 syntax. function(e) { } works just fine here as well.

Romeo Sierra · Accepted Answer · 2018-05-08 04:04:08Z

1

Why don't you assign an ID to <button class='btn btn-info btn-sm' ... and program its click event in JS?

At whereever the location that you are having oData.id, you could do something like follows.

<button id='id1' class='btn btn-info btn-sm' ...

Then use this id1 as the selector and program that element's click event, which would be like,

$(document).on("click", "#id1", function(){
    viewskpd(oData.id); // Call the required function
});

edited May 8, 2018 at 4:04

answered May 8, 2018 at 3:59

Romeo Sierra

1,7862 gold badges19 silver badges39 bronze badges

Comments

AmerllicA · Accepted Answer · 2018-05-08 04:14:59Z

1

Actually you need a string variable inside viewskpd function. Use toString() function for it, you must write like below:

$(nTd).html("<div class='btn-group'> <button class='btn btn-info btn-sm' onclick='viewskpd("+oData.id.toStirng()+")' data-toggle='tooltip' title='Detail SKPD'><i class='fa fa-eye' style='color:white'></i></button>");

The 00cc72988f8240428b25ac5327b2a3c6 has no meaning for JavaScript until you turn it to string .

answered May 8, 2018 at 4:14

AmerllicA

33.2k18 gold badges146 silver badges170 bronze badges

Comments

Antonin GAVREL · Accepted Answer · 2020-02-09 05:10:46Z

1

Alternatively you may use `. Please note that this is a specific character different from " and '. Then enclose the variable into ${}, it allows better readability:

let ntd = document.getElementById("ntd");
ntd.outerHTML = `<div class='btn-group'> 
                 <button class='btn btn-info btn-sm' 
                 onclick='viewskpd("${oData.id}")'
                 data-toggle='tooltip' title='Detail SKPD'>
                 <i class='fa fa-eye' style='color:white'>
                 </i></button></div>`;

answered Feb 9, 2020 at 5:10

Antonin GAVREL

11.4k12 gold badges62 silver badges92 bronze badges

Collectives™ on Stack Overflow

How to quote/add javascript variable in html string?

5 Answers 5

4 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related