Question

我正在使用CakePHP作为一个应用程序，我正在尝试添加一些Ajax功能来更新页面内容。

JavaScript库：Prototype，Scriptaculous，jQuery，jEditable

默认情况下：加载5行并选择在页面上再加载10行

可编辑选项：点击字段将使用jEditable允许用户编辑字段并保存。

当前情况：当页面第一次加载时，所有功能都有效，但是当我再加载10行时，JavaScript函数就会停止工作。

这是索引视图文件，它调用包含具有JavaScript函数的所有条目的元素：

<div id="latestResults" class="wrap">
     <?php 
        echo $this->element('current_entries', array('entries' => $entries));
    ?>        
     </div>
<script type="text/javascript">
var clientsInput= <?php echo json_encode($clients); ?>;
 $j('.client').editable("<?php echo $this->Html->url(array('controller'=>'entries', 'action'=>'editEntryClient')); ?>/", { 
     data   : clientsInput,
     name   : 'data[Entry][client_id]',
     type   : 'select',
     onblur : 'submit'
 });

 //Inline editor for projects

 var projectsInput= <?php echo json_encode($projects); ?>;
 $j('.project').editable("<?php echo $this->Html->url(array('controller'=>'entries', 'action'=>'editEntryProject')); ?>/", { 
     data   : projectsInput,
     name   : 'data[Entry][project_id]',
     type   : 'select',
     onblur : 'submit'
 });

 //Inline editor for tasks

 var tasksInput= <?php echo json_encode($tasks); ?>;
 $j('.task').editable("<?php echo $this->Html->url(array('controller'=>'entries', 'action'=>'editEntryTask')); ?>/", { 
     data   : tasksInput,
     name   : 'data[Entry][task_id]',
     type   : 'select',
     onblur : 'submit'
 });

 //Inline editor for hours spent

 $j('.hours_spent').editable("<?php echo $this->Html->url(array('controller'=>'entries', 'action'=>'editEntryHoursSpent')); ?>/", { 
     name   : 'data[Entry][hours_spent]',
     onblur : 'submit'
 });

//Inline editor for notes

 $j('.notesCol').editable("<?php echo $this->Html->url(array('controller'=>'entries', 'action'=>'editEntryDescription')); ?>/", { 
     name   : 'data[Entry][description]',
     onblur : 'submit'
 });

 //Load more

 $j('#load_more').click(function(){

    //Get last id
    var currentNumberOfRows = $j('.row').length;
    var newNumberOfRowsToDisplay =currentNumberOfRows + 10;
    var urlToGet = "<?php echo $this->Html->url(array('controller'=> 'entries', 'action'=>'displayCurrentEntries')); ?>/" + newNumberOfRowsToDisplay; 
    $j.get(urlToGet, function(data){
            $j('#latestResults').html(data);

        }); 

});

<?php echo $this->Html->script('inpage', array('inline'=>true)); ?>

current_entries.ctp

<?php
                $i = 0;
                foreach ($entries as $entry):
                    $class = null;
                    if ($i++ % 2 == 0) {
                        $class = ' class="altrow"';
                    }
                    $div_id = null;
                    $div_id = "id='entry_".$entry['Entry']['id']."'";
                    $row_id = "id='row_".$entry['Entry']['id']."'";
                ?>
            <!-- ROW 1 -->
                <div class="row">

                        <!-- clients -->
                        <div class="clientCol">
                            <div class='client result' id='client_<?php echo $entry['Entry']['id']; ?>'><?php echo $entry['Client']['name']; ?></div>
                        </div>

                        <!-- projects -->
                        <div class="projectCol">
                             <div class='project result' id='project_<?php echo $entry['Entry']['id']; ?>'><?php echo $entry['Project']['name']; ?> </div>
                        </div>

                        <!-- tasks -->
                        <div class="taskCol">
                             <div class='task result' id='task_<?php echo $entry['Entry']['id']; ?>'><?php echo $entry['Task']['name']; ?> </div>
                        </div>

                        <!-- hours -->
                        <div class="hoursCol">
                             <div class='hours_spent result' id='hours_spent_<?php echo $entry['Entry']['id']; ?>'><?php echo $entry['Entry']['hours_spent']; ?> </div>
                        </div>


                        <!-- Date -->
                        <div class="dateCol">
                             <?php echo $entry['Entry']['date_of_task']; ?>
                        </div>

                        <!-- notes -->
                        <div class="notesCol" id='description_<?php echo $entry['Entry']['id']; ?>'>
                                 <?php echo $entry['Entry']['description']; ?>
                        </div>

                        <!-- submit -->
                        <div class="submitCol">
                            <div class="options">
                                <a class="duplicate" href=""></a>
                                <?php echo $ajax->link('', array('controller'=>'entries', 'action' => 'delete', $entry['Entry']['id']), array('class'=>'remove', 'update'=>'latestResults'), 'Are you sure you want to delete this?'); ?>

                            </div>
                        </div>


                        <div class="clear"> </div>

                </div>
            <?php endforeach; ?>
            <!-- //ROW 1 -->            

            <!-- Load Row -->
                <div class="row load">

                        <a href="#" id="load_more">Load 10 more rows</a>
                </div>
            <!-- // Load Row -->

当页面加载时，所有$ j（'div.class'）。editable（''）函数都有效。但是无论何时加载更多行，所有这些功能都会停止工作。我可能会在这里遗漏一些非常简单的东西，但对此的任何帮助或指导都会很棒。请注意，loadmore仅通过Ajax调用更新页面中的#latestResults。

提前感谢一百万。

此致塔斯

通过Ajax加载的Div不再适用于JavaScript

0 个答案: