title: How Do I Update Only The Required Id Via Jquery, In Grails?
body: <p>I have a view file like this : </p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
          &lt;meta name="layout" content="main" /&gt;
          &lt;title&gt;&lt;g:message code="User's profile" /&gt;&lt;/title&gt;
          &lt;g:javascript library="jquery"/&gt;
          &lt;g:javascript&gt;
           (function() {
                jQuery(function() {
                  return $(window).scroll(function() {
                    var url;
                    url = $('.pagination .nextLink').attr('href');
                    if (url &amp;&amp; $(window).scrollTop() &gt; $(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);
          &lt;/g:javascript&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;!--Render the menu for the user--&gt;
          &lt;!--check the size of the task so that we can diplay a meaningful mess if userTasks is empty!--&gt;
          &lt;g:if test = "${userTasks.size() &gt; 0}" &gt;
          &lt;div id = "scrolling"&gt;
              &lt;g:each in = "${userTasks}" var = "tasks"&gt;
                  &lt;div class = "scrolling"&gt;
                      &lt;span style = "position:relative; left:360px; font-size:1.2em;"&gt;&lt;g:link controller = "tasks" action = "show2" id = "${tasks.id}"&gt;${tasks.title}&lt;/g:link&gt; &lt;/span&gt;
                  &lt;/div&gt;
              &lt;/g:each&gt;
              &lt;div class = "pagination"&gt;
                  &lt;g:paginate total = "${tasksCount}" controller = "tasks" action = "test" /&gt;
              &lt;/div&gt;
          &lt;/g:if&gt;
          &lt;g:else&gt;
              You don't have any unread tasks!
          &lt;/g:else&gt;
          &lt;/div&gt;
      &lt;br /&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>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 <code>scrolling</code> part alone, I'm getting the whole page being reloaded again and making the page looks nasty! </p>
  
  <p>Here is how my page looks : 
  <img src="https://i.stack.imgur.com/Xa88l.png" alt="enter image description here"></p>
  
  <p>You can clearly see that my <em>whole page layout is been reloading</em> when my scroll bar hits the bottom of the page. How I can get rid of this?</p>
  
  <p>Thanks in advance. </p>