Passing A Data to A Javascript Function In An Ajax Response

JavaScript
1

I need to embed a Javascript function call in an Ajax response data as the

$.ajax({
	url : ..., 
	data : JSON.stringify(json),
	type : "POST",
						
	beforeSend : function(xhr) {
	// ...
	},
	success : function(response) {												
	    var specifications = response.specifications;													
	    var respContent = '';
	    for(var i in specifications){
		respContent += '<dt>' + i + '</dt><dd>' + specifications[i] + '</dd>';  // <-- add a Javascript funcation call here
	    }		
	$("#specificationList").html(respContent);
}
});

The embedded Javascript function is

<span class="glyphicon glyphicon-remove" onclick="deleteSpecification( PARAMETER)" ></span>

My question is how to pass a parameter into the Javascript function call. Someone suggests to have the following:

respContent += '<dt>' + i + '</dt><dd onclick="deleteSpecification('+JSON.stringify(specifications[i])+')">' + specifications[i] + '</dd>';

This approach doesn’t work unfortunately due to a quotation market parsing problem. The output of the line is something like

<dt>2</dt><dd onclick="deleteSpecification("2")">something</dd>

I have tried various methods to quotation mark problem without a luck.

How to solve this problem?

p.s. I am not a web front end developer.

2

keep the JavaScript completely separate from the HTML and you will not have the problem.

The simplest way to attach the JavaScript would be to include an id=“something” instead of the onclick=“”

Then you can simply create a click event listener and attach it to the id.

3

Thanks for your suggestion. In another situation, I need to generate Id for each individual entry of a collection data. But I don’t know how create one inside of a loop like this case.

4

If all of the

tags need the same onclick attached then simply looping over them using getElementsByClassName and adding the click listener that way would be easier without even needing any ids.

5

A code is needed for deleting an individual entry, but not all of them with one click. The getElementsByClassName might be helpful, but some sort of Id or key is still needed to pass into a Javascript method. If so, we walk a cycle and go back to the original question.

6

This should be quite easy. Your success call (response) should be the script you want to embed. Append it to any div with the appendChild or insertBefore functions should work. I even override the whole existing script completely with this method.

Note that $(“#specificationList”).html(respContent); isn’t worked. Don’t use this method.

7

If I understand your words correctly, I should have something like the followings:

 success : function(response) {												
    var specifications = response.specifications;													
    var respContent = '';
    for(var i in specifications){
                 
            var dtNode=document.createElement("dt");
            var dtTextNode=document.createTextNode(i);
            dtNode.appendChild(dtTextNode);

          var ddNode=document.createElement("dd");
          var ddTextNode=document.createTextNode(specification[i]);
          ddNode.appendChild(ddTextNode);
              document.getElementById("specificationList").appendChild(dtNde),appendChild(ddNode);
    }

}
If the above is correct, I don’t get how to have the javascript function call.

Note that $(“#specificationList”).html(respContent); isn’t worked. Don’t use this method.

I don’t understand your this statement. I use it to get the data show up on the html page.

8

Yes, you have to add this too:
var script = document.createElement( ‘script’ );
script.type = ‘text/javascript’;
script.setAttribute(‘type’,‘text/javascript’);
script.text = respContent;
$(‘#specificationList’).appendChild(script);

Something like that.
Sorry, I found it’s disturbing to write code in this new interface.

9

if the event is registered through JavaScript, you can get the “evented” (clicked) element via this. from there onward you can transition relatively through the DOM.

10

If it’s just quote escaping that’s the problem, you’re very close.

If the specification objects have an id you can just spit that out in the spot can’t you? Or if your deleteSpecification method is expecting the count from the loop just output i. If the id’s are numbers you won’t need quotes around it but if you do just escape them with \

'onclick="deleteSpecification(' + specifications[i].id + ')"'
'onclick="deleteSpecification('+ i +')"'
'onclick="deleteSpecification(\''+ i +'\')"'

The other posters have tried telling you that’s there’s easier ways to do this, and they’re right. But you’ll still need to most likely output an id on the elements for those scripts to hang off.

'..<dt data-specification-id="' + specifications[i].id + '">...'

Then any time you click on a <dt> you can get the id and know which specification you’re dealing with.

11

I come back to rework on this issue today. For the embedded Javascript function, the end result shall be something like

onclick=“javascript:deleteSpecification(‘myKey’)”

But my result is something like

onclick=“javascript:deleteSpecification(“myKey”)”

from the line of Javescript code:

respContent += '<dt>' + i + '</dt><dd>' + specifications[i] + '<span class="glyphicon glyphicon-remove" onclick="deleteSpecification(' + JSON.stringify(i) + ')" ></span></dd>';

I can’t see how to get rid of the double quotation mark surrounding the function parameter.

Or, I have to use the attaching Javascript approach.

12

JSON.stringify adds the quotes. I’ve answered above, if you have an id on the object just output the key explicitly. e.g.

onclick="deleteSpecification(' + i.id + ')"
13

Thanks very much Mark. I use the third line in your previous post and that works.

14

No problemo.