CODEWITHSUNDEEP
jquerytexthideshow
user1889867
user1889867

Reputation: 89

JQuery show() after hide()

HTML:

<table id="table1">
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
    </tr>
    <tr>
        <td class="table1column1"><input type="text" id="idInput1" /></td>
        <td class="table1column2"><input type="text" id="idInput2" /></td>
        <td class="table1column3"><input type="text" id="idInput3" /></td>
        </tr>
</table>
<button>Hide-Text-Show</button>

JQuery:

$(document).ready(function() {
    $('button').click(function() {
        $('#idInput1').hide();
        $('.table1column1').text('Test');
        $('#idInput1').show();
    });
});

http://jsfiddle.net/QNxyG/

I don't understand why when I add a text in td element, the show() method doesn't work?

Thanks

Upvotes: 3

Views: 6328

Answers (3)

Mik
Mik

Reputation: 1703

http://jsfiddle.net/QNxyG/4/

with .text() you override anything in your example... so the input doesnt exist anymore

HTML

<table id="table1">
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
    </tr>
    <tr>
        <td class="table1column1"><span class="text" style="display:none;"></span><input type="text" id="idInput1" /></td>
        <td class="table1column2"><span class="text" style="display:none;"></span><input type="text" id="idInput2" /></td>
        <td class="table1column3"><span class="text" style="display:none;"></span><input type="text" id="idInput3" /></td>
    </tr>
</table>

<button>Hide-Text-Show</button>

jQuery

$(document).ready(function() {
    $('button').click(function() {
        var input = $('#idInput1');
        var text = input.parent('td').find('.text');
        text.text('text');
        text.toggle();
        input.toggle();
    });
});​

Upvotes: 4

Sergio Toledo Piza
Sergio Toledo Piza

Reputation: 788

$(document)
    .ready(function () {
    $('button')
        .click(function () {
        $('#idInput1')
            .hide(function () {
            $('.table1column1 input')
                .val('Test', function () {
                $('#idInput1')
                    .show();
            });
        });
    });
});

Upvotes: 0

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196187

Because with .text() you overwrite the #idInput1 element (it gets removed) so the next $('#idInput1') does not find an element to show..

Upvotes: 4

Related Questions