Question

我想编辑我的数据库表而不刷新页面并编辑所有列。由于某些原因，我的脚本似乎无法正常工作。弹出工作，从数据库工作中选择，但是当我按下提交时没有任何反应，我认为它不会去edit.php页面。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html>  
<head>  
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script>  
 <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js'></script>  
 <link rel='stylesheet' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css' />  
 <script type='text/javascript'>  
  $(document).ready(function() {  
   //Create dialog  
   $edit_dialog = $("#edit_dialog").dialog({  
    autoOpen:false,   
    title:"Edit Book",   
    modal:true,   
    buttons:[  
     {text: "Submit", click: function() { $('form',$(this)).submit(); }},  
     {text: "Cancel", click: function() { $(this).dialog("close"); }},  
    ]  
   });  

   //Submit action for dialog form  
   $("#edit_dialog form").submit(function() {  
    var form = $(this);  
    //post form data to form's action attribute  
    $.post($(this).attr('action'), $(this).serialize(),function(data) {     
     //get DOM element of updated book  
     var book = $('#book_'+data.id);  

     //update title  
     $('.title',book).html(data.title);  

     //update genre  
     $('.genre',book).html(data.genre);  

     //update description  
     $('.description',book).html(data.description);  

     //close the dialog  
     $("#edit_dialog").dialog('close');  
    },'json');  

    //stop default form submit action  
    return false;  
   });  

   //when the edit link is clicked  
   function edit_link_action() {  
    //get closest book div  
    var book = $(this).closest('.book');  

    //get id from div  
    var id = book.attr('id').split('_');  
    idid = id[id.length-1];  

    //set id in form  
    $('#edit_dialog input[name="id"]').val(id);  

    //set current title in form  
    $('#edit_dialog input[name="title"]').val($('.title',book).html());  

    //set current genre in form  
    $('#edit_dialog select[name="genre"]').val($('.genre',book).html());  

    //set current description in form  
    $('#edit_dialog textarea[name="description"]').val($('.description',book).html());  

    //open dialog  
    $edit_dialog.dialog('open');  

    //stop default link action  
    return false;  
   }  

   //attach action to edit links  
   $(".edit").click(edit_link_action);  
  });  
 </script>  
</head>  
<body>  
 <div class='books'>  
  <?php  
  //connect to database  
  mysql_connect('localhost', 'mysql_user', 'mysql_password');  
  mysql_select_db('dbname');  

  //get all books  
  $query = "SELECT * FROM books";  
  $result = mysql_query($query) or die("Error selecting books");  

  //display books  
  while($row = mysql_fetch_assoc($result)) {  
  ?>  
   <div class='book' id='book_<?php echo $row['id']; ?>'>  
    <a class='edit' href='#'>edit</a>  
    <h3 class='title'><?php echo $row['title']; ?></h3>  
    <p><em class='genre'><?php echo $row['genre']; ?></em></p>  
    <p class='description'><?php echo $row['description']; ?></p>  
   </div>  
  <?php  
  }  
  ?>  
 </div>  

 <div id='edit_dialog'>  
  <form action='edit.php' method='post'>  
   <input type='hidden' name='id' />  

   Title:   
   <input type='text' name='title' /><br />  

   Genre:  
   <select name='genre'>  
    <option value='fantasy'>Fantasy</option>  
    <option value='mystery'>Mystery</option>  
    <option value='nonfiction'>Nonfiction</option>  
   </select><br />  

   Description:  
   <textarea name='description' cols='30' rows='3'></textarea>    
  </form>  
 </div>  
</body>  
</html>

Answer 1

你可能想尝试以下方法来找出它出错的地方：

$.ajax({
  error: function() { 
      //alert any errors here 
  }
});

此外，我不太确定返回虚假部分以阻止您的表单正常发布，我认为e.preventDefault（）是最佳实践。（纠正我，如果我错了，我不是javascript大师！）

php / ajax弹出编辑没有页面刷新

1 个答案: