Jquery append Concatenation onclick

Question

I am trying to pass two variables one is having integer and other is having some string,say i want to pass id,name

<div class='redstatus' onclick='redStatus("+Id+","+name+")'><span class='countspan''>"+red_count+"</span></div>

In the above code in onclick function if i pass only id <div class='redstatus' onclick='redStatus("+Id+")'><span class='countspan''>"+red_count+"</span></div> it is working fine.

I want to send one more parameter name along with id separated by comma

<div class='redstatus' onclick='redStatus("+Id+","+name+")'><span class='countspan''>"+red_count+"</span></div>

it is not working.I need help on this.

for(var i in appData ){
    console.log("Data"+JSON.stringify(appData));
    for(j in appData.LOB){

        var LOBId = appData.LOB[j].LOBID;
        LOBName = appData.LOB[j].LOBName;
        var LOBRef = appData.LOB[j].LOBRef;
        var LOBNameRef = appData.LOB[j].LOBNameRef;
        //console.log("LOBId"+LOBId+"LOBName"+LOBName);

        $(".left_div").append("<div class='left_lob_name'>"+LOBName+"</div>");
        streamInRed = [];
        streamInAmber = [];
        streamInGreen = [];
        currentItemRed = [LOBId];
        currentItemAmber = [LOBId];
        currentItemGreen = [LOBId];

        //$("."+LOBNameRef+"").append("<div id="+LOBId+" style='height:74vh;overflow-y:auto;'><table class='table table-bordered' ><thead><tr><th>StreamName</th><th>BusinessSLA Description</th><th>Status</th><th>Business SLA</th><th>Forecast Completion Time</th><th>Actual Completion Time</th><th>JobName</th></tr></thead><tbody class='"+LOBRef+"'></tbody></table></div>");
        for(var k in appData.LOB[j].Streams.Stream){
            //console.log("Streams"+JSON.stringify(appData.LOB[j].Streams.Stream));
            var streamId = appData.LOB[j].Streams.Stream[k].streamId;
            var streamName = appData.LOB[j].Streams.Stream[k].streamName;
            var Status = appData.LOB[j].Streams.Stream[k].Status;
            var jobName = appData.LOB[j].Streams.Stream[k].JobName;
            var BSD= appData.LOB[j].Streams.Stream[k].BusinessSLADescrition;
            var BSLA = appData.LOB[j].Streams.Stream[k].BusinessSLA;
            var FCT = appData.LOB[j].Streams.Stream[k].ForecastCompletionTime;
            var ACT = appData.LOB[j].Streams.Stream[k].ActualCompletionTime;
            var RAGStatus = appData.LOB[j].Streams.Stream[k].RAGStatus;
            if(Status == "red"){
                //$("."+LOBName+"").append("<div class='streamcolor_red test' data-name='1'>"+streamName+"</div>");
                //$("."+LOBRef+"").append("<tr  class='test' data-name='1'><td style='background-color:#f3180d;color:#fff;'>"+streamName+"</td><td>"+BSD+"</td><td>"+RAGStatus+"</td><td>"+BSLA+"</td><td>"+FCT+"</td><td>"+ACT+"</td><td>"+jobName+"</td></tr>");
                red_count = red_count+1;
                currentItemRed = [streamName,BSD,RAGStatus,BSLA,FCT,ACT,jobName];
                streamInRed.push(currentItemRed);
                //redStatus();
                //console.log("streamInRed"+streamInRed);
            }else if(Status == "amber"){
                //$("."+LOBRef+"").append("<tr  class='test' data-name='2'><td style='background-color:rgba(243, 168, 15, 0.9215686274509803);color:#fff;'>"+streamName+"</td><td>"+BSD+"</td><td>"+RAGStatus+"</td><td>"+BSLA+"</td><td>"+FCT+"</td><td>"+ACT+"</td><td>"+jobName+"</td></tr>");
                //$("."+LOBName+"").append("<div class='streamcolor_amber test' data-name='2'>"+streamName+"</div>");
                amber_count = amber_count+1;
                currentItemAmber = [streamName,BSD,RAGStatus,BSLA,FCT,ACT,jobName];
                streamInAmber.push(currentItemAmber);
            }else {
                //$("."+LOBRef+"").append("<tr  class='test' data-name='3'><td style='background-color:green;color:#fff;'>"+streamName+"</td><td>"+BSD+"</td><td>"+RAGStatus+"</td><td>"+BSLA+"</td><td>"+FCT+"</td><td>"+ACT+"</td><td>"+jobName+"</td></tr>");
                //$("."+LOBName+"").append("<div class='streamcolor_green test' data-name='3'>"+streamName+"</div>");
                green_count = green_count+1;
                currentItemGreen=[streamName,BSD,RAGStatus,BSLA,FCT,ACT,jobName];
                streamInGreen.push(currentItemGreen);
            }
            //console.log("streamId"+streamId+"streamName"+streamName+"Status"+Status);
        }
        console.log("LOBId",LOBId);
        console.log("sep_symbol",sep_symbol);
        console.log("syb",syb);
        console.log("LOBNameRef",LOBNameRef);
        var tempvar = "'"+LOBNameRef+"'";
        console.log("tempvar"+LOBId +sep_symbol +tempvar);
        $("<div style='text-align:center;height:5vh;margin:2vw;'> <div class='redstatus' onclick='redStatus("+LOBId+","+LOBNameRef+")'><span class='countspan''>"+red_count+"</span></div> <div class='amberstatus' onclick='amberStatus("+LOBId+")'><span class='countspan'>"+amber_count+"</span></div> <div class='greenstatus' onclick='greenStatus("+LOBId+")'><span class='countspan'>"+green_count+"</span></div></div>").appendTo(".right_div");
        red_count = 0;
        amber_count = 0;
        green_count = 0;
        //var Streams = appData.LOB[j].Streams;
        //console.log("Before"+$wrapper);
        //var $wrapper = $('.'+LOBRef+'');
        //console.log("after"+$wrapper);
        //$wrapper.find('.test').sort(function (a, b) {
        /// return +a.dataset.name - +b.dataset.name;
        //})
        //.appendTo( $wrapper );

            }
}

