Inline Edit/Save/Cancel Using JQuery

3
votes

I am performing Inline Edit operations using Jquery. I have

Label Name   ------>  Edit button

when i click on edit button label name will be replaced with input text box and edit button will be replaced with save and cancel buttons.

 Input text   ------>  save and cancel button

Currently i'm able do this for single div by giving Unique Ids to all buttons now i want to enhance it future say i'll create three divs with same class names for all label/edit/save/cancel buttons.

i will use only unique Id for input_text and i will keep same class names for label/edit/save/cancel buttons. If i click on Div1 i should be able to update values for Div1 and if i click on Div2 i should be able to update Div2 and soon.

Can somebody help me out in acheciving It Thanks

https://jsfiddle.net/qx69o1bd/18/

html

<!-- Label one -->
<div>
    <label class="name">
        <span>Label 1</span>
    </label>

    <input id='text_1' class='com_text' type='text' />  
</div>

<div>       
    <a href='#' class='edit'>
        <span>Edit</span>
    </a>

    <button class='save' type='submit'>Save</button>

    <button class='cancel' type='reset'>Cancel</button> 
</div>
<!-- Label one --> 
<br/>
<!-- Label two -->
<div>
    <label class="name">
        <span>Label 2</span>
    </label>

    <input id='text_2' class='com_text' type='text' />  
</div>

<div>       
    <a href='#' class='edit'>
        <span>Edit</span>
    </a>

    <button class='save' type='submit'>Save</button>

    <button class='cancel' type='reset'>Cancel</button> 
</div>
<!-- Label two -->
<br>
<!-- Label three -->
<div>
    <label class="name">
        <span>Label 2</span>
    </label>

    <input id='text_3' class='com_text' type='text' />  
</div>

<div>       
    <a href='#' class='edit'>
        <span>Edit</span>
    </a>

    <button class='save' type='submit'>Save</button>

    <button class='cancel' type='reset'>Cancel</button> 
</div>
<!-- Label three -->

JQuery

$(document).ready(function()
{
    $('.com_text').click(function()
    {
        var com_text = $(this).attr('id');
    });

    //Edit
    $('.edit').click(function()
    { 
        $(this).hide();
        $('.name').hide();
        $('.save,.cancel').show();
        $(com_text).val($('.name').text().trim()); 

    });

    //Cancel
    $('.cancel').click(function()
    { 
        $(this).hide();
        $('.name,.edit').show();
        $('.save').hide();
        $(com_text).hide();
        $(com_text).val('');

    });

    //Save
    $('.save').click(function()
    { 
        var sname = $(com_text).val().trim();

        var dataobj = {};
        dataobj.sid = $(this).attr('data-id');
        dataobj.sname = sname.trim();

        $.ajax(
        {
            type:"POST",
            dataType:"json",
            url:"pages/demo.php",
            cache: false,
            data: dataobj,
            success:function(response)
            {   
                $('.name').html(sname.trim());
                $('.name,.edit').show();
                $('.save,.cancel').hide();
                $(com_text).hide();
                $(com_text).val('');                                                            
            }
        });
    });
});
3
jqueryhtmlcss
Sjay, view my answer as I have fixed your com_text selector as well. I've also provided explanation as to how you can do it the proper way. - Jomar Sevillejo

3 Answers

3
votes

Hi now try to this js code i have some modify 

 $(document).ready(function()
{
    $('.com_text').click(function()
    {
        var com_text = $(this).attr('id');
    });

    //Edit
    $('.edit').click(function()
    { 
        $(this).hide();

        $(this).parent().prev().find('.name').hide();
       $(this).parent().prev().find('input').show();
        $(this).next('.save').show();
        $(this).next().next('.cancel').show();

        $(com_text).val($('.name').text().trim()); 

    });

    //Cancel
    $('.cancel').click(function()
    { 
        $(this).hide();
        $(this).parent().prev().find('.name').show();
        $(this).parent().prev().find('input').hide();
        $(this).prev().hide();
        $(this).prev().prev().show();
        $(com_text).hide();
        $(com_text).val('');

    });

    //Save
    $('.save').click(function()
    { 

        var sname = $(this).parent().prev().find('input').val().trim();
   alert(sname);

 $(this).parent().prev().find('.name > span').text(sname);
        $(this).parent().prev().find('.name').show();
        $(this).parent().prev().find('input').hide();
        $(this).prev().show();
        $(this).next().hide();
        $(this).hide();


    //  var dataobj = {};
    //  dataobj.sid = $(this).attr('data-id');
    //  dataobj.sname = sname.trim();

    /*  $.ajax(
        {
            type:"POST",
            dataType:"json",
            url:"pages/demo.php",
            cache: false,
            data: dataobj,
            success:function(response)
            {   
                $('.name').html(sname.trim());
                $('.name,.edit').show();
                $('.save,.cancel').hide();
                $(com_text).hide();
                $(com_text).val('');                                                            
            }
        });*/
    });
});

Demo Jsfiddle

Demo 2

1
votes

You can use this plugin

Plugin link

1
votes

I went through your code and have completely fixed errors and display functionality for your code also, here is a tip to get you on track to what you want to do.

Tip: Make it a habit to add wrappers.

Instead of:

<!-- Label one -->
<div>
    <label class="name">
        <span>Label 1</span>
    </label>

    <input id='text_1' class='com_text' type='text' />  
</div>

<div>       
    <a href='#' class='edit'>
        <span>Edit</span>
    </a>

    <button class='save' type='submit'>Save</button>

    <button class='cancel' type='reset'>Cancel</button> 
</div>
<!-- Label one -->

You can wrap each of the labels with a div, to create a level of hierarchy and create a boundary between each item, like this:

<!-- Label one -->
<div class="label-1 item-container">
    <div>
        <label class="name">
            <span>Label 1</span>
        </label>

        <input id='text_1' class='com_text' type='text' />  
    </div>

    <div>       
        <a href='#' class='edit'>
            <span>Edit</span>
        </a>

        <button class='save' type='submit'>Save</button>

        <button class='cancel' type='reset'>Cancel</button> 
    </div>
</div>
<!-- Label one -->

Some use list items for the matter, which I find effective as well. I'm not sure if using list items is any better for SEO, but seems to make more sense that way too.

Adding wrappers and creating that boundary will help you later when you want your script to not affect other items.

Now to get what you want. There's a lot of ways to do what you want, and luckily, what you want to achieve is a common task for jQuery.

Instead of using a selector that is common for each element, you can work your way up the DOM, and trace elements relatively instead by using jQuery's $.closest() and $.find()

You can do that like in this jsFiddle here

In the example I added wrappers to each element and used

$.closest() to walk up the DOM | View Documentation for Closest

and

$.find() to walk down the DOM | View Documentation for find

Hope this answer helps!