Cannot pass a jQuery object to a function. How to safely pass a jquery object to a function?

Question

I have such a code. When I use hard-coded jquery object in a function all works fine. But when I want to pass it to a function call, my function doesn't recognize jquery object and table isn't drawn.

// This is a function that draws a table.
// I pass it the following params:

        drawTbl({
            tbody: $("#tbl tbody"),  // <tbody> element, jq object, This doesn't work.
            tblElem: null,
            tblTmpl: null,
            tblContTmpl: "cont_tmpl", // id of a jQuery template
            justAll: res.justAll,  // some data for a table
        });


// This is a function declaration
// It doesn't draw a table if I pass tbody as a jquery object.
// But works if I hard code tbody 
drawTbl = function(drawTblParams) {

    drawTblParams.tbody.empty();


    // Loop to draw a table with jquery template
    for (var m in drawTblParams.justAll) {

        // This doesn't work, content isn't appended to tbody
        $.tmpl( drawTblParams.tblContTmpl, { i: drawTblParams.justAll[m] }).appendTo( drawTblParams.tbody );

        // This works fine, content is appended to tbody
        $.tmpl( drawTblParams.tblContTmpl, { i: drawTblParams.justAll[m] }).appendTo( $("#tbl tbody") );
    }

    // The most ridiculous thing
    // This returns false! But it has to be the same element!
    console.log(drawTblParams.tbody == $("#tbl tbody"));

};

Why jq-object looses its value? How to safaly pass jquery object to a function?

Community · Accepted Answer · 2017-05-23 12:05:35Z

1

As noted here, you must compare the raw DOM elements (as opposed to jQuery-wrapped elements) to determine equality. That's why you're getting false in the console.

I think you can fix your issue if you simply re-jQuery-ify (?) the object inside the method like so:

$(drawTblParams.tbody).empty();

instead of:

drawTblParams.tbody.empty();

And so on throughout your method.

edited May 23, 2017 at 12:05

CommunityBot

11 silver badge

answered Aug 24, 2013 at 19:23

htxryan

2,9612 gold badges23 silver badges22 bronze badges

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

Comments

Green · Accepted Answer · 2013-08-24 22:07:04Z

I've learned what was the problem. I generate a <table> dynamically too. I do a drawTbl function call before a <table> is generated. So at the time when I pass a jQuery <tbody> element to function call, there is no any <tbody> element in the DOM.

I solved the problem this way:

drawTbl({
   tbody: "#tbl tbody",  // I pass a string instead of a jQuery object
   tblElem: null,
   tblTmpl: null,
   tblContTmpl: "cont_tmpl", // id of a jQuery template
   justAll: res.justAll,  // some data for a table
});

And in a function declaration I added the if:

drawTbl = function(drawTblParams) {

    // I generate a <table> before. So <tbody> is generated only now, not in the function call.
    drawTblParams.tblElem.html( $.tmpl(drawTblParams.tblTmpl) );

    // Here I check if drawTblParams.tbody is a string and convert it to jq object
    if(typeof drawTblParams.tbody == "string")
       drawTblParams.tbody = $(drawTblParams.tbody);

    // Now it exists
    drawTblParams.tbody.empty();

    ...

};

Collectives™ on Stack Overflow

Cannot pass a jQuery object to a function. How to safely pass a jquery object to a function?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related