Retrieving and appending HTML using PHP and Ajax

Question

Hi there I am trying to append HTML to a list to create an infinite scroll effect, please do not reply by telling me to use a plugin.

I know from the inspector that onClick() is generating the HTML correctly via the PHP script it calls however the HTML generated is not being appended to the rest of the document.

Here's my code (JQuery has been imported):

HTML:

    <body>
        <div id='container'>
            <?php include 'inc/header.php'; ?> 
            <?php include 'inc/nav.php'; ?>

            <section class="grid-wrap">
                <ul class="grid swipe-right custom-grid" id="grid">
                    <?php
                        $files = glob('img/gallery/*.{jpg,png,gif,JPG}', GLOB_BRACE);

                        $total = 9; //count($files);

                        for ($i = 0; $i < $total; ++$i) {
                            echo "<li><a href='" . $files[$i] . "' target='_blank'><img class='lazy' src='" . $files[$i] . "' alt= 'Image of Sheila' /><h3>View Full Image</h3></a></li>";
                        }
                    ?>
                </ul>   

              <div id='load-more'>VIEW MORE PHOTOS</div>
            </section>


            <?php include 'inc/footer.php'; ?>

        </div>

        <script>
            $('#load-more').click(function(){
                $.ajax({
                    url: 'inc/gallery/gallery2.php',
                    dataType: 'html',
                    sucess: function(php){$('.grid-wrap').append(php);}
                });
            });
        </script>
    </body>

gallery2.php :

        <?php
            $files = glob('../../img/gallery/*.{jpg,png,gif,JPG}', GLOB_BRACE);
            $total = 9;
            $id = 1;

            echo '<ul class="grid swipe-right custom-grid" id="grid' . $id . '">';

            for ($i = $total; $i < ($total + 9); ++$i) {
                echo "<li>
                        <a href='" . $files[$i] . "' target='_blank'>
                            <img src='" . $files[$i] . "' alt= 'Image of Sheila' />
                            <h3>View Full Image</h3>
                        </a>
                      </li>";
            }

            $total+= 9;
            echo '</ul>';
        ?>

I think you mis-typed 'success' as 'sucess' for your ajax callback. — Ranald Lam
– Ranald Lam, Commented Sep 2, 2014 at 10:02

Ranald Lam · Accepted Answer · 2014-09-02 10:11:35Z

3

Just a repost of my comment :x.

I think you mis-typed 'success' as 'sucess' for your ajax callback.

answered Sep 2, 2014 at 10:11

Ranald Lam

4864 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Faiz Ahmed · Accepted Answer · 2014-09-02 10:07:39Z

1

As Renald Lam said, you mis-typed success as sucess:
change this:

sucess: function(php){$('.grid-wrap').append(php);

to:

success: function(php){$('.grid-wrap').append(php);

answered Sep 2, 2014 at 10:07

Faiz Ahmed

1,1031 gold badge8 silver badges16 bronze badges

Comments

kefy · Accepted Answer · 2014-09-02 10:08:59Z

1

U missing s in success function and try

$('#load-more').click(function(){
    $.ajax({
        url: 'inc/gallery/gallery2.php',
        dataType : 'html',
        success: function(php){
           $('.grid-wrap ul').append(php);
        }
    });
});

answered Sep 2, 2014 at 10:08

kefy

5352 silver badges10 bronze badges

1 Comment

UUake Up Over a year ago

HERP DE DERP DERP. It always something like that. All working as expected now, cheers!

Collectives™ on Stack Overflow

Retrieving and appending HTML using PHP and Ajax

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related