显示微调Rails 3 UJS获取类型错误

我有三个链接在我的Rails 3应用程序中使用UJS加载下面的容器中的信息。为了完成体验，我想在加载信息时显示一些“正在加载...”文本。所以我使用Simone Carletti的post中的一些jQuery来尝试完成它。不过，根据jQuery的不同，当第一个链接被点击时会发生两件事情。（在这两种情况下，被点击其他两个当什么也没发生。）显示微调Rails 3 UJS获取类型错误

考虑下面的代码，我得到TypeError: 'undefined' is not a function (evaluating '$("#tabs-1").js(data)')

因此，要解决这个问题我改变我的jQuery来$("#tabs-1").html(data);。然后：

类型错误消失
'正在载入' 不显示
点击我的第一个环节呈现如各种未格式化的，多余的代码：
- $（“#tabs -1" ）。html的（“ \ n文本：</H4> \ n \ n 文本</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行动的一个例子：

def profile_about 
    @profile = Profile.find(params[:id]) 
    respond_to do |format| 
    format.js { render :layout => nil } 
    end 
end

我profile_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>：

<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&#47;ty9haXTCWxYTOZB4DxQ90uEGTIhNo8="/>

UPDATE：

如果我删除的respond_to format.js和format.xml，只保留format.html，取出profile_about.js.erb，并保持绑定，html的（数据），控制台说：

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

来源

2011-10-31 tvalent2

我通过用this question中的jQuery代替了我正在使用的jQuery（上面）来实现它。这是很多比我正在工作的jQuery更简单。

$(function() { 
    $('#loading') 
     .hide() // hide initially 
     .ajaxStart(function(){ 
      $(this).show(); 
     }) 
     .ajaxStop(function(){ 
      $(this).hide(); 
     }) 
});

我在上面的问题中对代码做了一些小的修改，使其工作。特别是我删除了：display:none在我的CSS中，format.html和format.xml在我的控制器操作中。

来源

2011-11-02 01:59:27 tvalent2

您目前有三个具有相同ID的链接;这是无效的HTML并会导致问题。

不知道你在用.js这个东西尝试什么;我甚至不认为这是一个jQuery方法。

你可以用JS或HTML来做到这一点，但我不会推荐这两种方式 - 删除xml和js respond_to，只留下html。删除JS erb文件。

在“ajax：success”绑定中，将其保存为.html(data)。

这应该是你需要做的，假设其他设置都正确。

您正在使用哪个版本的Rails？

来源

2011-10-31 17:43:52

好吧，看起来我没有正确设置一切。删除'respond_to' format.js（和js.erb文件）不再在单击链接后呈现部分。 – tvalent2

@ tvalent2控制台中的任何内容？什么版本的Rails？我的测试也呈现出部分，尽管我不认为*这很重要。你肯定使用jQuery（不是Prototype）？ –

@tvalent Rake路线显示您的期望？模板在正确的地方？ –

显示微调Rails 3 UJS获取类型错误

回答

相关问题