Is it possible to get the HTML of a jQuery created element before it has been inserted into the DOM Tree?

Question

Here's what I've got:

gridComplete: function() {
    var doneButton = $('<input>', {
        type: 'button',
        value: 'Done',
        click: function() {
            alert("Done!");
        }
    });

    console.log("HTML:", doneButton.html());

    var ids = $(this).jqGrid('getDataIDs');
    var self = this;
    _.each(ids, function(id) {
        $(self).jqGrid('setRowData', id, {
            MarkDone: doneButton.html()
        });
    });
}

If I just try and insert the doneButton object, the jqGrid cell renders [object Object] instead of the actual button. As such, I can infer that it is expecting raw HTML. However, doneButton.html() returns an empty string... presumably because I have not appended the doneButton object onto the document yet.

Is there a trick to doing this with jQuery? I'd prefer the cleaner/safer syntax for generating the HTML markup, but I can do this:

gridComplete: function() {
    var doneButtonHtml = "<input type='button' value='Done' onclick=\"alert('Done');\" />";

    var ids = $(this).jqGrid('getDataIDs');
    var self = this;
    _.each(ids, function(id) {
        $(self).jqGrid('setRowData', id, {
            MarkDone: doneButtonHtml
        });
    });
},

which renders the button as expected.

Answer 1

You get an empty string from your button because html() returns the inner HTML.

You probably want doneButton.get(0).outerHTML

Answer 2

If I correct understand what you want you can do the same using another way. To reduce the number of web browser reflows jqGrid build grid body disconnected and then inserts it at one. One have to use gridview: true to have the performance advantage. The problem is only that jqGrid build grid body as HTML string and not as DOM . jqGrid provide custom formatters, cellattr and rowattr callbacks which allows to construct custom column content or set some custom attributes on rows. See the answer for details.

So what you should do is

1. provide custom formatter for column MarkDone with the content "<input type='button' value='Done' />" (without click ) event handler
2. use onCellSelect or beforeSelectRow callback to catch click event in any place of grid body inclusive the click on "Done" button. The event bubbling (see here ) helps to reduce the number of event handles needed in the grid. $td = $(e.target).closest("td") will get you the cell which was clicked, iCol = $.jgrid.getCellIndex($td[0]) will get you the column number and this.p.colModel[iCol].name will get you the name of the clicked column.

The answer , another one and the oldest one will get you code examples and additional information which you need.

Answer 3

Change this:

MarkDone: doneButtonHtml.html()

To:

MarkDone: doneButtonHtml.get(0)

doneButtonHtml is a DOM elements array. You need to call get(0) to get the first element in that array.

Answer 4

The first thing to keep in mind is that .HTML() actually retrieves the html inside of an element, not the html of the element itself.

If you access the Javascript element from the jQuery array of objects you should get the raw html back. Check out this fiddle: http://jsfiddle.net/NvKYT/

var doneButton = $('<input>', {
    type: 'button',
    value: 'Done',
    click: function() {
        alert("Done!");
    }
});

//doneButton[0] - your html

Try passing doneButton[0] as that is the actual element, not the jQuery wrapped element.