How to resolve html elmento value quotes with javascript?

Question

I have a script that creates buttons with onclick events, but I’m having trouble assigning its value.
View the script:

for (var i = 0; i < cursos.length; i++) {    
$("#cursos").append("<button class='ui-btn ui-corner-all optCurso' data-transition ='slide' onclick="
                                                    + "'controller.setNomeCurso('" + cursos[i].Value + "')' >"
                                                    + cursos[i].Name + "</button>")
}

When creating the button it is as follows:

<button class="ui-btn ui-corner-all optCurso" data-transition="slide" onclick="controller.setNomeCurso(" anáse="" de="" sistemas')'="">Anáse de Sistemas</button>

How could I fix this?

Answer 1

In these cases it is better to create the element in another line and use the jQuery methods to put the dynamic values in place:

var button = $("<button class='ui-btn ui-corner-all optCurso' data-transition ='slide'></button>");
button.click(function () { controller.setNomeCurso(cursos[i].Value); });
button.text(cursos[i].Name);
$("#cursos").append(button);

(depending exactly where it comes from i, maybe you need something like button.click((function (nomeCurso) { return function () { controller.setNomeCurso(nomeCurso); }})(cursos[i].value)); to capture right to closure)

You’ll also need to put one type="button" if this button appears inside a form.

---

You really need to do this with jQuery?

var button = document.createElement('button');
button.type = 'button';
button.className = 'ui-btn ui-corner-all optCurso';
button.setAttribute('data-transition', 'slide');
button.addEventListener('click', function () { controller.setNomeCurso(cursos[i].Value); }, false);
button.appendChild(document.createTextNode(cursos[i].Name));
document.getElementById('cursos').appendChild(button);

This works on any IE 8+; if you agree to only be compatible with IE 11 and Edge, you can switch button.setAttribute('data-transition', 'slide') for button.dataset.transition = 'slide'.

The jQuery encourages this style of code, concatenating strings; this problem you encountered is the newest prime of SQL Injection. Concatenating strings to generate HTML tags is asking you to create XSS holes in your application.

Answer 2

Try using simple quotes in the function parameter call.

Follow the example worked:

var cursos = [{Name: "Teorema de D'Alembert", Value:"Teste '123 "},{Name: "Teste2", Value: 345}];
var createButton = function(){

$("#cursos").append("<button class='ui-btn ui-corner-all optCurso' data-transition ='slide' onclick=\"controller.setNomeCurso('"+ cursos[0].Value.replace(/'/g, "\\'") + "')\">"+ cursos[0].Name + "</button>");
}

$("#createButton").click(function(){
    createButton();
});

http://jsfiddle.net/alysonsm/qkyjuud9/2/

In the above example, the treatment is also provided for when the use of single quotes occurs within the value that will be printed in the function parameter.

To treat the error of single quotes within the value, just treat the string replaced by the values of single quotes by: \':

    var texto = "Exemplo '123'";
    var exemplo = texto.replace(/'/g, "\\'"); //Exemplo \'123123\';