I am writing python code + event handling on a javascript site. There was a need to send a request with quotes. Quotes I screened slash:

var field_td = dojo.create("td"); field_td.innerHTML = "<span id='crfield' contenteditable='false' ondblclick = 'clickTree(activeControl, \'" + response.res[j] + "\')' class='table_list'>" + response.res[j] + "</span>";

but an error occurred: Uncaught SyntaxError: Unexpected token} I have been looking for a trick for a long time, and it turned out that quotation marks must be replaced with double slashes (“) and the code will work. Why?

Upd. The problem is that for a correct query, I need single quotes there because fields in the database are usually closed with double.

Problem solved, many thanks Grundy!

 var field_td = dojo.create("td"); var span = document.createElement('span'); span.id = 'crfield'; span.contenteditable = 'false'; span.ondblclick = function(){ clickTree(activeControl, response.res[j]); }; span.className = 'table_list'; span.innerHTML = response.res[j]; field_td.appendChild(span);

You can write the same code using the dojo.create method instead of document.createElement.

  • Is the above code javascript? Is it working or does the described error occur in it? - Grundy
  • I think because your screened single ones go after single ones, but you have to alternate. like this: " ' \" \' foo \' \" ' " - lexxl
  • that is why it is better not to collect the line, but to immediately create the elements - Grundy
  • The code is javascript, it turns into a worker, if you replace the screened quotes with double (") in two places. It seemed to me, it’s clear from the question, I'm sorry. - Mae

2 answers 2

The main problem when collecting html string with attributes is the placement and escaping of quotes.

To find out why the "did not work" screening in this case, you just need to see the resulting string.

 "<span id='crfield' contenteditable='false' ondblclick = 'clickTree(activeControl, \'" + response.res[j] + "\')' class='table_list'>" + response.res[j] + "</span>";

Let the value of response.res[j] be test , then we get the string

 <span id='crfield' contenteditable='false' ondblclick = 'clickTree(activeControl, 'test')' class='table_list'>test</span>

As you can see from the result, we have the same quotes in the ondblclick attribute.

What happened here?
The quotes were escaped, but, they were escaped for the string being collected.

Thus, the solution can be to replace quotes with double ("), or screening with the expectation that the resulting string will also be processed

 "<span id='crfield' contenteditable='false' ondblclick = 'clickTree(activeControl, \\'" + response.res[j] + "\\')' class='table_list'>" + response.res[j] + "</span>";

As a result, we get

 <span id='crfield' contenteditable='false' ondblclick = 'clickTree(activeControl, \'test\')' class='table_list'>test</span>

and as you can see now in the string for the ondblclick attribute ondblclick single quotes are also escaped.
Double shielding did not help, but replacing quotes with special html characters, for example, for single quotes - &#39;

 "<span id='crfield' contenteditable='false' ondblclick = 'clickTree(activeControl, &#39;" + response.res[j] + "&#39;)' class='table_list'>" + response.res[j] + "</span>";

Working example:

 var response = { res: { 0: 'test' } }, j = 0; document.body.innerHTML = "<span id='crfield' contenteditable='false' ondblclick = 'clickTree(activeControl, &#39;" + response.res[j] + "&#39;)' class='table_list'>" + response.res[j] + "</span>"; var activeControl = "Check"; function clickTree(a, b) { document.getElementById('crfield').textContent += " " + [a, b]; }

To avoid such problems with screening can work with objects, not a string, for example

 var span = document.createElement('span'); span.id = "crfield"; span.contenteditable = false; span.ondblclick = function(){ clickTree(activeControl, response.res[j]);}; span.className = "table_list"; field_td.appendChild(span);

Example:

 var response = { res: { 0: 'test' } }, j = 0; var span = document.createElement('span'); span.id = "crfield"; span.contenteditable = false; span.textContent = response.res[j]; span.ondblclick = function() { clickTree(activeControl, response.res[j]); }; span.className = "table_list"; document.body.appendChild(span); var activeControl = "Check"; function clickTree(a, b) { document.getElementById('crfield').textContent += " " + [a, b]; }

  • Unfortunately, double-shielding did not work: some kind of heresy comes out in the ondblclick event, for example: <span id = "crfield" contenteditable = "false" ondblclick = "clickTree (activeControl, \" ZAO = "" Horns and hoofs "\ ')' =" "class =" table_list "> CJSC" Horns and hoofs "</ span> - Mae
  • @NewDevelop, better add the code directly to the question, in the comments it is unreadable. Ideally, you need to make an example in a snippet here or on jsfiddle that would repeat your mistake - Grundy
  • If you create a span object, the error disappears, but the ondblclick event is not executed. Brought your code to this view: var span = document.createElement ('span'); span.id = 'crfield'; span.contenteditable = 'false'; span.ondblclick = function () {clickTree (activeControl, response.res [j])}; span.className = 'table_list'; field_td.innerHTML = "<span" + span + ">" + response.res [j] + "</ span>"; - Mae
  • @NewDevelop, I repeat: in the comments, the code is completely unreadable - Grundy
  • Well, I will try to add an example to the post. - Mae

In general, the solution with the creation of the span element will work, but in my case, in a loop, the last value is always passed to the ondblclick method as an argument of response.res [j]. Therefore, I returned to the original version and refined it using the double slash suggested by @Grundy:

 var val = response.res[j].toString().replace(new RegExp('"','g'),'\\"'); newRow.innerHTML = "<span id='crfield' contenteditable='false' ondblclick = 'clickTree(activeControl, &quot;"+ val + "&quot;)' class='table_list'>" + response.res[j] + "</span>";

Code earned correctly!

  • The problem with the cycle is solved by the closure, see questions about the closure here :) - Grundy