在Grails中，如何通过Jquery只更新所需的Id？_Jquery_Grails_Groovy

在Grails中，如何通过Jquery只更新所需的Id？

jquery grails groovy

在Grails中，如何通过Jquery只更新所需的Id？,jquery,grails,groovy,Jquery,Grails,Groovy,我有这样一个视图文件： <html> <head> <meta name="layout" content="main" /> <title><g:message code="User's profile" /></title> <g:javascript library="jquery"/> <g:javascript>

我有这样一个视图文件：

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


（功能（）{
jQuery（函数（）{
返回$（窗口）。滚动（函数（）{
var-url；
url=$（'.pagination.nextLink'）.attr（'href'）；
如果（url&&$（窗口）.scrollTop（）>$（文档）.height（）-$（窗口）.height（）-50）{
$（'.pagination'）.show（）；
$（'.pagination'）.text（'正在获取更多任务，请稍候！…）；
返回$.get（url、函数（数据）{
$（“#滚动”）.append（数据）；
返回$（'.pagination'）.hide（）；
});
}
});
});
}).打电话（这个）；
${tasks.title}
你没有任何未读的任务！

这与Twitter站点的工作原理非常相似，即当用户向下滚动页面底部时，将获取更多结果，并且将重复此操作。这对我来说是可行的，但我现在的问题是，我不再只更新id

滚动部分，而是重新加载整个页面，使页面看起来很糟糕
以下是我的页面的外观：

您可以清楚地看到，当滚动条到达页面底部时，整个页面布局都在重新加载。我怎样才能摆脱这个
提前谢谢
 试试这个：
 (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);

试试这个：
 (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);

谢谢你的回答。但它不起作用。它正在替换以前的滚动
部分，并将新的滚动
id放置在其上。是的，仍然有一些布局正在崩溃..：（好了。现在它将获取html并将其附加到滚动div中，而不是替换其内容。好了，这又是在做同样的事情！替换div元素..：（感谢您的回答。但它不起作用。它正在替换以前的滚动部分，并将新的滚动部分
id放置在其上。您仍然有正在折叠的布局（好了。现在它将获取html并将其附加到滚动div中，而不是替换其内容。好了，这又是在做同样的事情！替换div元素..：(