Question

我有一个See more按钮，点击后我希望能够将另外3个过去事件加载到页面加载时显示的默认3个过去事件上，然后再次点击，再添加3个等等。 / p>

下面的代码有效，但由于某种原因将数字乘以，例如，如果我现在代码按“查看更多”按钮，当它只返回6 past events时，它会返回18 past events ...

如果我dd($amountOfCurrentPastEvents + 3)我得到int(6) 3次，6 x 3 = 18.例如：

问题是为什么它会被调用三次？我在这里做错了什么？

DashboardPage.php

class DashboardPage_Controller extends Page_Controller {

    private static $allowed_actions = array(
        'pastEvent',
        'seeMorePastEvents',
        'pasteventfilter',
        'LimitedPastEvents'
    );

    public function LimitedPastEvents()
    {
        return PastEvent::get()->limit(3);
    }

    public function seeMorePastEvents() {
        if (Director::is_ajax()) {
            // Gets the amount of past events that are display on the page at present
            $amountOfCurrentPastEvents = $_POST['events'];
            // Adds 3 onto how ever many past events are currently showing
            $PastEvents = PastEvent::get()->limit($amountOfCurrentPastEvents + 3);
            return $this->customise(array(
                'Results' => $PastEvents
            ))->renderWith('AjaxPastEvents');

        }
    }

    ...

}

DashboardPage.ss

<% loop LimitedPastEvents %>
    <div class="past-event-results">
        <div class="col-md-4 no-padding past-event">
            <a href="$Link">
                <div class="live-workouts-wrapper">
                    <div class="on-demand-image" style="background-image: url($ThemeDir/images/vid-3.jpg);">
                        <div class="play-icon"></div>
                    </div>
                    <div class="on-demand-info text-center">
                        <div class="on-demand-location">
                            <span class="pin-icon"></span><span>$BranchLocation.Name, $BranchLocation.City</span>
                        </div>
                        <div class="on-demand-date-time">
                            <span class="time-icon"></span>
                            <span>{$EventDate.Day} {$EventDate.ShortMonth} {$EventDate.Format(dS)} $Time.Nice</span>
                        </div>
                        <div>
                            <strong>$EventName</strong>
                        </div>
                    </div>
                </div>
            </a>
        </div>
    </div>
<% end_loop %>

<div class="col-md-12">
    <div class="text-center">
        <button class="btn btn-seemore">SEE MORE<b class="btn-icon btn-down"></b></button>
    </div>
</div>

jQuery - 位于DashboardPage.ss

<script>
$(document).ready(function() {
    var pastEventCount;
    $('.btn-seemore').on('click', function(event) {
        event.preventDefault();
        // Gets the amount of past events that are currently displayed on the page
        pastEventCount = $('.past-event').length;
        console.log(pastEventCount);
        $.post('/dashboard/seeMorePastEvents', {events: pastEventCount}, function(data) {
            $('.past-event-results').html(data);
        });
    });
});
</script>

Answer 1

问题是代码会将新内容添加到.past-event-results $('.past-event-results').html(data);，但该模板有3 .past-event-results个div开头。

ajax函数返回的数据（6个PastEvent条目）被添加到3个div中，结果显示18个项目。

以下循环创建3个past-event-results div开头：

<% loop LimitedPastEvents %>
    <div class="past-event-results">
    ...
    </div>
<% end_loop %>

你可能想把这个div放在循环之外：

<div class="past-event-results">
<% loop LimitedPastEvents %>
    ...
<% end_loop %>
</div>

这意味着只有一个past-event-results div。

我还建议将seeMorePastEvents()功能更改为仅返回新项目，而不是每次都返回所有现有项目和新项目。这将节省需要传回的数据，并略微改善服务器提取。

要进行此更改，我们首先需要将限制功能更改为仅提取3个项目并从$amountOfCurrentPastEvents点开始提取。

$PastEvents = PastEvent::get()->limit(3, $amountOfCurrentPastEvents);

DataList limit()功能可以2 parameters：

limit(integer $limit, integer $offset = 0)

我们使用offset来改变获取起始点。

然后，我们更改JavaScript以附加检索到的数据，而不是覆盖现有事件：

$('.past-event-results').append(data);

Answer 2

乍一看，它看起来像是一个JS问题。

您可能发送了x3个AJAX请求 - 如果您突破浏览器的调试器，那么有多少XHR请求被发送到SilverStripe？

同时检查生成的标记。我怀疑你的JS逻辑应该附加到.past-event-results DOM节点本身，而不是附加到它的内容，这实际上是jQuery html方法为你做的。

每次单击按钮时，使用ajax从DataObject加载一定数量的项目？

2 个答案: