CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
Palermo
Palermo

Reputation: 3

Ajax call to add more content to div

I have a div with a bunch of article blog posts, the number of blog posts in my div are determined by a php variable called quantity. I want to write an ajax call for when I scroll to the bottom of the page that the quantity updates and loads more blog posts. Below is my code so far and it updates the quantity of articles when I hit the bottom of the page but the posts don't appear on the page

var quantity = <?php echo $quantity; ?>
//Scroll to bottom of page 
 $(window).scroll(function () {
    if ($(document).height() <= $(window).scrollTop() + $(window).height()) {
        // ajax call should go here
        $.ajax({
            type: "GET",
            url: 'index.php',
            success: function(data) {
                quantity = quantity + 10;
                alert("end");
            }
        });
    }
});

The quantity variable is updating when reaching the bottom of the page but the blog posts are not loading in the html,this is my first time using ajax and not sure what I'm missing to update the div with more posts, when I change the set number of the quantity varible manually in the code more posts show up but not when its updated through my ajax?

UPDATE

here is the php file 

<?php 
$articleIndex = 0;
$bigImageCounter =  0;
$smallImageCounter = 0;
$quantity = 46;
$omitThis = 0;
$cat_id = $mpArticle->data['cat_id'];

$featuredArticle = $mpArticle->getFeaturedArticle( $cat_id );
if( $featuredArticle && $featuredArticle['article_status'] == 1){
    $articleIndex++;
    $quantity = 46;
    $omitThis =  $featuredArticle['article_id'];

    include_once($config['include_path'].'featured_article.php');

if(isset($has_sponsored) && $has_sponsored){ /*DO NOTHING*/ }
else{ ?>
    <!-- ShareT -->
    <div id="shareT-ad" style="margin-bottom: 0.5rem;" class="columns mobile-12 small-12 medium-12 large-12 xlarge-12 no-padding padding-bottom">
        <div data-str-native-key="6898172d" style="display: none;"></div>
        <script type="text/javascript" src="//native.sharethrough.com/assets/str-dfp.js"></script>
    </div>
    <hr class="padding-top">
    <?php }
}

$articlesList = $mpArticle->getArticlesList(['limit' => $quantity, 'omit' => $omitThis, 'withMobLogs'=> true ]);


/* Article List */
$totalArticles = count($articlesList );

foreach ($articlesList as $articles){

    $linkToArticle = $config['this_url'].$articles['cat_dir_name'].'/'.$articles["article_seo_title"];
    $linkToACategory = $config['this_url'].$articles['cat_dir_name'];
    $date = date("M d, Y", strtotime($articles['date_updated']));
    $linkToImage = 'http://cdn.puckermob.com/articlesites/puckermob/large/'.$articles['article_id'].'_tall.jpg';
    $linkToContributor = $config['this_url'].'contributors/'.$articles['contributor_seo_name'];
    $cat_name = $articles['cat_dir_name'];

    //IGNORE MOBLOG ARTICLES
    if( !isset($category_page) && $cat_name === "moblog" && $articles['article_featured_hp'] != 1) continue;

    if( $articleIndex % 7 == 0 ) { 
        $articleIndex++;
        $bigImageCounter++; 
        ?>
        <div class="columns mobile-12 small-12 medium-12 large-12 xlarge-12 no-padding" id="<?php echo 'article-'.$articleIndex;?>">
            <a class="mobile-5 small-5 medium-5 large-12 xlarge-12 " href="<?php echo $linkToArticle; ?>">
                <img src="<?php echo $linkToImage; ?>" alt='<?php echo $articles['article_title']?>'>
                <?php if(isset($_GET['show']) && $_GET['show'] == 'type'){
                        if($articles['page_list_id'] != 0) $type = 'MULTI'; else $type = 'SINGLE';
                    echo '<span style="position: absolute; top: 3.5rem; left: 5rem; font-size: 4rem;  color: #000; font-weight: bold; ">';
                    echo $type;
                    echo '</span>';
                    }?>
            </a>
            <div class="mobile-12 small-12 medium-12 large-12 xlarge-12 mobile-vertical-center padding-top">
                <p class="left uppercase" >
                    <!--<span class="span-category <?php //echo $articles['cat_dir_name']?>"><a href="<?php //echo $linkToACategory; ?>" ><?php //echo $articles['cat_name']?></a></span>-->
                    <span class="span-date"><?php echo $date; ?></span>
                </p>
                <p class="right uppercase">
                    <span class="span-author">By <a href="<?php echo $linkToContributor; ?>" ><?php echo $articles['contributor_name']; ?></a></span>
                </p>
                <a class="left clear-left" href="<?php echo $linkToArticle; ?>">
                    <h1 class="h1-large-article"><?php echo $articles['article_title']?></h1>
                </a>
            </div>
        </div>
        <?php if( $articleIndex < $totalArticles )?> <hr class="padding-top">

        <?php if($bigImageCounter == 1){?>
        <?php }?>

        <?php  } else{

            $clearLeft='no-padding-right'; 
            if( $smallImageCounter == 0 || $smallImageCounter % 2 == 0) $clearLeft = 'clear-left no-padding-left';
            $smallImageCounter++;
            $articleIndex++; 
        ?>
            <div class="articles columns mobile-12 small-12 medium-6 large-6 xlarge-6 <?php echo $clearLeft; ?> ggnoads" id="<?php echo 'article-'.$articleIndex;?>">
                <a class="mobile-5 small-5 medium-12 large-12 xlarge-12 " href="<?php echo $linkToArticle; ?>">
                    <img src="<?php echo $linkToImage; ?>" alt='<?php echo $articles['article_title']?>'>
                    <?php if(isset($_GET['show']) && $_GET['show'] == 'type'){
                        if($articles['page_list_id'] != 0) $type = 'MULTI'; else $type = 'SINGLE';
                    echo '<span style="position: absolute; top: 3.5rem; left: 5rem; font-size: 4rem;  color: #000; font-weight: bold; ">';
                    echo $type;
                    echo '</span>';
                    }?>
                </a>
                <div class="mobile-12 small-12 medium-12 large-12 xlarge-12 mobile-vertical-center padding-top">
                    <p class="uppercase small-7 left small-font">
                        <!--<span class="span-category <?php //echo $articles['cat_dir_name']?>"><a href="<?php //echo $linkToACategory; ?>" ><?php // echo $articles['cat_name']?></a></span>-->
                        <span class="span-date"><?php echo $date; ?></span>
                    </p>
                    <p class="right uppercase small-5 align-right small-font">
                        <span class="span-author">By <a href="<?php echo $linkToContributor; ?>" ><?php echo $articles['contributor_name']; ?></a></span>
                    </p>
                    <a class="left clear-left" href="<?php echo $linkToArticle; ?>">
                        <h1 class="h1-small-article"><?php echo $articles['article_title']?></h1>
                    </a>
                </div>
            </div>
            <?php 
            if( $smallImageCounter % 2 == 0  && $articleIndex < $totalArticles) echo '<hr class="padding-top">';
        } ?> 
    </div>

    <?php } ?>
    <style>
    .str-adunit.hosted-video.str-collapsed, .str-adunit.clickout.str-collapsed{border:none !important;}
    </style>

