CODEWITHSUNDEEP
javascriptjquery
Shishant
Shishant

Reputation: 9294

edit in place

I have a table like this

<tr>
    <td>No.</td>
    <td>Username</td>
    <td>Password</td>
    <td>Valid Until</td>
    <td>Delete</td>
    <td>Edit</td>
</tr>
<tr>
    <td>1</td>
    <td id="1">
              <div class="1u" style="display: none;">Username</div>
              <input type="text" class="inputTxt" value="Username" style="display: block;"/>
            </td>
    <td id="1">
              <div class="1p" style="display: none;">Password</div>
              <input type="text" class="inputTxt" value="Password" style="display: block;"/></td>
    <td>18 Jul 09</td>
    <td><button value="1" class="deleteThis">x</button></td>
    <td class="editRow">Edit</td>
</tr>

When edit is clicked i run this function this replaces the text with input field, so what i want is to cancel this back to text when somewhere else is click instead of save.

        $('.editRow').click(function() {
        var row = $(this).parent('tr');

        row.find('.1u').slideUp('fast');
        row.find('.1p').slideUp('fast');
        row.find('.inputTxt').slideDown('fast');

    }).blur(function() { 
        row.find('.inputTxt').slideUp('fast');
        row.find('.1u').slideDown('fast');
        row.find('.1p').slideDown('fast');
    });

with this function text changes to input fields but input fields doesnt change back to text when i click somewhere else.

Thank You.

Upvotes: 0

Views: 603

Answers (3)

xandy
xandy

Reputation: 27411

Your blur is applying on the button td.editRow but not applying on the input fields. I think you should separate the code and it should work.

$('.editRow').click(function() {
    var row = $(this).parent('tr');

    row.find('.1u').slideUp('fast');
    row.find('.1p').slideUp('fast');
    row.find('.inputTxt')
        .slideDown('fast')
        .blur(function() { 
            row.find('.inputTxt').slideUp('fast');
            row.find('.1u').slideDown('fast');
            row.find('.1p').slideDown('fast');
        });
    });

Upvotes: 0

Shishant
Shishant

Reputation: 9294

Just edited my function because the plugin didn't suite well for my application 

        $('.editRow').live('click', function() {
            var row = $(this).parent('td').parent('tr');
            row.find('.1u').slideUp('fast');
            row.find('.1p').slideUp('fast');
            row.find('.inputTxt').slideDown('fast');
            $(this).parent('td').empty().append('<a href=# class=cancel>Cancel</a> / <a href=# class=save>Save</a>');
    });

Upvotes: 1

Ben Shelock
Ben Shelock

Reputation: 20965

There's a nice plugin for this

Upvotes: 3

Related Questions