Inline Edit PHP MYSQL X-Editable

StackOverflow https://stackoverflow.com/questions/22139670

Pregunta

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

¿Fue útil?

Solución

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'
    });
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top