当前位置: 首页 > 面试题库 >

Ajax在Rails 3.2.3中使用will_paginate gem进行调用

孟和怡
2023-03-14
问题内容

我试图用will_paginategem实现Ajax调用,我发现了该指南http://ramblinglabs.com/blog/2011/11/rails-3-1-will_paginate-and-ajax,尽管它看起来很简单包含我不熟悉的coffeescript,因此,如果有人有其他解决方案,请提出建议。

我的代码如下

我的看法

    <div class="container">
     <div class="row">
      <div id="userRecipes">
       <%= render partial: 'userrecipes' %>
     </div>
    </div><!--/row-->

我的部分(用户食谱)

 <% @recipes.each do |r| %>
  <div class="span3">
   <div class="thumbnail">
    <%= image_tag r.avatar.url(:myrecipes) %>
   </div>
   <h4><%= link_to r.dish_name, r %></h4>
   <hr>
    <p><%= truncate r.description, :length => 90 %></p>
    <p><%= link_to "Edit Recipe", edit_recipe_path(r.id) %></p>
    <p><%= link_to "Delete Recipe", recipe_path(r.id), :confirm => "Are you sure?", :method => :delete %></p>
    <p><%= link_to "Add to favorites",  {:controller => 'favourites', :action => 'create', :recipe_id => r.id}, {:method => :post } %></p>
   </div><!--/span3-->
   <% end %>
   <%= will_paginate @recipes %>

更新的userrecipes.js.erb文件

$('#userRecipes').html('<%= escape_javascript(render partial: 'userrecipes') %>');
$.setAjaxPagination();

咖啡脚本

    $ ->
    $.setAjaxPagination = ->
    $('.pagination a').click (event) ->
      event.preventDefault()
      loading = $ '<div id="loading" style="display: none;"><span><img src="/assets/loading.gif" alt="cargando..."/></span></div>'
      $('.other_images').prepend loading
      loading.fadeIn()
      $.ajax type: 'GET', url: $(@).attr('href'), dataType: 'script', success: (-> loading.fadeOut -> loading.remove())
      false

      $.setAjaxPagination()

当我单击下一个锚标记以显示下一组结果时,页面保持不变,并且没有新内容出现

使用控制台查看是否可以看到任何错误时,输出为

GET http://localhost:3000/my_recipes?page=2&_=1355055997639

我在这里想念什么吗?还是我的userrecipes.js.erb文件存在问题,因为在其他Ajax示例中,我已经看到您在渲染部分文档时使用了escape_javascript?

编辑

在控制台中检查响应时,它还显示正在加载要加载的新配方,但视图中没有任何反应

任何指针赞赏

谢谢


问题答案:

为什么不尝试更简单的方法,创建一个包含以下内容的新帮助器(例如app / helpers / will_paginate_helper.rb):

    module WillPaginateHelper
      class WillPaginateJSLinkRenderer < WillPaginate::ActionView::LinkRenderer
        def prepare(collection, options, template)
          options[:params] ||= {}
          options[:params]['_'] = nil
          super(collection, options, template)
        end

        protected
        def link(text, target, attributes = {})
          if target.is_a? Fixnum
            attributes[:rel] = rel_value(target)
            target = url(target)
          end

          @template.link_to(target, attributes.merge(remote: true)) do
            text.to_s.html_safe
          end
        end
      end

      def js_will_paginate(collection, options = {})
        will_paginate(collection, options.merge(:renderer => WillPaginateHelper::WillPaginateJSLinkRenderer))
      end
    end

然后在您的视图中使用此标记进行ajax分页:

<%= js_will_paginate @recipes %>

请记住,分页链接将包含URL的现有参数,您可以如下所示排除这些参数。这是标准的分页功能:

<%= js_will_paginate @recipes, :params => { :my_excluded_param => nil } %>

希望能解决您的问题。

说明:

Will_paginate允许您创建自己的 自定义渲染器
。WillPaginateJSLinkRenderer是一个自定义渲染器,此类可以在任何地方定义,而不必在helper模块内部定义。自定义渲染器扩展了标准渲染器(LinkRenderer)并仅重新定义了两种方法。

准备的方法
是重写明确移除缓存克星参数,因为will_paginate创建与渲染页面时在场的所有参数的网页网址,我们不希望重用缓存克星参数。

链接的方法
是从原来的一个复制粘贴LinkRenderer源代码,而是创建了远程链接:真正使它成为一个JS
resquest。

最后, js_will_paginate
方法是一个标准的视图助手方法,用于调用常规的will_paginate视图助手方法,但会将我们的自定义渲染器添加到选项中,以便代替常规渲染器使用。



 类似资料:
  • 问题内容: 我无法使用来自ipad / iphone的ajax进行https POST呼叫。实际上,我正在尝试在我的PhoneGap应用程序中调用它。 您能在这方面帮助我吗? 问题答案: 您尚未说明服务器上的证书种类。我怀疑它是自签名的。我也有同样的问题。不能对具有自签名证书的服务器进行Ajax调用,这是SDK的限制。您必须编写一个Objective C插件才能解决此问题。

  • 问题内容: 我是ajax的新手。我试图将请求从我的gsp页面发送到控制器操作。但是我失败了。它没有调用控制器操作,并且页面正在重新加载。任何人都可以看看这个并提供帮助。这是我的以下页面>>> 这是我的控制器动作>>> 问题答案: 您可以尝试以下方法: 或这一个: 根据要求完成ajax调用:

  • 我在DialogFlow的官方网站上使用Node.js找到了这个示例,它运行良好,但我不知道如何将其集成到我的web应用程序中。 我可以将它集成到我的其他javascript jquery代码中吗?这里我需要运行节点index.js,但是如果我与代码集成,我还需要这样做吗? DialogFlow v1使用起来非常简单。我有这样的东西:

  • 问题内容: 我正在为下拉列表编写代码。将从数据库中的数据填充下拉列表。因此,我正在进行2个ajax调用,一个是在onmouseover事件上填充下拉列表的内容,另一个是在选择特定选项时进行ajax调用以将相关内容显示在屏幕上。 现在,我想再次调用ajax来获取可以在将鼠标悬停在特定选项上时填充的内容。从ajax调用获得的内容可以显示在小对话框中。为此,我已经安装了qtip库。 问题 我不知道如何进

  • 我想在Prestashop管理员中打一个ajax电话: 我创建了一个没有配置页面的模块。它只是在后台页面添加了一个按钮,我试图对我的模块文件进行ajax调用,但没有成功。 在前端进行ajax调用是可行的(我在modules/mymodule/controller/front/directory中添加了一个ajax.php文件),我尝试为admin做同样的事情,但根本不起作用。 我所做的: 从act

  • 问题内容: $(document).ready(function(){$ .ajax({url:“ http://gdata.youtube.com/feeds/api/users/zdf/playlists?v=2 ”,键入:“ GET”,成功:function(msg){console.log(msg);}});}); 我收到此错误“ XMLHttpRequest无法加载http://gdat