栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

如何在特定页面上显示Ajax微调器?

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

如何在特定页面上显示Ajax微调器?

好的,首先,您想隐藏一些东西并显示您的ajax加载器。首先,为链接指定一个ID或唯一的类,以便您可以定位它:

<%= link_to "New Test", new_test_path, :remote => true, :id => 'you_link_id' %>

然后添加一些Javascript以处理对链接的点击:

$('#your_link_id').click(function(){  $('#generate-add-form').children('.ajax-loader').show();  $('#id_of_the_stuff_you_want_to_hide').hide();});

在将响应new_test_path的控制器操作中,在末尾添加以下内容:

respond_to do |format|  format.jsend

在这里,您正在使控制器操作响应您的javascript请求(这就是遥控器的功能)。您还可以添加

format.html
响应html请求。如果您还想将页面提供给禁用了javascript的用户(占所有用户的1-2%),则可能需要这样做。

然后,使用名称创建视图

your_action.js.erb
。注意js,而不是通常的html。在内部,您可以隐藏ajax微调器并显示所需的内容。您甚至可以渲染该页面中定义的局部。

$('#generate-add-form').children('.ajax-loader').hide();$('#id_of_the_stuff_you_now_want_to_show').show();$("#div_containing_your_partial").html('<%= escape_javascript(render 'name_of_your_partial') %>');

如果需要,请克隆我之前创建的该存储库,其中显示了如何执行此操作。

最后,当您开始工作时,您可能想要研究以更漂亮的方式显示和隐藏内容的方法。例如,尝试使用fadeIn代替show和fadeOut代替hide。

另外,最后一个细节。在jQuery中,函数不会被顺序调用。它们都同时被调用。因此,如果要使某些内容仅 某些内容消失 后才
显示,则必须使用回调。这是一个例子:

# without a callback, both actions take place at the same time$("#id").hide();$("#id2").show();# with a callback, show will only be called after hide ends$("#id").hide(function(){  $("#id2").show();});

编辑:要做您想做的事情,您必须删除

:remote => true
链接的一部分,并基本上对Rails已经为您自动完成的工作进行编程。使用以下链接指导自己:

  • http://www.alfajango.com/blog/rails-3-remote-links-and-forms/

  • http://www.alfajango.com/blog/rails-3-remote-links-and-forms-data-type-with-jquery/

但这一切都相当复杂,特别是对于Railsbeginner而言:/



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/449098.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号