Jeditable not working on IE tables, but works in FF, Chrome

Question

<html>

    <head>

        <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
        <script type="text/javascript" src="js/jquery.jeditable.min.js"></script>
        <script type="text/javascript" src="js/jquery.jeditable.checkbox.js"></script>

        <script>

            $(function () {
                $(".editable").click(function (event) {
                    $(this).editable('ajax_save.php',{
                        submit      : 'Save',
                        cancel      : 'Cancel',
                        tooltip     : ''
                    });
                });
            });

        </script>

    </head>

    <body>

        <table>

            <tr>

                <td class='editable' id='id-1234'>value of 1234</td>
                <td class='editable' id='id-1235'>value of 1235</td>                

            </tr>

            <tr>

                <td class='editable' id='id-1236'>value of 1236</td>
                <td class='editable' id='id-1237'>value of 1237</td>                

            </tr>

        </table>

    </body>

</html>

The code below works fine in FF/Chrome but fails in IE, when I click on the td element, it vanishes... on dev console it shows an error on a certain line but that error doesn't show in FF/Chrome.

Any ideas?

IE 7 and 8 , currently trying to see what might cause this .... — cristi _b, Nov 12 '11 at 19:42
Okay, I'm pretty sure I know what's up. Will post an answer. — Niet the Dark Absol, Nov 12 '11 at 19:46
Answer to fix this is here: http://stackoverflow.com/questions/1750973/jeditable-performance-in-ie — Laurence, Jun 05 '12 at 15:03

score 1 · Answer 1 · answered Nov 12 '11 at 19:47

1

I think the problem is caused by jQuery setting the display property to table-cell. IE 7 and 8 don't support that, so they'll act strange and throw errors.

My suggested fix is to put a <div> inside each cell and apply the editable stuff to that instead of to the cells.

answered Nov 12 '11 at 19:47

Niet the Dark Absol

320,036
81
464
592

tried that... both divs and td disappear from screen... I get an error in Dev console like Unexpected call to method or property access. jquery-1.5.1.min.js, line 16 character 55817 – cristi _b Nov 12 '11 at 19:58
I found that jeditable works fine, the problem appears when I define the submit and cancel options – cristi _b Nov 12 '11 at 20:24

score 0 · Accepted Answer · answered Nov 13 '11 at 10:32

It seems like not all options work on IE 7/8 ...

This code works

$(document).ready(function() {
    $(".editable").editable("ajax.php",{
        type: "text"
    });
});

This doesnt on IE8 at least...

$(document).ready(function() {
    $(".editable").editable("ajax.php",{
        type: "text", submit:"OK",cancel:"Cancel"
    });
});

Maybe it's a bug with jeditable handling elements

Jeditable not working on IE tables, but works in FF, Chrome

2 Answers2