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?

score 1 · Answer 1 · edited May 23 '17 at 12:05

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 '17 at 12:05

Community

1
1

answered Aug 24 '13 at 19:23

htxryan

2,871
2
21
21

score 0 · Answer 2 · answered Aug 24 '13 at 22:07

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();

    ...

};

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

2 Answers2