How can I get a "load more" to request more data from the server?

[Q695]

I have an "engine.js" as follows:

var i=1;  //incrementer for FRESH new data
function yHandler(){
    // Watch video for line by line explanation of the code
    // http://www.youtube.com/watch?v=eziREnZPml4
    var wrap = document.getElementById('wrap');
    var contentHeight = wrap.offsetHeight;
    var yOffset = window.pageYOffset;
    var y = yOffset + window.innerHeight;
    if(y >= contentHeight-200){//how soon before the bottom would you like to add the data?
        i++;//add one to the incrementer for more data


        // Ajax call to get more dynamic data goes here from result.php
        // https://www.youtube.com/watch?v=fEYx8dQr_cQ
        








        /* struggle here
        $.ajax({
            type: 'GET',
            url: 'load_more/results.php',
            success: function(wrap){
                //load more data to "wrap" div
//                wrap.innerHTML =+ ("load_more/results.php");
                console.log('success'+i);
            }
        })
*/







    }
    //test data
    var status = document.getElementById('status');
    status.innerHTML = i+" | "+contentHeight+" | "+y;
}
window.onscroll = yHandler;

 and an "index.*" as follows:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="load_more/engine.js"></script>
<link rel="stylesheet" type="text/css" href="load_more/more.css"/>


<div id="status">0 | 0</div>
<div id="wrap"><?php require_once "results.php"; ?></div>

 

The bug is somewhere in the block broken apart.

What do I need to request/display the HTML sent from the server?

[Muddy_Funster]

it's not overly clear what your trying to do here.  what are you using to differentiate between more_data and initial_data? what relevance is the youtube link? what's going on in your php file?

 

 

p.s. you seem to have a lot of "Undefined Constant"s in your sig...

[Q695]

I'm using jquery for a lot of "constants".

 

The PHP file is an html "compiler" of randomly populated data based upon the users desire of what goes there in HTML.

 

Initial HTML is also generated from results.php.

[Q695]

Another use case example is a chat room.

[Muddy_Funster]

Yeah...still not getting it, sorry.  However, just so this reply isn't completly useless, here's your $.ajax broken down (and fixed a bit)

 $.ajax({
  type: 'GET',
  url: 'load_more/results.php?revision='+i,  //add a variable to the URL that will carry the value in your i counter through to the PHP page so it know's if this is new or additional data
  success: function(data){ // this param name was confusing, I have changed it to the "normal" name to make it clear that it contains the data returned from the request
    //load more data to "wrap" div
    wrap.innerHTML =+ (data); // as above, data holds the result of the request, so all the data returned from your results.php file are in this param but please see below
//    $('#wrap').append(data);  // this is the jQuery method for adding more content after the last child in a container.  It's more robust than the way you are doing it
    console.log('success'+i); // I'll just leave this here
  }
})

Hope that helps some.  You will of cource have to have something on your php page to handle $_GET['revision'] for the above to properly work.

Edited April 30, 2015 by Muddy_Funster

[Q695]

Can I give you a hug, because I was at: 

[Muddy_Funster]

Hugs are always good lol...and so is getting passed a roadblock.  Glad to have helped.