У меня есть такой файл:
<html>
<head>
<meta name="layout" content="main" />
<title><g:message code="User's profile" /></title>
<g:javascript library="jquery"/>
<g:javascript>
(function() {
jQuery(function() {
return $(window).scroll(function() {
var url;
url = $('.pagination .nextLink').attr('href');
if (url && $(window).scrollTop() > $(document).height() - $(window).height() - 50) {
$('.pagination').show();
$('.pagination').text('Fetching more tasks, please wait!...');
return $.get(url, function(data) {
$('#scrolling').append(data);
return $('.pagination').hide();
});
}
});
});
}).call(this);
</g:javascript>
</head>
<body>
<!--Render the menu for the user-->
<!--check the size of the task so that we can diplay a meaningful mess if userTasks is empty!-->
<g:if test = "${userTasks.size() > 0}" >
<div id = "scrolling">
<g:each in = "${userTasks}" var = "tasks">
<div class = "scrolling">
<span style = "position:relative; left:360px; font-size:1.2em;"><g:link controller = "tasks" action = "show2" id = "${tasks.id}">${tasks.title}</g:link> </span>
</div>
</g:each>
<div class = "pagination">
<g:paginate total = "${tasksCount}" controller = "tasks" action = "test" />
</div>
</g:if>
<g:else>
You don't have any unread tasks!
</g:else>
</div>
<br />
</body>
</html>
Это работает очень похоже на сайт Twitter, т. Е. Когда пользователь прокручивает страницу вниз, он получит больше результатов, и это будет повторяться. Это работает для меня, но проблема, с которой я столкнулся сейчас, состоит в том, чтобы вместо обновления части моего идентификатора scrolling, я получаю перезагружаемую страницу целиком, и страница выглядит ужасно!
Вот как выглядит моя страница:
Вы можете ясно видеть, что весь макет моей страницы перезагружается , когда моя полоса прокрутки достигает нижней части страницы. Как мне от этого избавиться?
Спасибо заранее.