Jquery sortable-ui在一个dialog-ui中，它通过ajax加载一个页面

I have a user management system written in CakePHp v1.3 where I want to sort the users. So I am using jquery dialog-ui (let's say similar to facebook friends list) and loading this via a ajax page with latest users added.

我有一个用CakePHp v1.3编写的用户管理系统，我想对用户进行排序。所以我使用jquery dialog-ui（让我们说类似于facebook的朋友列表）并通过添加了最新用户的ajax页面加载。

In this list I want to be able to use jquery sortable-ui but for some reason I cannot. I guess the javascript is not loaded? I cannot see in firebug if this is happening or not so if anyone knows what can be done please help me.

在这个列表中，我希望能够使用jquery sortable-ui，但出于某种原因，我不能。我猜javascript没有加载？如果发生这种情况，我无法在萤火虫中看到，如果有人知道可以做什么，请帮助我。

Heres the code: This triggers the dialog:

继承代码：这会触发对话框：

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

Then this is the javascript for opening the dialog:

然后这是用于打开对话框的javascript：

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

And the content of the page loaded with ajax that will populate the dialog-ui container

并且用ajax加载的页面内容将填充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>

1 个解决方案

#1

I think the issue here is that the document.ready call won't re-trigger on the AJAX'd content, so your sortable never gets called.

我认为这里的问题是document.ready调用不会重新触发AJAX内容，所以你的sortable永远不会被调用。

What you need to do is add the sortable in the next parameter of the load function which is a callback that triggers when the load() itself has finished.

您需要做的是在load函数的下一个参数中添加sortable，这是一个在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');
            }
        }
    });

This will obviously go in the parent page.

这显然会在父页面中。

#1