Inline Edit/Save/Cancel Using JQuery

Question

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('');                                                            
            }
        });
    });
});

Answer 1

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

Answer 2

You can use this plugin

Plugin link