Jump to content

ajax calls not working!


gar1606
 Share

Recommended Posts

ok so I am trying to create a infinte scroll feature for my project, basically I can load as many images as I want at first and then when the user scrolls to the bottom I make an ajax call to dynamically append the divs of content each time. I think I am failing to make the ajax connection, here is my code

jQuery:

<script>
    $( () =>

        {
           let $loading    = $( '#loading' );
           let win         = $( window );

           // Each time the user scrolls
           win.scroll( () =>
           {
               // End of the document reached?
               if ( $( document ).height() - win.height() === win.scrollTop() )
               {
                   $loading.show(); // show loading gif
                   
                   $.ajax( { // make ajax call, in this url I have made many different attempts
                       url         : "ajax.php",
                       type           : "POST",
                       success     : function()
                       {
                           let el = getNewDiv(); // My function to return the html (below)
                           $( '#infiniteDivs' ).append( el );
                           $loading.hide();
                       }
                   } );
               }
           });
        } );
    </script>

 

Ajax/PW php:

$startNumber = 3;
function getNewDivs () {
    
    $a = $homepage->images;
    $aSlice = $a->slice(3, 6);
    $out = '';
    $idN = 3;
    foreach($aSlice as $image) {
        $idname = 'runner'.$idN;
        $textName = 'text'.$idN;
        $out .= '';
        $out .= '<img class="lazy" id="'.$idname.'" src="'.$image->url.'">
             <p>"'.$homepage->$textName.'"</p>';
        $idN++;
        //echo json_encode($out);
    }
    $startNumber = $startNumber + 3;
    return ($out);

 

Any help would be appreciated greatly!

Thanks

Gar

Link to comment
Share on other sites

Try the following :

 

Put ajax.php file in the root directory :

- root_dir

    - wire

    - site

    - index.php

    - ajax.php

 

then bootstrap ProcessWire (write in ajax.php, at the beginning of the file) :

include('./index.php');

 

and in your javascript code, write the correct path :
 

[...]

url: "/ajax.php",

[...]

 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...