2012-10-19 107 views
1

我使用jQuery對<LI></LI>標籤之間的項目列表進行排序,然後使用Ajax帖子來驗證順序並使用返回的內容「更新」頁面。jQuery在Ajax帖子後不起作用

$.ajax({url: "./test.php?id=<?php echo $id; ?>&action=modify", 
    contenttype: "application/x-www-form-urlencoded;charset=utf-8", 
    data: {myJson: data}, 
    type: 'post', 
    success: function(data) { 
     $('html').html(data); 
     OnloadFunction(); 
     } 
    }); 

然後,我失去了對列表進行排序的能力(我不確定是否清楚...)。我試圖$(document).ready的內容移動OnloadFunction()內,並與<script>OnloadFunction();</script>調用它裏面涉及修改塊做:

$action= $_GET['action']; 
if ($action == "modify") { 
// Code here 
} 

,但它不工作...

我可以不知道該怎麼做。誰能幫忙?

我剝離出來的代碼的主要部分只保留必要的:你的代碼(文件名test.php的)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
    <script type="text/javascript" src="jquery-1.8.2.min.js"></script> 
    <script type="text/javascript" src="jquery-ui-1.9.0.custom.min.js"></script> 
    <script> 
    $(document).ready(function(){ 
     //alert("I am ready"); 
     OnloadFunction(); 
     }); 

    function OnloadFunction() { 
      $(function() { 
      $("#SortColumn ul").sortable({ 
       opacity: 0.6, cursor: 'move', 
       update: function() {}         
       }); 
      }); 
      //alert('OnloadFunction ends'); 
     } 

    function valider(){ 
     var SortedId = new Array(); 
     SortIdNb = 0; 
     $('#SortColumn ul li').each(function() { 
      SortedId.push(this.id); 
     }); 
      var data = { 
      /* Real code contains an array with the <li> id */ 
      CheckedId: "CheckedId", 
      SortedId: SortedId, 
      }; 
     data = JSON.stringify(data); 
     $.ajax({url: "./test.php?id=<?php echo $id; ?>&action=modify", 
      contenttype: "application/x-www-form-urlencoded;charset=utf-8", 
      data: {myJson: data}, 
      type: 'post', 
      success: function(data) { 
       //alert(data); 
       $('html').html(data); 
       OnloadFunction(); 
       } 
      }); 
     } 
    </script> 
</head> 
<body> 
<? 

$action= $_GET['action']; 
$id = $_GET['id']; 
if ($id == 0) {$id=1;} 
$id += 1; 
if ($action == "modify") { 
    echo "action: modify<br>"; 
    echo "id (àvèc aççént$): ".$id."<br>"; // "(àvèc aççént$)" to check characters because character set is incorrect after the ajax post 
    $data = json_decode($_POST['myJson'], true); 
    // PHP code here to treat the new list send via the post and update the database 
    print_r($data); 
    } 
?> 
<!-- PHP code here to get the following list from the database --> 
<div id="SortColumn"> 
    <ul> 
     <li id="recordsArray_1">recordsArray_1</li> 
     <li id="recordsArray_2">recordsArray_2</li> 
     <li id="recordsArray_3">recordsArray_3</li> 
     <li id="recordsArray_4">recordsArray_4</li> 
     <li id="recordsArray_5">recordsArray_5</li> 
    </ul> 
</div> 
<input type="button" value="Modifier" onclick="valider();"> 

</body> 
</html> 
+1

你爲什麼要更換全''元素?這當然會擺脫你的完整的Javascript代碼...你應該重新考慮你的語義 – devnull69

+1

只是一個想法,但是你在ajax url中第一次被調用之後聲明$ id。你也應該只重新加載列表,而不是整個HTML頁面。我不太清楚究竟是什麼問題? –

+0

一個好的提示是檢查您的JavaScript控制檯,大多數瀏覽器有JavaScript錯誤(http://webmasters.stackexchange.com/questions/8525/how-to-open-the-javascript-console-in-different-瀏覽器/ 8555) – rednaw

回答

1

改變這一

$(document).ready(function(){ 
    //alert("I am ready"); 
    OnloadFunction(); 
    }); 

function OnloadFunction() { 

     $("#SortColumn ul").sortable({ 
      opacity: 0.6, cursor: 'move', 
      update: function() {}         
      }); 

     //alert('OnloadFunction ends'); 
    } 
+0

我有一個錯誤:TypeError:d是null @ http://鉀:81/intranet/jquery-1.8.2.min.js:3 – user1758979