0

I am constructing an HTML snippet with a JavaScript function that injects into a div.

Can't figure out how to do the quote / double quote wrapping for a passed variable dynamically.

var vLC = "zh-CN"

var vHtml = "<input type='radio' id='rbtn1' onclick='renderList(" + vLC + ");' />";

This code renders: onclick="renderList(zh-CN);"

I need it to render: onclick="renderList('zh-CN');"

Any geniuses out there that know the Code?

Improve this question

3 Answers 3

Reset to default
2

Don't modify your document by mashing strings together. It is more pain to maintain then it is worth.

var element = document.createElement('input');
element.type = "radio";
element.id = "rbtn1";
element.addEventListener('click', function () {
    renderList(vLC);
});

This is a general rule. If you are dealing with one language (programming, templating, data serialisation, whatever) inside another you meet pain. When you add another layer (JS inside HTML inside JS here) you get horrible pain.

Always either use an API to build the document, or build each layer in turn and add it to the next after running it through an escaping routine.

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

4 Comments

I need syntax - not another plan. Just need to inject html into a div within the jqGrid plugin for a specific use case.
Quentin - I solved the issue another way - but agree with your general rule :-)
@Charlez, Quentin was just pointing out that it is not considered best practice, not that you can't. I would have suggested a similar approach so as to not be associated with ugly code. Injecting html vs directly manipulating the dom, is bad for several reasons.
Agreed that direct dom manipulation is better in most instances - but sometimes simple html div injection get's it done without refactoring - for specific use cases. This turned out to be 2 lines of simple code and done :-)
0 
var vLC = "zh-CN"

var vHtml = "<input type=\"radio\" id=\"rbtn1\" onclick=\"renderList('" + vLC + "');\" />";
Improve this answer

4 Comments

This looks like it should work (although you need to trust that vLC will never include a ' character) but "Eugh!"
Agreed Quentin, but I was simply answering his question. I think your solution is better, but some people just want what they want...
Looks like it works and actually works are two different beasts.
iGanja - Doing the backslash escaping is agreed kinda ugly - but can be made to work. Separating into two simple lines rather than one nightmare line turned out to be a clean solution
0

www.jsbin.com to the rescue! - Thanks to Remy Sharp @rem :-D

Solution was to use a variable for the onclick action.

var vLanguageCode = "us-EN";
var vOnclick = 'renderList("' + vLanguageCode + '")';
vHtml = "<input type='radio' id='rbtn1' onclick=" + vOnclick + " />";

Simplify, simplify...

Improve this answer

2 Comments

Yes, this is much better string mashing.
Yes - and it works :-) Sometimes the hammer, sometimes the elegant erudite

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.