CakePHP 3 заменяет содержимое в div на данные, возвращаемые из ajax - PullRequest
Новая
       4

CakePHP 3 заменяет содержимое в div на данные, возвращаемые из ajax

0 голосов
/ 25 августа 2018

Моя конечная цель - загрузить больше элементов из базы данных, когда страница приблизится к нижней части страницы.Я создал страницу, которая загружает 6 диаграмм из базы данных, чтобы начать.Я написал этот jQuery JavaScript 

<script>
(function(){
    $(window).scroll(function () {
       if ($(window).scrollTop() >= $(document).height() - $(window).height() - 0) {
          loadmore();
       }
    });
    divID = $('.chartArea>div:last-child').find('div').attr('id');
    divID = divID.substr(6);
    divID = divID-6;
    function loadmore() {
         $.ajax({`
         `url: "<?php echo $this->Url->build(['action'=>'chartsTest']);?>",
            type: "POST",
            dataType: 'text',
            data:  {'id': divID },
            success: function(data){
                 console.log(data);
                $('.chartArea').html(data);
            }
        });
    };
})();
</script>

Это все работает, кроме $('.chartArea').html(data);, который возвращает весь HTML-документ <!DOCTYPE html> и вставляет его в div chartArea

Эта часть страницызависит от первого вызова базы данных и JavaScript

HTML 

<div class="lay2col chartArea">
<?php foreach($items as $chart) { 
    $card = new \App\Model\Entity\Card();
    $card->content_type = (object)[ 'name' => 'chart' ];
    $card->content_id = $chart->slug;
    $card->chart = $chart;
?>
    <div>
        <div id="chart-<?=$chart->id?>" class="card-chart card-half card content" title="<?=$card->override('title') ?: $card->chart->title?>">
            <?=$this->element('cards/chart', ['card' => $card])?>
        </div>
    </div>
<?php } ?>

Вот что у меня в контроллере 

public function chartsTest() {
    $this->loadModel('Charts');
    if($this->request->is('ajax')) { 
        $chartID = $this->request->data['id'];
        $items = $this->Charts->find('all')->where(['Charts.active'=>true, 'Charts.id >=' => $chartID]);
        $items->order(['Charts.id' => 'desc']);

        $this->autoFilter($items);
        $moreCharts='';
        foreach($items as $chart) { 
            $card = new \App\Model\Entity\Card();
            $card->content_type = (object)[ 'name' => 'chart' ];
            $card->content_id = $chart->slug;
            $card->chart = $chart;
            $moreCharts. = '<div>
                <div id="chart-'.$chart->id.'" class="card-chart card-half card content" title="'.$card->chart->title.'">
                    <a href="/the-palce/charts-and-graphs/'.$card->chart->slug.'">
                        <img class="twox" src="'.$card->image_path.'" alt="'.$card->altTag.'">
                        </div>
                        <div class="graphic-pill">
                            <span class="pill">Chart</span>
                        </div>
                        <div class="btm-info">
                            <p class="summary">'.$card->chart->title.'</p>
                        </div>
                    </a>

                </div>
            </div>';
        };
        $this->set([
            'success' => true,
            'data' => $moreCharts
        ]);
    }  else {
        $items = $this->Charts->find('all')->where(['Charts.active'=>true])->limit(6);
        $items->order(['Charts.id' => 'desc']);
        $this->set([
            'page_title' => 'Charts and Graphs',
            'page'       => 'charts and graphs',
            'items'      => $items
        ]);
    } 
}

Так что ядолжно быть что-то упущено, потому что мой $('.chartArea').html(data); в моей функции JavaScript возвращает целое <!DOCTYPE html>, когда я ожидаю только данные внутри переменной $moreCharts.Странная вещь, если проверить консоль, которую я вижу 

