2016-03-08 15 views
5

Ich bin sehr neu in JQuery und kann nicht verarbeiten, wie ich das tun kann. Ich habe eine Tabelle in meiner Datenbank user_thoughts. Ich versuche, die Unendlichkeit Scroll-Funktion zu implementieren, die aktuelle, sollte alert("bottom") wenn die thoughts für einen Benutzer übertreffen 10.So erhalten Sie die Anzahl der Zeilen als JQuery-Variable

Jeder Benutzer eine thought hochladen und auf ihre profile_page, nur ihre Gedanken angezeigt. Standardmäßig benötige ich 10 Posts, die angezeigt werden. Wenn ein Benutzer zum Ende der Seite scrollt, lädt er automatisch 10 weitere Posts, die der Benutzer geschrieben hat.

Hier sind meine infinity_scroll Skript:

$(document).ready(function(){ 
    var load = 0; 
    $(window).scroll(function(){ 
     if($(window).scrollTop() == $(document).height() - $(window).height()){ 
      load++; 
      // start AJAX 
      $.post("inc/ajax.php", {load:load},function (data){ 
       $(".userposts_panel").append(data); // class 
       alert ("bottom"); 
      }); 
     } // if closed 
    }); 
}); 

Ich brauche eine if-Anweisung die alert() umgibt, etwas geht - if the user has over 10 posts and the user has scrolled to the bottom, then display more data - Auch jetzt, ich bin nur alert() zum Testen. Wenn der Benutzer beispielsweise nur 2 Posts erstellt hat und der Benutzer nach unten scrollt, sollte die alert() nicht auftreten.

Mein Denken ist, dass ich ein var brauche, die die Zahl der Stellen für einen Benutzer bekommt und dann Benutzer, die weit, wenn die Bedingungen angeben, wie

if (posts >=10){ 
     alert("bottom"); 
    } 

Ist dies der beste Weg, um dies zu realisieren? Wenn nicht, welchen Ansatz sollte ich wählen?

Edit:

Wie jede einzelne Zeile (single post) angezeigt wird:

<div class=userposts_panel> 
<?php 
// PHP query here, leading to this echo ... 
    echo "<div class='message_wrapper'> 
       <div class='where_msg_displayed'> 
        <div class='more_options' style='float: right;'> 
         <li class='dropdown'> 
          <a 'href='#' class='dropdown-toggle' data-toggle='dropdown' role='button' aria-haspopup='true' aria-expanded='false'> More <span 
                                   class='caret'></span></a> 
          <ul class='dropdown-menu'> 
           <li><a href>Flag Post 
           <span id='options' class='glyphicon glyphicon glyphicon-flag' aria-hidden='true'></span> </a></li>"; 
           if ($user == $username){ 
            echo "<li>"; ?> <a href="/inc/del_post.php?id=<?php echo $thought_id;?>">Delete <?php 
            echo "<span id='remove' class='glyphicon glyphicon-remove' aria-hidden='true'></span> </a></li>"; 
           } echo" 
          </ul> 
         </li> 
        </div>"; 
        if ($shared == "no"){ 
         echo "<img class='img-size' src='images/anomolous.jpg' />"; 
         } else { 
          echo "<img class='img-size' src='$profile_pic2'/>"; 
         } 
        echo "<span style='margin-left: 10px;'>$message_content </span> <br/> <br/>"; 
         if ($attachent !=""){ 
          echo "<img src='user_data/attached_images/$attachent' style='width: 230px; height=230px;'/>"; 
         } echo " 
       </div> 
      <div class='where_details_displayed'> 
       <a href='profile_page/$thoughts_by'> <b> $name_of_user </b> </a> - $date_of_msg 
       <div class='mini_nav' style='float: right;'> 
        <a href='/inc/favourite_post.php?id=";?><?php echo $thought_id;?><?php echo "'> 
         <span class='glyphicon glyphicon-heart-empty' aria-hidden='true' style='padding-right: 5px;' onclick='changeIcon()'></span> 
        </a> | 
        <a onclick='return toggle($thought_id);' style='padding-left: 5px;'> Comments ($num_of_comments) </a> 
       </div> 
       <div id='toggleComment$thought_id' class='new_comment' style='display:none;'> 
        <br/> $comment_posted_by said: $comment_body 
       </div> 
      </div> 
     </div>"; 
    ?> 
    </div> // userposts_panel closed. 
+2

Sie sollten einige Paginierungsinformationen an das Front-End senden, wie Total Records, Page & Limit, um die Anzahl der bereits angezeigten Gedanken korrekt zu berechnen und welche beim Scrollen abgerufen werden soll. – A1rPun

+0

Wie @ A1rPun erwähnt, ist dies der richtige Weg, um Paginierung zu erreichen! Aber um dieses spezielle Problem, wie es ist, könnten Sie ein kleines HTML-Snippet zur Verfügung stellen, wie Sie jede Zeile anzeigen?Würde helfen – Anubhab

+0

@Anubhab - Ich habe meine Frage bearbeitet. :) – Freddy

Antwort

1

Sie die Länge Ihrer Beiträge bekommen konnte durch Zählen erscheint die Anzahl der Elemente einer bestimmten Klasse in Ihre Seite, z Angenommen, Sie haben eine Wrapper-Klasse ‚postRowWrap‘ verwenden jeden Beitrag für die Anzeige, dann

var postLen = $('.userposts_panel').find('.postRowWrap').length 

könnten Sie die Länge der aktuellen Anzahl der Beiträge in Aussicht geben.

Wenn Sie eine <table> verwenden, dann

var postLen = $(".userposts_panel").find('tr').length 

könnten Sie die Länge der Beiträge in Sicht geben.

Jetzt könnten Sie tun:

if(postLen > 10){alert()} 

EDIT: Ah, ein bisschen von meinem Ende spät, aber diese zu schließen, in Ihrem Fall -

postLen = $(".userposts_panel").find('.message_wrapper').length //which is, in the wrapper class find number of .message_wrapper which signifies number of messages you have as DOM in your HTML 

geben Sie die Länge der Anzahl der Nachrichten auf Ihrer Seite. Hoffe, das hilft. :)

+0

Hallo, Entschuldigung für die späte Antwort, ich wurde von anderen Themen erwischt. Aber ich habe Ihre Lösung jetzt implementiert und es funktioniert perfekt! Danke für Ihre Hilfe. – Freddy

Verwandte Themen