Jquery/PHP Inline Edit

Question

I'm displaying data from mysql db in while loop name with edit and cancel buttons. when i click on edit button my span data is stored in input text and if i click on cancel its storing back my label data to input text..i'm only able to inline edit my first row record not on 2nd row or 3rd row for other rows my edit button is not pushing my span data into input text!!

Its like inline jquery/php edit for all rows were is should be able to edit individual records!!

Any help is appricated Thanks!!

Code

<html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript">
    $('#orders').delegate('.editOrder','click',function(e){
        e.preventDefault(e); 
        var $li = $(this).closest('li');    $li.find('input.name').val($li.find('span.name').html());
        $li.addClass('edit');
    });
    $('#orders').delegate('.cancelEdit','click',function(e){
        e.preventDefault(e); 
        $(this).closest('li').removeClass('edit');
    });
    </script>
    <style type="text/css">
        ul li .edit{
            display:none;
        }

        ul li.edit .edit{
            display:initial;
        }

        ul li.edit .noedit{
            display:none;
        }
    </style>
    </head>
    <body>
        <?php 
            $sql = "select * from demo";
            $result = mysql_query($sql);
            while($row = mysql_fetch_object($result))
            {
        ?>
        <ul id="orders">
            <li>
                <span class="noedit name">
                    <?php echo $row->name;?>
                </span>
                <input class="edit name"/>
                <button class="editOrder">Edit</button>
                <button class="cancelEdit">Cancel</button>
            </li>
        </ul>
        <?php } ?>
    </body>
</html>

BobbyTables BobbyTables · Accepted Answer · 2015-09-11T06:09:31

You need to have unique id:s in your html, this row <ul id="orders"> is repeated for each record you have, you need to make it unique. Maybe you should add a <li> for each record instead of a new <ul>. The code below has moved out the ul from the loop

<ul id="orders">
<?php 
            $sql = "select * from demo";
            $result = mysql_query($sql);
            while($row = mysql_fetch_object($result))
            {
        ?>

            <li>
                <span class="noedit name">
                    <?php echo $row->name;?>
                </span>
                <input class="edit name"/>
                <button class="editOrder">Edit</button>
                <button class="cancelEdit">Cancel</button>
            </li>

        <?php } ?>
        </ul>

Alternatively, you can change your id to a class, those are not unique and your jquery willl apply to all elements:

First:

<ul class="orders">

And then in your jquery:

 $('.orders').delegate( //etc

Jquery/PHP Inline Edit

1 Answers