and my updated ajax call is now appending the articlesList again since thats what I'm calling, but not quite sure how to just load the the articles that have come before the ones in articlesList and load only 10 at a time, sorry but I am very new to php and ajax and trying to work in this codebase

<script>

var articles = <?php echo $articlesList; ?>
//Scroll to bottom of page 
 $(window).scroll(function () {
    if ($(document).height() <= $(window).scrollTop() + $(window).height()) {
        // ajax call should go here
        $.ajax({
            type: "GET",
            url: 'index.php',
            data: articles,
            success: function(data) {
                $("#puc-articles").append(articles);
            }
        });
    }
});
</script>

I hope this makes things more clear, Just need to append 10 articles at a time that are not already in artclesList.

Upvotes: 0

Views: 3500

Answers (3)

dialogik
dialogik

Reputation: 9552

You have three basic ways using jQuery to attach the result from the Ajax call to your page:

html()

Using $('#myId').html(data) modifies the content of the <div id="myID"> tag, so data is being placed between <div id="myID"> and </div>.

So, if your code is

<div id="myID">Hello World</div>

it will be this after using html():

<div id="myID">{data}</div>

append()

$('#myId').append(data) places data as last element within <div id="myID"> and </div>. So your #myId will be this after appending:

<div id="myID">Hello World{data}</div>

after()

$('#myId').after(data) has almost the same behaviour as append() with the difference, that data is placed outside of #myId:

<div id="myID">Hello World</div>{data}

Upvotes: 0

toro
toro

Reputation: 46

You need to append the blog posts coming back from the ajax call to the div.

$("#divID").append(data);

But it also depends on how the additional blog posts are being returned from ajax. Are they in an array? Is it just a bunch of html, etc?

Upvotes: 3

Hamid Parchami
Hamid Parchami

Reputation: 7689

Use this:

$("#yourDivId").html(data);

Your code is going to be like this:

var quantity = <?php echo $quantity; ?>
//Scroll to bottom of page 
 $(window).scroll(function () {
    if ($(document).height() <= $(window).scrollTop() + $(window).height()) {
        // ajax call should go here
        $.ajax({
            type: "GET",
            url: 'index.php',
            success: function(data) {
                quantity = quantity + 10;
                $("#yourDivId").html(data);
            }
        });
    }
});

data is what you return as a result in index.php

For more details check this out:

http://www.w3schools.com/jquery/ajax_ajax.asp

Upvotes: 0

Related Questions