Inline Edit PHP MYSQL X-Editable

Question

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

jhmckimm · Accepted Answer · 2014-03-03 06:07:26Z

5

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

answered Mar 3, 2014 at 6:07

jhmckimm

1,0668 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3350885 Over a year ago

Wow.. Excellent. Working very fine now. Thanks for sharing.

jhmckimm Over a year ago

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.

Collectives™ on Stack Overflow

Inline Edit PHP MYSQL X-Editable

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related