php / ajax彈出窗口編輯，無需刷新頁面

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 個解決方案

解決方案1
0 2014-02-06 12:21:22

php / ajax彈出窗口編輯，無需刷新頁面

問題描述

1 個解決方案

解決方案1 0 2014-02-06 12:21:22

解決方案1
0 2014-02-06 12:21:22