Question

I have a <td> element like this one:

<td class="right editable qty">100</td>

I want to get the value inside that (100) but got some problem.

Here is my script:

$('#example tbody tr td.qty').change(function () {
    var sQty = $(this);

    console.log(sQty); // print [<td class="right editable qty">100</td>]
    console.log($.text(sQty)); // print nothing
    console.log(sQty.val()); // print nothing
    console.log(sQty.text()); // print nothing
    console.log(sQty.html()); // print <form><input style="width: 100%; height: 100%; " autocomplete="off" name="value"></form>
}); 

Is there something missing with my script?

I’m working with: DataTables and jeditable

Answer 1

/* Apply the jEditable handlers to the table */
oTable.$('td.editable').editable(
    function(value, settings) {
        if($(this).hasClass('qty')) // The editable class not only on one column.
            console.log(value);
        return(value);
    },
    {   
        "height": "100%",
        "width": "100%"
    }
);

When I’m trying to run the jEditable handlers and change events (on question above), I found that the change events will be trigger first and after that the jEditable handlers. What the jEditable handlers will do is return the value and set into the cell that has been edit.

For the default the table cell will be look like this:

<td class="right editable qty">1</td>

When I click the cell it will generate this form:

<td class="rigth editable qty">
    <form>
        <input style="width: 100%; height: 100%; " autocomplete="off" name="value">
    </form>
</td>

As we see the value of the cell is disappear (This form I got when trying to inspect the element with firebug). And when I try to change the value of the input element inside the form the firebug didn’t show anything change at all (the value is hidden somewhere). So when I press the Enter button I realize that change event will be trigger first and for that moment the <td> elements is still empty, so that’s why when we try to print the value is still empty.

So instead of using the change events to get the value, I’m using the jEditable handlers before it returns the value into the cell (the handler will be trigger if we press the Enter button).