How can I pass an object reference to a function in Javascript / jQuery?

Question

I have two functions in a data tool that I'm making - showEditDv(object) and editDv(object). If you haven't already guessed, Dv stands for Data Value. showEditDv is called when you click on the edit data icon. It generates an Opentip tooltip that (will) allow you to edit data, and is called like this: showEditDv(this); in an onclick attribute. Here is the code for that function (no, there aren't inline comments in the actual thing):

function showEditDv(object) {
    var name = $(object).attr("data-name"); // string(name) now holds the name of the data value
    var input = new Opentip($(object), {target: null, showOn: null, hideTrigger: "closeButton"});
    input.setContent("<label>Name:</label><input type='text' value='" + name + "' class='dv-add-name' /><label>Value:</label>input type='text' class='dv-add-value' value='" + data[name] + "' /><button onclick='editDv(" + $(object) /*<-- problem */ + ");'>Apply</button>");
    input.show();
}

The problem arises when the editDv() function is called by the 'Apply' button. Because the object is being referred to in a string (I think!), the object reference is printed as [object Object], and the function cannot hide the Opentip because it doesn't have a reference for it. Here is the code for editDv():

function editDv(object) {
    var input = $(object).data("opentips")[0]; // data("opentips") is an array of objects
    input.hide();
}

So my question is: how can I pass the input object from showEditDv to editDv as an argument, or is there a better way to do this entirely?

This is a perfect reason not to use inline event handling. You already have jQuery, so use it. Create a <button> - var button = $("<button>"), set its click event to do exactly what you need - button.on("click", function () { /* do whatever */ }); and use .append() where you need to add it somewhere. — Ian
– Ian, Commented Apr 2, 2013 at 20:12
An immediate fix would be to pass the id of the element, instead of the element itself (which isn't possible in your situation, as you've found out), and then get the element by using the id that was just passed. It's a little easier, but not proper — Ian
– Ian, Commented Apr 2, 2013 at 20:14

Sebastian · Accepted Answer · 2013-04-02 20:17:39Z

2

Don't call the function inline with an onclick event, use jQuerys .on() function instead:

Like so:

function showEditDv(object) {
    var name = $(object).data("name"); // use .data()
    var input = new Opentip($(object), {target: null, showOn: null, hideTrigger: "closeButton"});
    input.setContent("<label>Name:</label><input type='text' value='" + name + "' class='dv-add-name' /><label>Value:</label>input type='text' class='dv-add-value' value='" + data[name] + "' /><button class='callEditDv'>Apply</button>");
    input.show();
}

AND

$('.callEditDv').on('click', function() {
    // access the button like this: $(this)
});

answered Apr 2, 2013 at 20:17

Sebastian

4712 gold badges12 silver badges26 bronze badges

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

1 Comment

Ian Over a year ago

Good call, although it might be better to use $("body").on("click", ".callEditDv", function () { }); since these seem to be dynamic, and would avoid having to rebind the click event every time a new OpenTip is created

Collectives™ on Stack Overflow

How can I pass an object reference to a function in Javascript / jQuery?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related