Passing javascript variable to another function using onclick

Question

I am trying to pass the id which is

var aid = post.id;

to the message container and when the a onClick is being clicked, the page should alert the aid value. Other records are being displayed properly. However, the problem here is that it is saying aid is undefined. How do i fix this issue?

var message_container = '<div class=\"new-update clearfix\"><div class=\"update-done\"></br> </div> <a onClick="reject('+ aid + ');" id="aid" class=\"tip\" ><i style=\"font-size: 2em; float:right\"  class=\"icon-remove\"></i></a> </br></br> </div>';
        $.ajax({
        url : '/test/back-api/admin/announcements',
        method : 'GET',
        success : function(d) {
            if (d.result) {
                var posts = d.data;
                for (var i = 0; i < posts.length; i++) {
                    var post = posts[i];
                    var aid = post.id;
                    //message.find('#aid').append("href", post.id);
                    $("#announcement-container").prepend(message);
                }
            } else {
                $('#announcement-container').append("<div> Nothing to show. </div>");
            }
        }
});
var reject = function(aid){
     $.ajax({
     url: app.api + "admin/transaction/remove/"+aid,
     type: 'post',
     success: function(d){
       alert(aid);
     }
})

Define `aid` outside `ajax` call and assign value in success. It's all about `scope` of variable. — Fawkes, Aug 16 '17 at 07:17

T.J. Crowder · Answer 1 · 2017-08-16T08:11:03.627

If you use aid in an onxyx-attribute-style event handler, it has to be a global. That's one of many reasons not to use them.

Instead, hook up the event handler with modern handling, store the aid on the link as a data-* attribute, and retrieve it in reject:

// *** Removed `onClick` and `id="aid"` from this string
var message_container = '<div class=\"new-update clearfix\"><div class=\"update-done\"></br> </div> <a class=\"tip\" ><i style=\"font-size: 2em; float:right\"  class=\"icon-remove\">remove link</i></a> </br></br> </div>';
$.ajax({
    url : '/test/back-api/admin/announcements',
    method : 'GET',
    success : function(d) {
        if (d.result) {
            var posts = d.data;
            for (var i = 0; i < posts.length; i++) {
                var post = posts[i];
                var aid = post.id;
                //message.find('#aid').append("href", post.id);
                // *** Hook it up and prepend it
                $(message_container)               
                    .find("a.tip")
                        .attr("data-aid", aid)
                        .on("click", reject)
                        .end()
                    .prependTo("#announcement-container");
                // *** End of added bit
            }
        } else {
            $('#announcement-container').append("<div> Nothing to show. </div>");
        }
    }
});
function reject() {
    var aid = this.getAttribute("data-aid"); // *** Get the aid from the element
    alert("reject aid = " + aid);
}

Note that I removed the id="aid" from the string. You can't have the same ID on more than one element.

Live example:

// *** Removed `onClick` and `id="aid"` from this string
var message_container = '<div class=\"new-update clearfix\"><div class=\"update-done\"></br> </div> <a class=\"tip\" ><i style=\"font-size: 2em; float:right\"  class=\"icon-remove\">remove link</i></a> </br></br> </div>';
fakeAjax({
    url : '/test/back-api/admin/announcements',
    method : 'GET',
    success : function(d) {
        if (d.result) {
            var posts = d.data;
            for (var i = 0; i < posts.length; i++) {
                var post = posts[i];
                var aid = post.id;
                //message.find('#aid').append("href", post.id);
                // *** Hook it up and prepend it
                $(message_container)               
                    .find("a.tip")
                        .attr("data-aid", aid)
                        .on("click", reject)
                        .end()
                    .prependTo("#announcement-container");
                // *** End of added bit
            }
        } else {
            $('#announcement-container').append("<div> Nothing to show. </div>");
        }
    }
});
function reject() {
    var aid = this.getAttribute("data-aid"); // *** Get the aid from the element
    alert("reject aid = " + aid);
}
function fakeAjax(options) {
    setTimeout(function() {
        options.success({
            result: true,
            data: [
                {id: 1},
                {id: 2},
                {id: 3}
            ]
        });
    }, 300);
}

<div id="announcement-container"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

If you don't want to change reject, then just change the handler from:

.on("click", reject)

to

.on("click", reject.bind(null, aid))

and leave the rest the same.

I have tried this, it actually appends another 2 extra rows and didn't alert anything — John Wick, Aug 16 '17 at 07:39
@JohnWick: I had planned to just leave it, since the solution you marked accepted does work even if it's quite poor. But I felt like I'd done a bad job, so I finished doing it. See above, including live example. — T.J. Crowder, Aug 16 '17 at 08:11

gjijo · Accepted Answer · 2017-08-16T08:19:44.513

0

var message_container = $('<div class=\"new-update clearfix\"><div class=\"update-done\"></br> </div> <a onClick="reject('+ aid + ');" id="aid" class=\"tip\" ><i style=\"font-size: 2em; float:right\"  class=\"icon-remove\"></i></a> </br></br> </div>');
$.ajax({
    url : '/test/back-api/admin/announcements',
    method : 'GET',
    success : function(d) {
        if (d.result) {
            var posts = d.data;
            for (var i = 0; i < posts.length; i++) {
                var post = posts[i];
                $(message_container).find('#aid').attr("onClick", "reject('"+ post.id + "')");
                $("#announcement-container").prepend($(message_container).clone(true));
            }
        } else {
            $('#announcement-container').append("<div> Nothing to show. </div>");
        }
    }
});
var reject = function(aid){
     $.ajax({
         url: app.api + "admin/transaction/remove/"+aid,
         type: 'post',
         success: function(d){
           alert(aid);
         }
    });
}

Please see the updated answer.

edited Aug 16 '17 at 08:19

answered Aug 16 '17 at 07:21

gjijo

1,206
12
15

1

error unexpected EOI. To add code, use the code block. Use snippet only for working code – Sagar V Aug 16 '17 at 07:22
2

@ErrorinException: I've changed my code to snippet. I'll keep this in mind. I've updated my answer. – gjijo Aug 16 '17 at 07:30
better to replace $("#announcement-container").prepend($(message_container)); as $("#announcement-container").prepend($(message_container).clone(true)); to make it different for each prepend. I've again updated my answer. – gjijo Aug 16 '17 at 08:03
@JohnWick & gjijo: Problems with the above: 1. Using the same ID on multiple elements is invalid HTML. 2. There's zero reason to use the `onClick` attribute when you're hooking up the event handler (either handle the [closures-in-loops](http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) aspect, or set it as a data attribute on the element, etc). – T.J. Crowder Aug 16 '17 at 08:05
Also tag will force redirect in certain browsers, even if the click event is explicitly specified. So its better to change it as some button with on click event, or reload the same page using – gjijo Aug 16 '17 at 08:07
@gjijo: No, an `a` with no `href` will not react to a click other than to fire its click event. – T.J. Crowder Aug 16 '17 at 08:12
Oh sorry, @JohnWick has commented the changing of href value. I didnt noticed the same and included it in my answer. Removed it and updated the answer. – gjijo Aug 16 '17 at 08:19

Passing javascript variable to another function using onclick

2 Answers2