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
– Jose Marques, Commented Jun 24, 2017 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
– Pegah Kiaei, Commented Jun 24, 2017 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: stackoverflow.com/questions/6792878/jquery-ajax-error-function — Jose Marques
– Jose Marques, Commented Jun 24, 2017 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
– Pegah Kiaei, Commented Jun 24, 2017 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
– Jose Marques, Commented Jun 24, 2017 at 12:47

Rajeev Ranjan · Accepted Answer · 2017-06-24 12:57:25Z

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, 2017 at 12:57

answered Jun 24, 2017 at 12:29

Rajeev Ranjan

4,1767 gold badges33 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Rajeev Ranjan Over a year ago

Try the fiddle I have added. It works just fine. This is the exact similar of what you are looking for perhaps.

Pegah Kiaei Over a year ago

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.

Rajeev Ranjan Over a year ago

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 Over a year ago

try updating your function declaration to a function expression as courseClicked = function(coid,term){..}.

Pegah Kiaei Over a year ago

the json object is populating correctly.but i don't know to updating my function with such decleration:(

|

Jose Marques · Accepted Answer · 2017-06-24 13:46:07Z

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, 2017 at 13:46

answered Jun 24, 2017 at 13:34

Jose Marques

7481 gold badge7 silver badges22 bronze badges

1 Comment

Pegah Kiaei Over a year ago

thanks for your kindness, it guided me alot. and it's working:)

Collectives™ on Stack Overflow

sending ajax json inputs to appended onclick js function

2 Answers 2

9 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related