sending ajax json inputs to appended onclick js function

Question

i have a div area in which i added some json input from an ajax success function.

function rowClicked(term){
$.ajax({
    url: "/student/transcript_detail",
    data:{term:term},
    on:"/student/transcript_detail",
    method:"POST",
    success: function(responseJson) {
        $('#course-brief-row').empty();
        $('#nomre_term_body').empty();
        $.each(responseJson, function(index,termDetail){
            $("#course-brief-row").append("<a class='style-item' onclick='courseClicked(${termDetail.coirseId},${term})'>" +termDetail.coursename+"<br>"+
                                            termDetail.grade+"<br>"+
                                            termDetail.stat+"<br>"+
                                            "<p><br>&nbsp;</p>"+
                "</a>");""
        });
    },
    error: function () {
        alert("ERROR");
    }

});

then i want each added <a> tag, to send my json parameter as an input for their onclick function calling,

function courseClicked(coid,term){
    //do sth
}

now i want to know how should i send this argumats? In other words how should i write this part:

onclick='courseClicked(${termDetail.coirseId},${term})

What is your difficulty? It is the event listener for the onclick. It is the construction of your Json, or another that I do not know.Or you want to send multiple data from a Json through AJAX? — Jose Marques, Jun 24 '17 at 12:25
@JoseMarques what i wrote here is not working, i wanted to know if there is any problem with the syntax? — Pegah Kiaei, Jun 24 '17 at 12:30
First, do you have any errors on your console? Second use the complete function error in your AJAX, for more information use this link: https://stackoverflow.com/questions/6792878/jquery-ajax-error-function — Jose Marques, Jun 24 '17 at 12:35
@JoseMarques no there is no error in my console.Besides, i commented all courseClicked's codes except an alart() and it is still not working. — Pegah Kiaei, Jun 24 '17 at 12:42
Is the data you get from your ajax expected? What kind of data do you receive? To see this go to your browser's console and check the data you receive. — Jose Marques, Jun 24 '17 at 12:47
actually, "termDetail"is a list of defined Object and term is an Integer. but the thing is,it works properly without courseClicked's input parameters. — Pegah Kiaei, Jun 24 '17 at 12:55
Ok your problem it's located when you are constructing your element. The way around this, is creating your element and then apend your onckick function. If you don't know wow to do this give me some time and I will create a exemple for you to folow. — Jose Marques, Jun 24 '17 at 13:10
@JoseMarques I'm really newbie in this area, so it would be very nice of you if you could do me this favor. Thanks in advance for your time!:) — Pegah Kiaei, Jun 24 '17 at 13:20

Rajeev Ranjan · Accepted Answer · 2017-06-24T12:57:25.403

1

This should suffice I suppose-

onclick='courseClicked("+termDetail.coirseId+","+term+")'

Its a normal javascript variable that you are passing on anyways.

Try the fiddle - https://jsfiddle.net/607notn6/.

edited Jun 24 '17 at 12:57

answered Jun 24 '17 at 12:29

Rajeev Ranjan

3,588
6
28
52

Try the fiddle I have added. It works just fine. This is the exact similar of what you are looking for perhaps. – Rajeev Ranjan Jun 24 '17 at 12:58
One of my function argument's is a JSON object directly fetched from server. Any chance that this prevents my function from working? Maybe there must be a different syntax for JSON object. – Pegah Kiaei Jun 24 '17 at 13:05
You can do a console.log() to check if the json object is populated and you are accessing it correctly. You need to add the statement `console.log(termDetail.coirseId+","+term)` or `alert(termDetail.coirseId+","+term)`just before `$("#course-brief-row").append...` statement. – Rajeev Ranjan Jun 24 '17 at 13:08
try updating your function declaration to a function expression as `courseClicked = function(coid,term){..}`. – Rajeev Ranjan Jun 24 '17 at 13:20
the json object is populating correctly.but i don't know to updating my function with such decleration:( – Pegah Kiaei Jun 24 '17 at 13:24
Just replace `function courseClicked(coid,term){` with `courseClicked = function(coid,term){` wherever you have defined your function courseClicked. https://javascriptweblog.wordpress.com/2010/07/06/function-declarations-vs-function-expressions/ – Rajeev Ranjan Jun 24 '17 at 13:26
i tried it but i still get no response.more, i found that in my IDE it has been mentioned that attribute `+termDetail.coirseId+` is not allowed. – Pegah Kiaei Jun 24 '17 at 14:31
Were the console.log/alert working for you? Could you please share the complete javascript code here or in fiddle? – Rajeev Ranjan Jun 24 '17 at 14:40
it worked!!!!:)hura! thank you alot, i've just checked some other permutations:)) to see if it works or not and it did. ps:i used this : `onclick='courseClicked("+termDetail.coirseId+","+term+")'` syntax and i defined a variable for ``. – Pegah Kiaei Jun 24 '17 at 14:55

Jose Marques · Answer 2 · 2017-06-24T13:46:07.067

0

This is the example now you need a little more work.

var var_text = "ola";
var a = document.createElement('a');
var linkText = document.createTextNode("my title text");
a.appendChild(linkText);
a.title = "my title text";
a.setAttribute('onclick', 'fuction_test(var_text)');
document.body.appendChild(a);
function fuction_test(var_text1){
  alert(var_text1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Any doubt, just ask for my help. I will try to help you.

edited Jun 24 '17 at 13:46

answered Jun 24 '17 at 13:34

Jose Marques

748
1
6
22

thanks for your kindness, it guided me alot. and it's working:) – Pegah Kiaei Jun 24 '17 at 14:59

sending ajax json inputs to appended onclick js function

2 Answers2