CODEWITHSUNDEEP
jquery
user1047100
user1047100

Reputation:

weird jquery show behaviour on firefox

I have a simple table and I wish to add rows dynamically to them when some conditions apply.

<table>
<thead>
    <tr>
        <th>A</th>
        <th>B</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td><input class='new' name='test1' value='' /></td>
        <td><input name='test2' value='' /></td>            
    </tr>
</tbody>
</table>

JS:

$('table').on('keydown', '.new', function () {
if ($(this).val() === '') {
    var newBench = $("<tr><td><input class='new' name='aname' value='' /></td><td><input name='aname' value='' /></td></tr>");
    newBench.hide().appendTo('#dialog table').show('slow');

}
});

If you type something in the first input another row is appendend to the table but, when doing so, the td element containing the input where the text was inserted become bigger. It only happens for the first row and works under IE9. If I remove the hide() and the show() part, it works as expected.

Here is an example of the code which is not working: JSFIDDLE

Upvotes: 0

Views: 132

Answers (2)

VIDesignz
VIDesignz

Reputation: 4783

FADE IN WORKING IN IE

Here you go bro...

Fiddle

$('table').on('keydown', '.new', function () {
    if ($(this).val() === '') {
        var newBench = $("<tr><td><input class='new' name='aname' value='' /></td><td><input name='aname' value='' /></td></tr>");

        $(this).closest('tr').after(newBench.hide(function(){$('input', this).fadeIn('slow');}));

    }
});

Upvotes: 1

Viktor S.
Viktor S.

Reputation: 12815

That is somehow related to display:block which is set by .show() Not sure how that could be fixed. I've updated code to this and got it working in FF:

$('table').on('keydown', '.new', function () {
    if ($(this).val() === '') {            
        var newBench = $("<tr><td><input class='new' name='aname' value='' /></td><td><input name='aname' value='' /></td></tr>");
        newBench.hide().appendTo('#dialog table').css('display', 'table-row');
    }
});

Demo: http://jsfiddle.net/E99pf/6/

Not sure how it could be shown slowly. Code below does not work for sure:

newBench.hide().appendTo('#dialog table').show('slow', function(){$(this).css('display', 'table-row')});

Demo: http://jsfiddle.net/E99pf/5/

Upvotes: 1

Related Questions