我正在使用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。
提前感谢一百万。
此致 塔斯