2014-03-03 4 views
2

기본적으로 아약스 개념을 사용하여 편집 기능을 사용하려고했습니다.인라인 편집 PHP MYSQL X 편집 가능

모두 알고 있듯이, 나는 초기 단계에 있으며 이제는이 URL에서 일부 코드를 다운로드했습니다. http://vitalets.github.io/x-editable/docs.html

내 코드는 여기

<!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> 

위의 코드 표시 완전히 네 개의 책 이름 (DB를이 네 개의 책 이름이 있기 때문에)입니다. 첫 번째 책 이름을 혼자서 편집 할 수 있었고 DB에서도 편집되었습니다. 나머지 책 이름은 편집 할 수 없습니다.

내가 불을 지르고와 검사

나는

  <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> 

내가, 내가 뭔가를 놓친 알고있는 아래 코드를 얻을.

는 누군가가 밖으로 나를 도울 수

감사합니다, Kimz

답변

5
당신은, 대신 ID의 편집 가능한 요소에 클래스를 사용하여 너무 좋아한다

:

<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> 

이 JS 의미합니다 다음과 같아야합니다.

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

와우. 지금 아주 잘 일하고있어. 공유해 주셔서 감사합니다. – user3350885

+1

대단히 환영합니다. :) ID가있는 페이지에는 하나의 ** 요소 만있을 수 있습니다. 둘 이상이면 클래스를 사용해야합니다. – jhmckimm

+0

우수! 좋은 답변 주셔서 감사합니다 ... – Highlan