Jquery sortable-ui裏面的對話框用戶界面，通過ajax加載頁面

Question

我有一個用CakePHP v1.3編寫的用戶管理系統，我想對用戶進行排序。 所以我使用jquery dialog-ui（假設類似於Facebook好友列表），並通過添加最新用戶的ajax頁面加載。

在這個列表中，我希望能夠使用jquery sortable-ui但出於某種原因，我不能。 我猜javascript沒有加載？ 如果發生這種情況，我無法在螢火蟲中看到，所以如果有人知道可以做些什麼，請幫助我。

繼承人的代碼： 這會觸發對話框：

<div onClick="manageCoauthors(data={'id':'<?php echo $this->params['pass'][0]; ?>'});" class="floatRight allImg leftManageFDs" style="cursor: pointer"></div> 

那麼這就是打開的對話框中的javascript：

$('#dialog-manage-coauthors').load(fdBaseUrl + 'publications/ajaxManageCoauthors/' + paperID).dialog({ 
     resizable: false, 
     modal: true, 
     width:500, 
     height:400, 
     buttons:{ 
      "OK": function(){ 
       $(this).dialog('close'); 
      } 
     } 
    }); 

和頁面的加載與阿賈克斯將填充內容dialog-ui容器

<style> 
#sortable { list-style-type: none; margin: 0; padding: 0; cursor: move } 
#sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 50px; height: 50px; font-size: 4em; text-align: center; } 
</style> 

<script type="text/javascript"> 
$(document).ready(function(){ 
    //initialize sortable 
    $("#sortable").sortable({ 
     /*update: function(){ 
      var order = $('#sortable').sortable('serialize'); 
      $.ajax({ 
       url: fdBaseUrl + 'cv/orderParahraphs', 
       data: order, 
       dataType: 'json' 
      }) 
     }*/ 
    }); 
    $("#sortable").disableSelection(); 
}); 



</script> 
<?php 
    if(isset($publicationColaborators) && !empty($publicationColaborators)){ 
     ?> 
     <ul id="sortable" class="ui-sortable"> 
     <?php 
     foreach($publicationColaborators as $colaboratorDetail){ 

      //debug($colaboratorDetail); 
      $profile_image = 'users/profile/' . 
           md5((isset($colaboratorDetail['User']) ? $colaboratorDetail['User']['id'] : $colaboratorDetail['id'])) . DS . 
           (isset($colaboratorDetail['User']) ? $colaboratorDetail['User']['profile_photo'] : $colaboratorDetail['profile_photo']); 
      $options = array('gender'=>(isset($colaboratorDetail['User']) ? $colaboratorDetail['User']['gender'] : $colaboratorDetail['gender']), 
           'size' => '40', 
           'link'=>(isset($colaboratorDetail['User']) ? $colaboratorDetail['User']['slug'] : $colaboratorDetail['slug']), 
           'title'=>$this->Fellow->fullUserVisitCard((isset($colaboratorDetail['User']) ? $colaboratorDetail['User'] : $colaboratorDetail))); 
      ?> 
      <li class="ui-state-default"> 
       <div class="floatLeft" style="padding:10px;"> 

         <div onClick="removeColaborator(data={'id':'<?php echo (isset($colaboratorDetail['User']) ? $colaboratorDetail['User']['id'] : $colaboratorDetail['id']); ?>', 'paperID':'<?php echo $paperID; ?>'})" style="position: absolute; margin-left:27px" class="allImg wall_post_actions_delete_active"></div> 
         <?php 
         echo $this->Fellow->checkImage($profile_image, $options); 
         ?> 

       </div> 
      </li> 
      <?php 
     } 
     ?> 
     </ul> 
     <?php 
    } 
    else{ 
     echo __d('publications', 'You have no co-authors yet', true); 
    } 
?> 
<div class="clearDiv"></div> 

Answer 1

我覺得這裏的問題是因爲document.ready調用不會在AJAX的內容上重新觸發，所以您的排序永遠不會被調用。

您需要做的是在load函數的下一個參數中添加可排序的函數，該函數是在load()本身完成時觸發的回調函數。

$('#dialog-manage-coauthors').load(fdBaseUrl + 'publications/ajaxManageCoauthors/' + paperID, function() { 
    //initialize sortable 
    $("#sortable").sortable({ 
     /*update: function(){ 
      var order = $('#sortable').sortable('serialize'); 
      $.ajax({ 
       url: fdBaseUrl + 'cv/orderParahraphs', 
       data: order, 
       dataType: 'json' 
      }) 
     }*/ 
    }); 
    $("#sortable").disableSelection(); 
}).dialog({ 
     resizable: false, 
     modal: true, 
     width:500, 
     height:400, 
     buttons:{ 
      "OK": function(){ 
       $(this).dialog('close'); 
      } 
     } 
    }); 

這顯然會進入父頁面。