We Keep Coding

How to pass argument from parsed json value to onclick function?

We have a table with data. My goal is to pass an argument from parsed JSON value to another javascript function - named newStory(value['stories']) from onclick method.
Tried a lot of different methods with no success..
json[key]['date'] = '<span class="' + styleBlock + '">' + value['date'] + '</span>';
json[key]['category'] = '<span class="' + styleCatDefault + '">' + value['category'] + '</span>';
json[key]['subcategory'] = '<span class="' + styleSubcatDefault + '">' + value['subcategory'] + '</span>';
json[key]['stories'] = '<span>' + value['stories'] + '</span>';
Any help appreciated!
Edit:
Line with many quotes finally worked:
json[key]['stories'] = '<span>' + value['stories'] + '</span>';

Just add value in string like this:
var str = `${jsvar}`
json[key]['stories'] = `<span>` + value['stories'] + '</span>';
Or
json[key]['stories'] = `<span>${value['stories']}</span>`;

loading image into view after ajax call

Here is the problem I ran into just now. I have a chat function part of my laravel application that loads respective users images as they type in the conversation. What I cannot figure out is when I append the url for the profile picture into the view, it will not actually display the picture, it just shows a "placeholder" of where the picture should be.
I know the code works for a fact because I can see in the console log the correct path for the picture inside the assets folder.
So my question is how would I display a picture after retrieving info from an ajax call.
$('.chat-wrapper').append(
"<div class='message " + sent + "'>" +
"<div class='media-left'>" +
"<a href=''><img scr=" + data.profilePicture + " class='img-circle img-50x50' title=''></a>" +
"</div>" +
"<div class='media-body'>" +
"<small class='small-gray p-l-10 pull-right'>" + data.time + "</small>"+
"<div class='heading'>" +
"<span>"+data.authorUserName+"</span>" +
"</div>" +
"<p>" + messageText + "</p>" +
"</div>" +
"</div>"
);
Thank you for the help in advance!

$('.chat-wrapper').append(
"<div class='message " + sent + "'>" +
"<div class='media-left'>" +
"<a href=''><img src='" + data.profilePicture + "' class='img-circle img-50x50' title=''></a>" +
"</div>" +
"<div class='media-body'>" +
"<small class='small-gray p-l-10 pull-right'>" + data.time + "</small>"+
"<div class='heading'>" +
"<span>"+data.authorUserName+"</span>" +
"</div>" +
"<p>" + messageText + "</p>" +
"</div>" +
"</div>"
);
src isn't spelt correctly, then notice the quotes after the src and the end of src also, try this out.

This is usually caused when you're in a route that does not represent the base URL properly.
You can use the asset() helper function to build the URL to your asset folder relative to the public directory on your server.
https://laravel.com/docs/5.3/helpers#method-asset

Javascript method argument escape

The below span tag containing an onclick event is not working
var test="<span onClick="gotoNode(\'' + result.name + '\',\'' + result.xaxis + '\',\'' + result.yaxis + '\',\'' + result.detail + '\',\'' + result.status + '\')" />"
the above escaped string has some problems with the method call.
How can I fix it?

If you're creating this in JavaScript to create an element, then the first single-quote needs to be escaped.
function gotoNode(name, xaxis, yaxis, detail, status) {
alert("name = " + name + "\r\nxaxis = " + xaxis + "\r\nyaxis = " + yaxis + "\r\ndetail = " + detail + "\r\nstatus = " + status);
}
var result = { name: "name", xaxis: "xaxis", yaxis: "yaxis", detail: "detail", status: "status" };
var htmlText = '<input value="Button" type="button" onclick="gotoNode(\'' + result.name + '\',\'' + result.xaxis + '\',\'' + result.yaxis + '\',\'' + result.detail + '\',\'' + result.status + '\')" />';
$("#lonely").append(htmlText);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="lonely"></div>
Generally speaking, whatever quote type you begin with (out of ' or "), you need to escape the same type that you want to use within the string and not escape the same type to terminate the string. You can leave the other type without escapes.
For your edited version, this should work if you want those result variables to be replaced with their values.
var test = "<span onclick=\"gotoNode('" + result.name + "','" + result.xaxis + "','" + result.yaxis + "','" + result.detail + "','" + result.status + "')\" />";

Do you use php to generate the output?
Then you should try
echo "<input type=\"button\" onClick=\"gotoNode(\" + result.name + \",\" +
result.xaxis + \",\" + result.yaxis + \",\" + result.detail + \",\" +
result.status + \")\" />";

How to use single quotation in string manipulation in javascript

As you can understand in the title, I want use single quotation in string manupulation. Here is my code:
headline += '<article><h5><a class="headline" onmouseover="headLineDetail(' + this.HeadCaption + ',' + this.ShortDescription + ',' + this.PicUrl + ',' + this.NewsId + ')" href="NewsDetail.aspx?nid=' + this.NewsId + '"' + '">' + this.HeadCaption + this.time + '</a></h5>';
I have to give string parameters of headLineDetail with quotation. But I append headline to a div as inner html. How can I use single quotation in this case.

You could use a \' to escape it.

Just escape using a \'
headline += '<article><h5><a class="headline" onmouseover="headLineDetail(\'' + this.HeadCaption + '\',\'' + this.ShortDescription + '\',\'' + this.PicUrl + '\',\'' + this.NewsId + '\')" href="NewsDetail.aspx?nid=' + this.NewsId + '"' + '">' + this.HeadCaption + this.time + '</a></h5>';

Javascript innerHTML not allowing onClick on javascript function

I am not sure why, but the following
href='javascript:"+ openextlink('http://www.ipetfindr.com/shop/product/' + item._id.$id);+"'
seems to run automatically without the user clicking.
document.getElementById("shop-items").innerHTML += "<div class='product " + cssclass + "'><div class='product-images-smaller'><span class='shop-large-image'><img src='" + item.pictures[0] + "'/></span></div><h1>" + item.name + "</h1><div class='prodtext'><b>Status:</b> " + item.status + "<br><b>Price:</b> $" + item.price + "<br><a id='shop_" + item._id.$id + "' href='javascript:"+ openextlink('http://www.ipetfindr.com/shop/product/' + item._id.$id);+"'><h3 id='dshop_" + item._id.$id + "' class='green_button'>Buy Now</h3></a></div></div>";
could anyone please tell me why.

href='javascript:"+ openextlink('http://www.ipetfindr.com/shop/product/'
I see a double quote , is it a typo, change to
href='javascript:'+ openextlink('http://www.ipetfindr.com/shop/product/'