Bir düğmeye tıklandığında her DataObject öğesinden belirli sayıda öğe yüklemek için ajax kullanma?

Question

Başka 3 vb

kod eklemek tekrar tıklandığında ise o zaman sayfa yüklemesinde göstermek varsayılan 3 geçmiş olaylar üzerine başka 3 Geçmiş Olaylar yüklemek mümkün istiyorum tıklandığını ve bir See more düğmesi vardır

ben int(6) olsun dd($amountOfCurrentPastEvents + 3) olursa ... işlerin altına ama sadece 6 past events dönmelidir, kodun şimdi olduğu gibi renkli "daha bakın", bu 18 past events döndürür basarsanız nedense örneğin numarasını çarpımı olduğunu 3 kez döndürüldü, 6 x 3 = 18. örneğin:

Soru neden üç kere çağrılıyor? Burada neyi yanlış yapıyorum?

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 bulunan

<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

Sorun, kodun yeni içeriği 'a $('.past-event-results').html(data); ile eklemesidir, ancak şablonun başlaması için 3 .past-event-results dize sahiptir.

ajax işlevi (6 PastEvent girişi) tarafından döndürülen veriler, sonuçların 18 öğe göstermesi için 3 div'e eklenir. sadece hiç bir past-event-results var

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

Bu anlamına gelecektir:

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

Bu döngünün dışında div almak isteyebilirsiniz:

aşağıdaki döngü ile başlayacak 3 past-event-results div'leri yaratır div.

seeMorePastEvents() işlevini, yeni öğeleri yalnızca yeni öğelerle değil her zaman yeni öğelerle birlikte döndürmek için değiştirmenizi öneririz. Bu, geri iletilmesi gereken ve sunucu getirisini biraz iyileştirecek verilerden tasarruf edecektir.

Bu değişikliği yapmak için öncelikle 3 öğeyi getirmek ve $amountOfCurrentPastEvents noktasında getirme işlemini başlatmak için sınır işlevini değiştirmeniz gerekir.

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

DataListlimit() işlevi 2 parameters alabilir: Biz başlatmak getirme noktasını değiştirmek için ofset kullanın

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

.

Sonra varolan olayları alınan verileri eklemek yerine üzerine yazmak JavaScript'imizi değiştirin:

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

Answer 2

bir JS konuya benziyor İlk bakışta.

Gönderilen x3 AJAX istekleri olabilir - tarayıcınızın hata ayıklayıcısını koparırsanız, SilverStripe'e kaç XHR isteği gönderilir? Ayrıca, oluşturulan işaretlemeyi de kontrol edin. JS mantığınızın .past-event-results DOM düğümünün kendisine eklenip eklenmeyeceğinden ve jQuery html yönteminin sizin için ne işe yaradığına bağlı olarak eklenmediğinden şüpheleniyorum.