How to solve value quotes in html with javascript?

1

I have a script that creates buttons with onclick events, but I'm having trouble assigning its value.
See 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 looks like this:

<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 solve this?

    
asked by anonymous 05.06.2015 / 02:19

2 answers

1

Try to use single quotation marks in the function parameter call.

The following example works:

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();
});

link

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

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

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

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

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 on where i comes from, you may need something like button.click((function (nomeCurso) { return function () { controller.setNomeCurso(nomeCurso); }})(cursos[i].value)); to capture the closure right)

You will also need to enter a type="button" if this button appears inside a form.

Do 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 accept to be compatible only with IE 11 and Edge, you can change button.setAttribute('data-transition', 'slide') to button.dataset.transition = 'slide' .

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

    
05.06.2015 / 02:34