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

我有这样一个视图文件：如何仅通过Jquery更新所需的Id，在Grails中？

<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网站，I/E当用户向下滚动页面的底部将获取更多的结果，这将被重复。这适用于我，但我现在的问题是，而不是单独更新我的ID scrolling部分，我得到整个页面再次被重新加载，并使页面看起来讨厌！

这是我的页面的外观： enter image description here

你可以清楚地看到，我整个页面布局被重新加载时，我的滚动条命中页面的底部。我如何摆脱这个？

在此先感谢。

来源

2012-02-24 Ant' s

试试这个：

(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);

来源

2012-02-24 15:40:17

感谢您的回答。但它不起作用。它将取代之前的“滚动”部分，并将新的“滚动”标识置于其上。雅还有布局崩溃.. :( – 2012-02-24 17:05:02

啊，当然是啊，我会更新使用'.get'和'append' – 2012-02-24 17:21:29

你去了现在它会得到的HTML并将其附加到滚动div而不是取代它的内容 – 2012-02-24 17:26:23

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

回答

相关问题