Inline Edit PHP MYSQL X-Editable

php mysql datagrid x-editable inline-editing

10,675

You should be using a class on the editable elements instead of an ID, like so:

 <a id="username" class="editable editable-click" data-pk="1" href="#">Book Name 1</a>
          <br>
          <a class="username" data-pk="2" href="#">Book Name 2</a>
          <br>
          <a class="username" data-pk="3" href="#">Book Name 3</a>
          <br>
          <a class="username" data-pk="4" href="#">Book Name 4</a>

Which means your JS should now be:

$('.username').editable({
        type: 'text',
        url: 'post.php',
        title: 'Enter username'
    });

10,675

Author by

user3350885

Updated on June 04, 2022

Comments

user3350885 almost 2 years

Basically I was trying to play with edit functionality using ajax concept.

As you all are aware, I'm in the beginning stage and now i downloaded some code stuffs from this url. http://vitalets.github.io/x-editable/docs.html

My code is here

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Ajax Edit using PHP</title>
    <link href="bootstrap.min.css" rel="stylesheet">
    <link href="bootstrap-editable.css" rel="stylesheet">
    <script src="jquery-2.0.3.min.js"></script> 
    <script src="bootstrap.min.js"></script>
    <script src="bootstrap-editable.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {

    $('#username').editable({
        type: 'text',
        url: 'post.php',
        title: 'Enter username'
    });

    });
    </script>
    </head>

    <body>
    <?php
    mysql_connect("localhost", "root", "password") or die(mysql_error());
    mysql_select_db("test") or die(mysql_error());
    $result = mysql_query("SELECT * FROM books") or die(mysql_error()); 
    ?>
    <div style="margin-top:100px;margin-left:40px;">
    <?php while($row = mysql_fetch_array( $result )) { ?>
    <a href="#" data-pk="<?php echo $row['book_id']; ?>" id="username"><?php echo $row['book_name']; ?></a>
    <br>
    <?php } ?>
    </div>
    </body>
    </html>

The above code display totally four book names(since the db has only four book names). I was able to edit the first book name alone and it gets edited in db too, and the remaining book names are not able to edit.

When I inspected with firebug I get the below code

          <a id="username" class="editable editable-click" data-pk="1" href="#">Book Name 1</a>
          <br>
          <a id="username" data-pk="2" href="#">Book Name 2</a>
          <br>
          <a id="username" data-pk="3" href="#">Book Name 3</a>
          <br>
          <a id="username" data-pk="4" href="#">Book Name 4</a>

I know, i have missed something.

Could someone help me out

Thanks, Kimz

user3350885 about 10 years

Wow.. Excellent. Working very fine now. Thanks for sharing.
jhmckimm about 10 years

You are very welcome. :) Just remember that there can only be one element on a page with an ID. Any more than one, and you must use a class instead.