Home/ Questions/Q 7549959
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T10:05:27+00:00

I have a view file like this : <html> <head> <meta name=layout content=main />

  • 0

I have a view file like this : 

<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>

This works very similar to Twitter site, i/e when the user scrolls down the bottom of the page will fetch more results and this will be repeated. This works for me, but the problem that I have now is instead of updating my id scrolling part alone, I’m getting the whole page being reloaded again and making the page looks nasty!

Here is how my page looks :
enter image description here

You can clearly see that my whole page layout is been reloading when my scroll bar hits the bottom of the page. How I can get rid of this?

Thanks in advance.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try this:

     (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!...');
            $.get(url, function(data) {
              $("#scrolling").append($(data).filter("#scrolling").html());
              $('.pagination').hide();
            });
            return $('#scrolling').load(url + " #scrolling", function() {
              return $('.pagination').hide();
            });
          }
        });
      });
    }).call(this);
    • 0