为Rails 3 UJS显示微调器会出现Type错误 [英] Showing spinner for Rails 3 UJS gets Type error
问题描述
我的Rails 3应用程序中有三个链接，使用UJS将信息加载到它们下面的容器中。为了完成体验，我想在信息加载时显示一些正在加载...文本。所以我使用了Simone Carletti的帖子尝试完成它。但是，根据jQuery，单击第一个链接时会发生两种不同的事情。 （在这两种情况下，单击其他两个时都没有任何反应。）
I have three links in my Rails 3 app that load information in the container beneath them using UJS. To complete the experience I want to display a bit of 'Loading...' text while the information loads. So I used some jQuery from Simone Carletti's post to try to accomplish it. Depending on the jQuery, though, two different things happen when the first link is clicked. (In both scenarios, nothing happens when the other two are clicked.)
- 根据下面的代码，我得到
TypeError ：'undefined'不是函数（评估'$（＃tabs-1）。js（data）'）
- Given the code below I get
TypeError: 'undefined' is not a function (evaluating '$("#tabs-1").js(data)')
所以要解决这个问题，我将我的jQuery更改为 $（＃tabs-1）。html（data）; 。然后：
So to fix that I change my jQuery to $("#tabs-1").html(data);. Then:
- TypeError消失
- '正在加载''没有显示
- 点击我的第一个链接会呈现各种未格式化的无关代码，例如：
- $（＃tabs-1）。html（
\ n文字：< / h4> \ n
\ n
text。< / li> \ n< / div> \ n< / div> \ n
生成的HTML：
<div id="tabs"> <ul id="infoContainer"> <li><a href="/profiles/1/profile_reviews" class="active" data-remote="true" id="profile_loader">Cred</a></li> <li><a href="/profiles/1/profile_about" class="inactive" data-remote="true" id="profile_loader">About</a></li> <li><a href="/profiles/1/profile_credits" class="inactive" data-remote="true" id="profile_loader">Credits</a></li> <span id="loading">Loading...</span> </ul> <div id="tabs-1"> # load info here </div> </div>我的
profiles_controller.rb 加载信息的操作：An example of my
profiles_controller.rbaction that loads information:def profile_about @profile = Profile.find(params[:id]) respond_to do |format| format.js { render :layout => nil } end end我的个人资料_about.js.erb ：
$( "#tabs-1" ).html( "<%= escape_javascript( render (:partial => "profile_about" ) ) %>" );我的application.js：
$(function() { var toggleLoading = function() { $("span#loading").toggle() }; $("#profile_loader") .bind("ajax:loading", toggleLoading) .bind("ajax:complete", toggleLoading) .bind("ajax:success", function(event, data, status, xhr) { $("#tabs-1").js(data); }); });在我的CSS中：
span#loading { float:right; padding:10px 5px; color:#666666; }在我的
< head>：In my
<head>:<script src="/javascripts/jquery.js?1316133561" type="text/javascript"></script> <script src="/javascripts/jquery-ui.js?1316133957" type="text/javascript"></script> <script src="/javascripts/jquery-ujs.js?1316133561" type="text/javascript"></script> <script src="/javascripts/application.js?1317960952" type="text/javascript"></script> <meta name="csrf-param" content="authenticity-token"/> <meta name="csrf-token" content="k1RB3GSMFweZ/ty9haXTCWxYTOZB4DxQ90uEGTIhNo8="/>更新：
如果我删除了respond_to format.js和format.xml并仅保留format.html，请删除profile_about.js.erb，并将绑定保持为.html（数据），控制台说：
If I remove the respond_to format.js and format.xml and keep only format.html, remove the profile_about.js.erb, and keep the binding as .html(data), the console says:
ActionView:MissingTemplate (Missing template profiles/profile_about with {:handlers=>[:rxml, :builder, :rjs, :erb, :rhtml], :locale=>[:en, :en], :formats=>[:html] in view paths "/Users/me/Desktop/app/views", "/Users/me/Desktop/app/vendor/plugins/paperclip/app/views"): app/controllers/profiles_controller.rb:87:in 'profile_about' #format.html app/controllers/profiles_controller.rb:86:in 'profile_about' #the respond_to to |format| Rendered /Library/Ruby/Gems/1.8/gems/actionpack-3.0.5/lib/action_dispatch/middleware/templates/rescues/missing_template.erb within rescues/layout
推荐答案
我通过使用jQuery替换我使用的jQuery（上面）来实现它此问题。它比我正在使用的jQuery简单 。
I got it working by replacing the jQuery I was using (above) with jQuery found in this question. It is much simpler than the jQuery I was working off of.
$(function() { $('#loading') .hide() // hide initially .ajaxStart(function(){ $(this).show(); }) .ajaxStop(function(){ $(this).hide(); }) });我在上面的问题中对代码进行了一些小改动，以使其正常工作。特别是我删除了：
display：nonein my css，format.html和format.xml in my controller action。I also made a few minor changes to the code in my question above to make it work. In particular I removed:
display:nonein my css, and format.html and format.xml in my controller action.这篇关于为Rails 3 UJS显示微调器会出现Type错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
- $（＃tabs-1）。html（
