gar1606 Posted August 17, 2016 Posted August 17, 2016 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
flydev Posted August 17, 2016 Posted August 17, 2016 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", [...] 2
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now