Databases
StackOverflow2013
Postsdbo
POInfitine scroll posts all data from MySQL before user gets to the bottom of the page
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POInfitine scroll posts all data from MySQL before user gets to the bottom of the page
    primarykey
    data
    text
    <p>My PHP grabs data from MySQL and display's it in a container div in my index.php with no problem. However, the data is displayed one after another (different rows) rather than using the space available in the same row. So I changed the float to float: left; <strong>but now it just load everything up in one shot without getting to the end of the page</strong>. </p> <p>I believe that my problem is in the <strong>JavaScript</strong> since, <strong>before</strong> the change in float; it was one item per row, <strong>now</strong> it's three items per row. And, the JS <strong>is using the id's to calculate when to call upon the PHP loading script</strong>.</p> <p>Here's the index.php snippet of the div used as an overall container in the body tags. The second div is for an infinite scroll feature that loads more data when the user reaches the end of the screen. </p> <pre><code>&lt;div id="postedComments"&gt; &lt;?php require_once 'jquery-masterLoader.php' ; ?&gt; &lt;/div&gt; &lt;div id="loadMoreComments" style="display:none;" &gt; &lt;center&gt;test for hidden field &lt;/center&gt; &lt;/div&gt; </code></pre> <p>Here's the PHP jquery-masterLoader.php it's one of the two PHP files that govern the loading script. The other one wouldn't be necessary for show and tell since it's only called upon when the user reaches the end of the screen. </p> <pre><code>&lt;?php if ( strpos(strtolower($_SERVER['SCRIPT_NAME']),strtolower(basename(__FILE__))) ) { header("Location: index.php"); die("Denny access"); } error_reporting(0) ; set_exception_handler('exception_handler') ; $config = parse_ini_file("core/config/my.ini") ; $db=new mysqli($config['dbLocation'] , $config['dbUser'] , $config['dbPassword'] , $config['dbName']); if(mysqli_connect_error()) { throw new Exception("&lt;b&gt;Could not connect to database&lt;/b&gt;") ; } if (!$result = $db-&gt;query("SELECT * FROM world_country ORDER BY id ASC LIMIT 0,30")) { throw new Exception("&lt;b&gt;Could not read data from the table &lt;/b&gt;") ; } while ($data = $result-&gt;fetch_object()) { $id = $data-&gt;id; $name = $data-&gt;Name ; $continent = $data-&gt;Continent; $population = $data-&gt;Population ; echo " &lt;div class='postedComment' id=\"$data- &gt;id \"&gt; &lt;b&gt;Country : &lt;/b&gt;$name &lt;br /&gt; &lt;b&gt;Continent : &lt;/b&gt;$continent&lt;br/&gt; &lt;b&gt;Population : &lt;/b&gt;$population &lt;i style=\"font-size:small;color:blue\"&gt;Index : $id&lt;/i&gt; &lt;hr /&gt; &lt;/div&gt; " ; } /* close connection */ $db-&gt;close(); function exception_handler($exception) { echo "Exception cached : " , $exception-&gt;getMessage(), ""; } </code></pre> <p>Sorry for having style mixed in with PHP, it's a work in progress. </p> <p>Here's the CSS rules </p> <pre><code>#postedComments { width: 100%; display: block; } .postedComment { width: 33%; float: left; min-width: 200px; min-height: 80px; } #loadMoreComments { display:none; } html, body { height: ; width: 100%; margin: 0; padding: 0; } #body { width: 60%; margin: 1% auto; } /* Resets */ ul { padding:0; margin:0 0 20px 0; list-style:none; } h1, h2 { padding:0; margin:0 0 20px 0; font-weight:normal; } p { padding:0; margin:0 0 20px 0; } a:link, a:visited { text-decoration:underline; color:#000; } a:hover { text-decoration:none; } ul li { padding:5px 0; } ul li input[type="text"], ul li input[type="password"] { width:200px; } </code></pre> <p>Also here's the JavaScript calling upon the scripts.<br> (custom_jquery-debug.js)</p> <pre><code> $(document).ready(function() {     $("#postedComments").append("&lt;p id='last'&gt;&lt;/p&gt;");     //$("#postedComments").append( "&lt;div id='last'&gt;&lt;/div&gt;" );     console.log("Document Ready ------------------------");     if ($("#last").length) {         position = $("#last").offset();         console.log("Initialization of last_DIV succeeded and it's values are ....Top-value is :"+                     Math.floor(position.top) + " ---- Left-value is : "+                     Math.floor(position.left));     }     doMouseWheel = 1;     $(window).scroll(function() {         if (!doMouseWheel) {             return;         }         var distanceTop = $('#last').offset().top - $(window).height();         console.log("Mouse scroll , and The DIV  last has an offset-top value of :"+                     Math.floor($("#last").offset().top) + "----Window height is :"+                     Math.floor($(window).height()) + "---- Last's offset minus window height is :"+                     Math.floor(distanceTop));         if ($(window).scrollTop() &gt; distanceTop) {             console.log("End of Window Reached &gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;");             console.log("Show Div loadMoreComments and Class .postedComments.last has the id of  :"+                         $(".postedComment:last").attr('id'));             doMouseWheel = 0;             $('div#loadMoreComments').show();             $.ajax({                 dataType: "html",                 url: "jquery-loadMoreComments.php?lastComment=" + $(".postedComment:last").attr('id'),                 success: function(html) {                     doMouseWheel = 1;                     if (html) {                         $("#postedComments").append(html);                         console.log("Append html , sumarize .... first id has nr : " +                                     $(".postedComment:first").attr('id') +                                     " --- last id has nr :" +                                     $(".postedComment:last").attr('id'));                         position = $("#last").offset();                         console.log("New values of last_DIV  from IF_html are , Top:"+                                     Math.floor(position.top) + " --- left :" +                                     Math.floor(position.left));                         $("#last").remove();                         if ($("#last").length == 0) {                             console.log("&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;The last_DIV is removed from stage&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;");                         }                         $("#postedComments").append("&lt;p id='last'&gt;&lt;/p&gt;");                         if ($("#last").length) {                             position = $("#last").offset();                             console.log("&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;A new last_DIV is appended and it's values are , Top :" +                                         Math.floor(position.top) + "  ---- Left :" +                                         Math.floor(position.left));                         }                         $('div#loadMoreComments').hide();                     } else {                         console.log("LoadMoreComments is replaced with a custom message");                         $('div#loadMoreComments').replaceWith("&lt;center&gt;&lt;h1 style='color:red'&gt;End of countries !!!!!!!&lt;/h1&gt;&lt;/center&gt;");                     }                 }             });         }     }); });​ </code></pre> <p>Second JS script (custom_jquery.js) </p> <pre><code>$(document).ready(function() {     $("#postedComments").append("&lt;p id='last'&gt;&lt;/p&gt;");     //console.log("Document Ready");     doMouseWheel = 1;     $(window).scroll(function() {         //console.log("Window Scroll ----");         if (!doMouseWheel) {             return;         };         var distanceTop = $('#last').offset().top - $(window).height();         if ($(window).scrollTop() &gt; distanceTop) {             //console.log("Window distanceTop to scrollTop Start");             doMouseWheel = 0;             $('div#loadMoreComments').show();             //console.log("Another window to the end !!!! "+$(".postedComment: last ").attr('id'));                 $.ajax({                 dataType: "html",                 url: "jquery-loadMoreComments.php?lastComment=" +                      $(".postedComment : last ").attr('id'),                 success: function(html) {                     doMouseWheel = 1;                     if (html) {                         $("#postedComments ").append(html);                         //console.log("Append html---------" +$(".postedComment: first ").attr('id'));                         //console.log("Append html---------" +$(".postedComment: last ").attr('id')); $("#last ").remove(); $("#postedComments ").append( " &lt; p id = 'last' &gt; &lt; /p&gt;" ); $('div#loadMoreComments').hide(); }else{       $('div#loadMoreComments').replaceWith("&lt;center&gt;&lt;h1 style='color:red'&gt;End of countries !!!!!!!&lt;/h1 &gt; &lt; /center&gt;");  // Added on Ver.0.4                         //Disable Ajax when result from PHP-script is empty (no more DB-results )                         doMouseWheel = 0;                     }                 }             });         }     }); });​ </code></pre> <p>What changes should I make to regain initial functionality? </p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USzb'
    1. USNima Amin
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POInfitine scroll posts all data from MySQL before user gets to the bottom of the page
      1. USsaji89
      1. VTFavorite
    1. COCan I ask you why `$data->id` is not on a single line and why there is a space after it? `<div class='postedComment' id=\"$data- >id \">` [note: **id=\"$data- >id \"**]
      singulars
      1. POInfitine scroll posts all data from MySQL before user gets to the bottom of the page
      1. USTanzeel Kazi
    2. COThat would cause problems but, it's actually just a typo done while posting on stack-overflow.
      singulars
      1. POInfitine scroll posts all data from MySQL before user gets to the bottom of the page
      1. USNima Amin
    3. COOkay. Could you also try to explain the issue more clearly. Probably add some screenshots and explain the expected and actual results in more detail.
      singulars
      1. POInfitine scroll posts all data from MySQL before user gets to the bottom of the page
      1. USTanzeel Kazi
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload