2013-04-18 2 views
0

Я показываю данные на своей странице, и когда я нажимаю на кнопку load more data, она будет загружать больше данных на ту же страницу под данными, которые уже были отображены. Я хочу преобразовать эту функцию, чтобы загружать больше данных, поскольку пользователь прокручивает страницу вниз, а не нажимает на load more data. Вот что у меня есть и что я пытался.Загрузка данных с помощью прокрутки с помощью javascript

вид HTML

<section id="rosterImages"> 
    <section id="users"> 
     <div id="nameImage"> 
      <figure id="content" class="thumbnail"> 
       <img width="158" height="158" alt="Gravatar" data-bind="attr:{src: GravatarUrl}"/> 
       <figcaption> 
        <a title="Email" id="emailIcon" class="icon-envelope icon-white" data-bind="attr:{'href':'mailto:' + Email()}"></a> 
       </figcaption> 
      </figure> 
      </div> 
     </section> 
    </section> 

Javascript Scroll

$(window).scroll(function (e) { 
     if ($(window).scrollTop() >= ($(document).height() - $(window).height()) * 0.7) { 
      $('#users').append(Next()); 
     } 
    }); 

Следующая метод

Next = function() { 
    var _page = $.views.Roster.ViewModel.CurrentPage() + 1; 
    $.views.Roster.ViewModel.CurrentPage(_page); 
    $.views.Roster.GetPage("/api/Roster", 9, _page); 
}; 

следующий мето d работает, если я свяжу его с кнопкой, но не со свитком.

ответ

0

Является ли это хорошо, если вы попробуете загрузки данных при прокрутке, чтобы конце страницы,

Тогда возможно, вы можете попробовать: -

<script> 
     $(window).scroll(function() { 
      //Will check if the user has reached bottom of a PAGE 
      if ($(window).scrollTop() == $(document).height() - $(window).height()) { 
       alert('Just checking if End of the Scroll Works'); 
       $('#users').append(Next()); 
      } 
     }); 

    </script> 

[Обновлено] Я попробовал то же самое с $(document).ready(function() {));, и он работает как шарм: -

$(document).ready(function() { 
     // Handler for .ready() called. 
     $(window).scroll(function() { 
      alert("Scrollbar Initiated"); 
      //Will check if the user has reached bottom of a PAGE 
      if ($(window).scrollTop() == $(document).height() - $(window).height()) { 
       alert("Scrollbar appended"); 
       $('#users').append(Next()); 
      } 
     }); 
    }); 

Полный код, который я пытался что-то л икэ ниже: -

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
</head> 
<script> 
    $(document).ready(function() { 
     // Handler for .ready() called. 
     $(window).scroll(function() { 

      //Will check if the user has reached bottom of a PAGE 
      if ($(window).scrollTop() == $(document).height() - $(window).height()) { 
       alert("Scrollbar appended"); 
       $('#users').append(Next()); 
      } 
     }); 

     Next = function() { 
      var text = "..............Appended to Lipsum......................"; 
      return text; 
     }; 
    }); 


</script> 
<body> 
    <div id="users"> 
     <p> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed tellus mauris, non tincidunt libero. Nullam eros tellus, posuere sit amet tempus laoreet, mattis fringilla nisl. Maecenas commodo arcu ac mauris sagittis nec iaculis justo vulputate. Nulla eros justo, consectetur fringilla iaculis gravida, eleifend quis metus. Suspendisse ut ante justo. Proin mollis pellentesque elit, in eleifend erat rhoncus vel. Aenean magna odio, pharetra in rhoncus et, venenatis sed nunc. Mauris convallis, nunc et gravida sagittis, leo urna porttitor lacus, vel pellentesque felis arcu eu metus. Suspendisse eget neque id risus pharetra sollicitudin. 
     </p> 
     <p> 
      Fusce fermentum sollicitudin neque eu vestibulum. Donec adipiscing fermentum varius. Ut ut libero lacus, ut viverra dolor. Praesent bibendum elementum dui at consequat. Pellentesque pulvinar, lacus eu auctor aliquet, mi eros egestas orci, sit amet condimentum erat tortor nec felis. Aliquam erat volutpat. Donec fermentum molestie tempor. Donec non facilisis metus. Nam convallis tempor ipsum in scelerisque. Mauris cursus metus sed justo pretium fringilla. Nulla cursus scelerisque tellus vel ornare. Etiam sit amet sapien diam, ut commodo mi. Vestibulum nec enim id metus feugiat aliquet. Integer varius faucibus odio vel eleifend. Nunc convallis lectus at quam consequat ac accumsan nunc sodales. 
     </p> 
     <p> 
      Nunc elementum augue quis velit hendrerit vel aliquam dui porta. Pellentesque sollicitudin tincidunt elit ac cursus. Sed iaculis, magna facilisis tincidunt ultricies, risus augue semper est, sit amet cursus lectus arcu iaculis elit. Nullam in massa felis, sit amet tempus urna. Vestibulum condimentum urna quis tortor volutpat sodales. Nullam sed nisl est, eget pulvinar elit. Pellentesque sagittis congue urna, nec molestie quam lacinia nec. Ut rhoncus fringilla tellus, eget molestie nibh mattis quis. Nunc nec purus elit. Cras vitae felis ac arcu iaculis egestas. Pellentesque aliquet, urna et ultrices porta, metus arcu consequat neque, quis vehicula quam magna sed risus. Nulla a nunc neque, sed fermentum risus. Vestibulum pellentesque elementum suscipit. Nulla dolor massa, lacinia vel vulputate ac, eleifend eu odio. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc lacinia justo in ante ornare consequat. 
     </p> 
     <p> 
      Sed dapibus quam ut augue luctus rhoncus. Aliquam cursus semper velit ac feugiat. Nullam erat magna, adipiscing id pharetra vel, elementum ut odio. Phasellus facilisis, justo id adipiscing posuere, lectus tellus vehicula nunc, nec vulputate elit ligula vitae nisi. Nunc tristique velit et turpis viverra vel condimentum nibh varius. Vivamus magna ante, adipiscing et iaculis sed, rutrum sit amet diam. Nunc semper orci non risus rutrum eget ullamcorper nulla volutpat. Suspendisse auctor quam vitae nisl blandit vulputate. Praesent justo mi, condimentum non malesuada sit amet, molestie ac massa. Phasellus dictum tincidunt massa, sed dictum urna rutrum id. Praesent eu gravida risus. 
     </p> 
     <p> 
      Nullam et neque tortor, ut accumsan nisl. Nullam pulvinar fermentum velit, eu tristique arcu sollicitudin eget. Praesent rhoncus malesuada mauris at fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam ac massa lacus, et eleifend turpis. Proin fringilla imperdiet eros at venenatis. Fusce eu tempor lorem. Morbi ipsum tortor, condimentum quis pretium posuere, scelerisque sed purus. Maecenas in augue nunc, et ultrices risus. Fusce convallis tempus varius. Pellentesque eget nulla magna, ac ornare nibh. Morbi euismod dolor et nisl molestie in ornare eros gravida. Praesent sit amet lorem hendrerit diam ultrices egestas nec quis felis. Suspendisse nec nisl erat, ut ornare risus. Nulla nec pretium sapien. 
     </p> 
     <p> 
      Proin urna tellus, commodo in rhoncus non, elementum aliquam nisl. In consequat pretium dolor vel sollicitudin. Aliquam quis mauris eu elit hendrerit ultrices a et justo. Phasellus nec sodales felis. Pellentesque venenatis mauris in magna fringilla vitae fringilla erat tempor. Proin posuere augue eu odio volutpat ultrices. Donec pulvinar interdum eros in auctor. Sed molestie, lacus id posuere elementum, erat odio eleifend ligula, vel euismod nibh libero sit amet dolor. Phasellus ac augue urna. Pellentesque feugiat suscipit semper. Pellentesque luctus tempus tincidunt. Ut scelerisque, eros et porta euismod, neque elit ornare quam, quis posuere sem nulla et velit. Nam purus neque, accumsan nec lacinia ut, varius vel arcu. Nullam at orci sem, et aliquet augue. Nam imperdiet suscipit feugiat. Suspendisse dictum mi eget magna commodo at tristique odio dictum. 
     </p> 
     <p> 
      Ut a magna nec nulla ultrices faucibus. Praesent et est est. Aliquam vulputate lobortis tincidunt. Phasellus rhoncus imperdiet aliquet. Nullam id mi neque, sit amet tristique urna. Integer adipiscing, ipsum vel vestibulum vulputate, nulla ipsum blandit orci, et elementum quam lorem vitae mauris. Quisque consectetur ornare euismod. Nam vel iaculis risus. Proin lobortis dignissim lacus, sed feugiat lacus ultrices quis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
     </p> 
     <p> 
      Nullam bibendum posuere adipiscing. Suspendisse potenti. Praesent nisi sem, scelerisque et semper vitae, pulvinar eget nunc. Mauris ultrices ultricies sem, pulvinar convallis augue aliquet eu. Curabitur sed purus eu turpis congue egestas. Sed tempus orci quis elit hendrerit pretium. Nam dictum nibh non orci vestibulum elementum. Phasellus sit amet velit volutpat erat elementum venenatis. Quisque facilisis egestas libero, a gravida nibh rhoncus quis. Quisque risus diam, viverra eu lacinia eu, ultrices non eros. Curabitur placerat imperdiet neque, ut cursus purus posuere eu. Proin sed ipsum leo, vitae rutrum diam. Suspendisse placerat risus nec nisl adipiscing vitae sagittis ipsum hendrerit. Phasellus sollicitudin orci mauris, sit amet sollicitudin lectus. Vivamus et bibendum justo. 
     </p> 
     <p> 
      Duis sed metus ac mi fermentum congue in vel nisl. Integer nunc magna, pulvinar a venenatis a, accumsan varius libero. Integer facilisis urna non enim viverra a porttitor ante lobortis. Pellentesque pharetra gravida porttitor. Morbi iaculis nibh sed urna malesuada ac facilisis mi vestibulum. Praesent euismod aliquam laoreet. Praesent at dolor eget augue convallis viverra vel ut ante. Praesent dictum est et nisi dictum ut vestibulum erat ullamcorper. Donec aliquam, quam in euismod pulvinar, augue mauris gravida lorem, a porta nunc felis at felis. Nam eget libero urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean iaculis massa sed purus tempor eu laoreet odio venenatis. Integer ultrices felis id ante pharetra bibendum. Sed at lorem vitae nunc vestibulum egestas. Fusce vel malesuada neque. 
     </p> 
     <p> 
      Sed non pretium sem. Aliquam id elit malesuada mi commodo dignissim ac sit amet diam. Integer fringilla arcu id est tincidunt non vestibulum eros commodo. Sed dictum sapien in nisi dapibus id pretium ipsum rutrum. Nulla justo diam, auctor sit amet venenatis sed, volutpat non ante. Aenean eu tristique augue. Suspendisse nisl nibh, eleifend et adipiscing in, volutpat sed enim. Nunc eros urna, gravida vitae interdum eget, volutpat et ipsum. Suspendisse eget turpis varius magna pretium fermentum. Nam neque turpis, tristique ac semper eu, pellentesque sit amet dolor. Integer aliquam aliquam tortor, sit amet dignissim quam laoreet at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sit amet mi augue. Maecenas pretium accumsan sollicitudin. 
     </p> 
     <p> 
      In at neque quam, sed sollicitudin eros. Praesent venenatis, neque quis molestie dapibus, nisl nibh tincidunt elit, sodales fermentum quam purus sed dolor. Nullam bibendum, nisl a scelerisque accumsan, dui nibh dapibus mi, ut pellentesque arcu massa aliquam lectus. Cras fermentum, libero eget pulvinar elementum, nibh orci fermentum justo, a bibendum lectus nisl sit amet felis. Mauris at lorem quis est auctor tristique. Quisque dui libero, congue vel fermentum vel, congue quis libero. Aenean cursus dolor at augue sodales rutrum. Aenean egestas vulputate nulla, at porta tortor venenatis id. Vivamus sit amet lectus vitae lorem pellentesque mollis sed a diam. Donec consectetur mi non sapien sagittis faucibus. Proin at lacus purus, in lobortis lorem. Praesent ac arcu justo, at elementum erat. Quisque vulputate accumsan turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis tempor erat vel tellus pellentesque tincidunt. Duis dolor mi, placerat id molestie laoreet, semper ut nibh. 
     </p> 
     <p> 
      Suspendisse potenti. Sed eu risus dolor, vel semper libero. Sed accumsan est eget urna vulputate pretium. Integer varius venenatis quam. Praesent lacus diam, condimentum quis luctus in, convallis vitae est. Suspendisse potenti. Phasellus interdum mauris ut nisi feugiat sodales. Vivamus condimentum, leo sed placerat rhoncus, eros lacus ultricies sem, sit amet tempor libero nisl et lacus. In sed odio arcu. Proin id diam a lacus tristique posuere. Integer luctus urna et nulla ultrices interdum. 
     </p> 
     <p> 
      Vestibulum a eros quam, et laoreet nisi. Duis convallis tincidunt augue nec pulvinar. Nunc malesuada urna ut sem placerat consequat. Nulla sollicitudin venenatis quam sollicitudin gravida. Curabitur elementum quam sit amet dolor euismod non dapibus elit tincidunt. In turpis augue, luctus et iaculis a, molestie at risus. Praesent sit amet ante ac ipsum fringilla dignissim. Aliquam elit orci, feugiat faucibus laoreet eu, sodales interdum velit. Aliquam dolor mi, pharetra vel suscipit id, tempor eu arcu. Aliquam sem turpis, rutrum quis porta sed, faucibus quis eros. Proin quis varius velit. 
     </p> 



    </div> 