$dataForView = [
&#039;success&#039; =&gt; true,
&#039;data&#039; =&gt; &#039;
            &lt;div&gt;
                &lt;div id=&quot;chart-73&quot; class=&quot;card-chart card-half card content&quot; title=&quot;title&quot;&gt;
                    &lt;a href=&quot;/the-place/slug&quot;&gt;
                        &lt;img class=&quot;twox&quot; src=&quot;&quot; alt=&quot;&quot;&gt;
                        &lt;div class=&quot;graphic-pill&quot;&gt;
                            &lt;span class=&quot;pill&quot;&gt;Chart&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;div class=&quot;btm-info&quot;&gt;
                            &lt;p class=&quot;summary&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing.&lt;/p&gt;
                        &lt;/div&gt;
                    &lt;/a&gt;
                &lt;/div&gt;
            &lt;div&gt;
                &lt;div id=&quot;chart-72&quot; class=&quot;card-chart card-half card content&quot; title=&quot;title&quot;&gt;
                    &lt;a href=&quot;/the-place/slug&quot;&gt;
                        &lt;img class=&quot;twox&quot; src=&quot;&quot; alt=&quot;&quot;&gt;
                        &lt;div class=&quot;graphic-pill&quot;&gt;
                            &lt;span class=&quot;pill&quot;&gt;Chart&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;div class=&quot;btm-info&quot;&gt;
                            &lt;p class=&quot;summary&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing.&lt;/p&gt;
                        &lt;/div&gt;
                    &lt;/a&gt;
                &lt;/div&gt;
            &lt;div&gt;
                &lt;div id=&quot;chart-71&quot; class=&quot;card-chart card-half card content&quot; title=&quot;title&quot;&gt;
                    &lt;a href=&quot;/the-place/slug&quot;&gt;
                        &lt;img class=&quot;twox&quot; src=&quot;&quot; alt=&quot;&quot;&gt;
                        &lt;div class=&quot;graphic-pill&quot;&gt;
                            &lt;span class=&quot;pill&quot;&gt;Chart&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;div class=&quot;btm-info&quot;&gt;
                            &lt;p class=&quot;summary&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing.&lt;/p&gt;
                        &lt;/div&gt;
                    &lt;/a&gt;
            &lt;/div&gt;
            &lt;div&gt;
                &lt;div id=&quot;chart-70&quot; class=&quot;card-chart card-half card content&quot; title=&quot;title&quot;&gt;
                    &lt;a href=&quot;/the-place/slug&quot;&gt;
                        &lt;img class=&quot;twox&quot; src=&quot;&quot; alt=&quot;&quot;&gt;
                        &lt;div class=&quot;graphic-pill&quot;&gt;
                            &lt;span class=&quot;pill&quot;&gt;Chart&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;div class=&quot;btm-info&quot;&gt;
                            &lt;p class=&quot;summary&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing.&lt;/p&gt;
                        &lt;/div&gt;
                    &lt;/a&gt;
            &lt;/div&gt;
            &lt;div&gt;
                &lt;div id=&quot;chart-69&quot; class=&quot;card-chart card-half card content&quot; title=&quot;title&quot;&gt;
                    &lt;a href=&quot;/the-place/slug&quot;&gt;
                        &lt;img class=&quot;twox&quot; src=&quot;&quot; alt=&quot;&quot;&gt;
                        &lt;div class=&quot;graphic-pill&quot;&gt;
                            &lt;span class=&quot;pill&quot;&gt;Chart&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;div class=&quot;btm-info&quot;&gt;
                            &lt;p class=&quot;summary&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing.&lt;/p&gt;
                        &lt;/div&gt;
                    &lt;/a&gt;
            &lt;/div&gt;
            &lt;div&gt;
                &lt;div id=&quot;chart-68&quot; class=&quot;card-chart card-half card content&quot; title=&quot;title&quot;&gt;
                    &lt;a href=&quot;/the-place/slug&quot;&gt;
                        &lt;img class=&quot;twox&quot; src=&quot;&quot; alt=&quot;&quot;&gt;
                        &lt;div class=&quot;graphic-pill&quot;&gt;
                            &lt;span class=&quot;pill&quot;&gt;Chart&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;div class=&quot;btm-info&quot;&gt;
                            &lt;p class=&quot;summary&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing.&lt;/p&gt;
                        &lt;/div&gt;
                    &lt;/a&gt;
            &lt;/div&gt;
            &lt;div&gt;
                &lt;div id=&quot;chart-67&quot; class=&quot;card-chart card-half card content&quot; title=&quot;title&quot;&gt;
                    &lt;a href=&quot;/the-place/slug&quot;&gt;
                        &lt;img class=&quot;twox&quot; src=&quot;&quot; alt=&quot;&quot;&gt;
                        &lt;div class=&quot;graphic-pill&quot;&gt;
                            &lt;span class=&quot;pill&quot;&gt;Chart&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;div class=&quot;btm-info&quot;&gt;
                            &lt;p class=&quot;summary&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing.&lt;/p&gt;
                        &lt;/div&gt;
                    &lt;/a&gt;
            &lt;/div&gt;
            &lt;div&gt;
                &lt;div id=&quot;chart-66&quot; class=&quot;card-chart card-half card content&quot; title=&quot;title&quot;&gt;
                    &lt;a href=&quot;/the-place/slug&quot;&gt;
                        &lt;img class=&quot;twox&quot; src=&quot;&quot; alt=&quot;&quot;&gt;
                        &lt;div class=&quot;graphic-pill&quot;&gt;
                            &lt;span class=&quot;pill&quot;&gt;Chart&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;div class=&quot;btm-info&quot;&gt;
                            &lt;p class=&quot;summary&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing.&lt;/p&gt;
                        &lt;/div&gt;
                    &lt;/a&gt;
            &lt;/div&gt;
            &lt;div&gt;
                &lt;div id=&quot;chart-65&quot; class=&quot;card-chart card-half card content&quot; title=&quot;title&quot;&gt;
                    &lt;a href=&quot;/the-place/slug&quot;&gt;
                        &lt;img class=&quot;twox&quot; src=&quot;&quot; alt=&quot;&quot;&gt;
                        &lt;div class=&quot;graphic-pill&quot;&gt;
                            &lt;span class=&quot;pill&quot;&gt;Chart&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;div class=&quot;btm-info&quot;&gt;
                            &lt;p class=&quot;summary&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing.&lt;/p&gt;
                        &lt;/div&gt;
                    &lt;/a&gt;
            &lt;/div&gt;
            &lt;div&gt;
                &lt;div id=&quot;chart-664quot; class=&quot;card-chart card-half card content&quot; title=&quot;title&quot;&gt;
                    &lt;a href=&quot;/the-place/slug&quot;&gt;
                        &lt;img class=&quot;twox&quot; src=&quot;&quot; alt=&quot;&quot;&gt;
                        &lt;div class=&quot;graphic-pill&quot;&gt;
                            &lt;span class=&quot;pill&quot;&gt;Chart&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;div class=&quot;btm-info&quot;&gt;
                            &lt;p class=&quot;summary&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing.&lt;/p&gt;
                        &lt;/div&gt;
                    &lt;/a&gt;
            &lt;/div&gt;
            &lt;div&gt;
                &lt;div id=&quot;chart-63&quot; class=&quot;card-chart card-half card content&quot; title=&quot;title&quot;&gt;
                    &lt;a href=&quot;/the-place/slug&quot;&gt;
                        &lt;img class=&quot;twox&quot; src=&quot;&quot; alt=&quot;&quot;&gt;
                        &lt;div class=&quot;graphic-pill&quot;&gt;
                            &lt;span class=&quot;pill&quot;&gt;Chart&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;div class=&quot;btm-info&quot;&gt;
                            &lt;p class=&quot;summary&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing.&lt;/p&gt;
                        &lt;/div&gt;
                    &lt;/a&gt;
            &lt;/div&gt;
            &lt;div&gt;
                &lt;div id=&quot;chart-62&quot; class=&quot;card-chart card-half card content&quot; title=&quot;title&quot;&gt;
                    &lt;a href=&quot;/the-place/slug&quot;&gt;
                        &lt;img class=&quot;twox&quot; src=&quot;&quot; alt=&quot;&quot;&gt;
                        &lt;div class=&quot;graphic-pill&quot;&gt;
                            &lt;span class=&quot;pill&quot;&gt;Chart&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;div class=&quot;btm-info&quot;&gt;
                            &lt;p class=&quot;summary&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing.&lt;/p&gt;
                        &lt;/div&gt;
                    &lt;/a&gt;
            &lt;/div&gt;

Таким образом, я могу видеть из консоли, что она захватывает следующие 6 диаграмм, но мне нужно знать, чтобы изолировать их, добавить, добавить / заменить те, что вdiv chartArea.

...