CODEWITHSUNDEEP
javascriptjqueryjquery-events
Clinteney Hui
Clinteney Hui

Reputation: 4565

Restore previous state JavaScript

Say I want to modify a text by clicking on it, which turns to a input text field along with two buttons, save and cancel like below (the click event has been omitted and I am using the replaceWIth() from jQuery).

Before transformation:

<span>text<input type="button" value="delete"</span>

After transformation:

<input type="text"><input type="button" value="save"><input type="button" value="cancel">

what I want to do is if the I click on the cancel button, nothing happens and the "after transformation" part can be restore to the original part like how it looked before

<span>text<input type="button" value="delete"</span>

any way to do that? I thought I should somehow "save" before transforming like "snap" a picture or something. Any idea?

Upvotes: 0

Views: 2981

Answers (3)

JohnP
JohnP

Reputation: 50029

Waited till the India vs WI match was done before posting :)

This is what you want : http://jsfiddle.net/G8Kaj/4/

It uses live so that it'll work multiple times. It also works if there are multiple rows of because it simple picks up the parent and doesn't rely on there being only 1 row.

<span class='text'>text<input type="button" class='deleteButton' value="delete"></span>

$('span.text').live('click', function(){
    var $this = $(this);
    $this.data('oldText', $this.html());
    var newText = '<input  class="theText" type="text"><input class="saveButton"  type="button" value="save"><input class="cancelButton"  type ="button" value="cancel">';
    $this.html(newText);
});

$('.cancelButton').live('click', function(e){
    var $this = $(this); 
    var parent = $this.parent('span');
    parent.html(parent.data('oldText'));
    e.stopPropogation();
});

$('.saveButton').live('click', function(){
    //do something on save
    e.stopPropogation();
});


$('.theText, .deleteButton, cancelButton').live('click', function(){
    e.stopPropogation();
});

Uses the jqery data object to store the old state on a per span basis.

Upvotes: 1

Stephen Chung
Stephen Chung

Reputation: 14605

You are trying to implement inline-editing. This is a task better done with a JavaScript library. Most JavaScript library has modules (or plugins) that can do inline-editing -- text to textboxes, numbers to spinner boxes etc. I would not recommend recreating something that teams of library programmers have already spent hours debugging on all conceivable browser platforms.

For example, the Dojo Toolkit has dijit.inlineEditBox that needs very little coding and does most of what you want. It uses a hidden textbox to hold the previous value.

jQuery has the Edit-in-Place plugin.

Upvotes: 0

Jhourlad Estrella
Jhourlad Estrella

Reputation: 3680

Try this:

<span id="before">text<input type="button" value="delete" id="delete"/></span>      

<span id="after">
    <input type="text">
    <input type="button" value="save" id="save"/>
    <input type="button" value="cancel" id="cancel"/>
</span>     

<script>
    $('document').ready(function() {
        // Initially hide
        $('#after').css('display','none');

        $('#delete').click(function() { showAfter(); });
        $('#save').click(function() { hideAfter(); });
        $('#cancel').click(function() { hideAfter(); });



        function showAfter() {
            $('#after').css('display','block');
            $('#before').css('display','none');
        }


        function hideAfter() {
            doSomething();
            $('#after').css('display','none');
            $('#before').css('display','block');
        }


        function doSomething() {
            alert('I just did something!');
        }
    });

</script>

Upvotes: 0

Related Questions