</body> 
</html> 
+0

Я попытался это но, похоже, не делает вообще ничего, даже предупреждение не показывает ничего. – Masriyah

+0

Проверьте, можете ли вы использовать его в $ (document) .ready (function() {..//Your code}); [Обновлен ответ] – Shubh

+0

should 'id =" lipsum "' be 'id =" users "'? Я попробую сейчас – Masriyah

1

Мы просто реализовать что-то подобное, и наш метод был почти как другой ответ для проверки, за исключением, чтобы увидеть, если вы на самом деле достигли конца страницы

<script> 
     $(window).scroll(function() { 
      //Will check if the user has reached bottom of a PAGE 
      //-10 makes it such that you don't have to scroll all the way to the bottom 
      //can be adjusted as needed for footers, etc, 
      if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) { 
       alert('Scrolling should be called now'); 
       $('#users').append(Next()); 
      } 
     }); 

    </script> 
+0

Я не уверен, но, похоже, он ничего не делает для страницы и не уверен, что может вызвать проблему. – Masriyah

+0

Вы уверены, что на вашей странице нет ошибок JS, которые помешали бы этому обстрелу? – Tommy

+0

Я только что узнал, что scrollTop не работает в chrome для меня - он работает в IE и FF. Вы случайно знаете какую-нибудь работу? – Masriyah

Смежные вопросы