i have added the code for your reference

Better to [avoid inline handlers completely](https://stackoverflow.com/a/59539045) - the escaping required is nonsense, and everything you reference must be global due to bad scoping. Add the listener properly using Javascript instead — CertainPerformance, Feb 08 '20 at 10:19
Actually it is inside a for loop and everytime the Id and name getting changed. — Ganesh, Feb 08 '20 at 10:24
No matter whether inside a for loop or not, it's *still* a bad idea to use inline handlers — CertainPerformance, Feb 08 '20 at 10:25
This div line is inside .append so there we need to use inlinehandler only right?if not please help me in that.i am not aware of it. — Ganesh, Feb 08 '20 at 10:28
Please post full enough code for a [MCVE], including the loop and the `.append` line - there isn't enough information in the question to say at the moment — CertainPerformance, Feb 08 '20 at 10:30

score 0 · Answer 1 · answered Feb 08 '20 at 10:47

The problem is with the line

$("<div style='text-align:center;height:5vh;margin:2vw;'> <div class='redstatus' onclick='redStatus("+LOBId+","+LOBNameRef+")'><span class='countspan''>"+red_count+"</span></div> <div class='amberstatus' onclick='amberStatus("+LOBId+")'><span class='countspan'>"+amber_count+"</span></div> <div class='greenstatus' onclick='greenStatus("+LOBId+")'><span class='countspan'>"+green_count+"</span></div></div>").appendTo(".right_div");

which, more prettily, and without the inline handlers, can be constructed like:

const htmlStr = `
<div style='text-align:center;height:5vh;margin:2vw;'>
  <div class='redstatus'><span class='countspan'>${red_count}</span></div>
  <div class='amberstatus'><span class='countspan'>${amber_count}</span></div>
  <div class='greenstatus'><span class='countspan'>${green_count}</span></div>
</div>
`;

You can pass the HTML string to jQuery to get a jQuery collection, then select the inner divs and add a listener to each:

const $row = $(htmlStr);
$row.find('.redstatus').on('click', () => redStatus(LOBId, LOBNameRef));
$row.find('.amberstatus').on('click', () => amberStatus(LOBId, LOBNameRef));
$row.find('.greenstatus').on('click', () => greenStatus(LOBId, LOBNameRef));
$row.appendTo(".right_div");

(or pass whatever parameters you want to the status functions - no quote escaping required!)

Make sure the LOBIds and LOBNameRefs don't reassign themselves in other iterations of the loop - declare them with const, eg:

const LOBId = appData.LOB[j].LOBID;
const LOBName = appData.LOB[j].LOBName;
const LOBRef = appData.LOB[j].LOBRef;

so they're scoped to the block, not to the function.

(It would also probably be good to have just a single <color>Status function, rather than three separate standalone functions (which probably all do something somewhat similar) - too much repetition should be avoided)

Pramod Singh · Answer 2 · 2020-02-08T10:32:16.827

You want to concatenate two parameters passed to a function, do not enclose variables in single or double quotes, it should be as :onclick="redStatus(Id,name)"

function redStatus(Id,name){
 var result = Id+'_'+name;
 document.getElementsByClassName('countspan')[0].innerText = result;
}

<!DOCTYPE html>
<html>
<head>
 <title>Append Two Params</title>
 
</head>
<body>
<div onclick="redStatus(1,'name')">Append Two Params</div>
<span class='countspan'></span>
</body>

</html>

Jquery append Concatenation onclick

2 Answers2