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

我的Rails 3应用程序中有三个链接，它们使用UJS将信息加载到它们下面的容器中。为了完成体验，我想在加载信息时显示一点“加载…”文本。所以我使用了Simone Carletti的jQuery来实现它。不过，根据jQuery的不同，单击第一个链接时会发生两种不同的情况。（在这两种情况下，单击其他两个时不会发生任何事情。）

• 根据下面的代码，我得到了

  TypeError:“undefined”不是一个函数（计算“$”（“#tabs-1”）.js（数据）

为了解决这个问题，我将jQuery改为

$（“#tabs-1”）.html（数据）。然后：


打字错误消失了
“正在加载…”不显示
单击我的第一个链接会呈现各种未格式化的无关代码，如：

$（#tabs-1”）.html
\n文本：\n
\n
文本。
\n\n\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>

我的个人资料\u关于.js.erb:

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

$( "#tabs-1" ).html( "<%= escape_javascript( render (:partial => "profile_about" ) ) %>" );

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

span#loading {
    float:right;
    padding:10px 5px;
    color:#666666;
}

<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="/>

在我的CSS中：

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

$( "#tabs-1" ).html( "<%= escape_javascript( render (:partial => "profile_about" ) ) %>" );

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

span#loading {
    float:right;
    padding:10px 5px;
    color:#666666;
}

<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="/>

在我的
中：

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

$( "#tabs-1" ).html( "<%= escape_javascript( render (:partial => "profile_about" ) ) %>" );

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

span#loading {
    float:right;
    padding:10px 5px;
    color:#666666;
}

<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="/>

您当前有三个相同ID的链接；这是无效的HTML，将导致问题

我不确定你在用
.js
做什么；我甚至不认为这是一种jQuery方法

您可以使用JS或HTML来实现这一点，但我不建议两者都使用——删除xml和JS respond_to，只保留HTML。删除JS erb文件

在“ajax:success”绑定中，将其保持为
.html（data）

这应该是所有你需要做的，假设其他一切都设置正确

您使用的是哪个版本的Rails？
我通过使用中的jQuery替换我正在使用的jQuery（如上所述）来实现它。它比我正在使用的jQuery简单得多

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

我还对上面问题中的代码做了一些小改动以使其正常工作。特别是我删除了css中的
display:none
，以及控制器操作中的format.html和format.xml。
看来我没有正确设置所有内容。删除
response\u to
format.js（和js.erb文件）单击链接后不再呈现分部。@tvalent2控制台中的任何内容？Rails的哪个版本？我的测试也呈现分部，尽管我认为这无关紧要。而且您肯定在使用jQuery（而不是Prototype）“@tvalent2 Rake routes显示了您的期望？模板在正确的位置？@tvalent2将其放在github上；我会看一看——对我来说一切都很好。如果您回答我提出的所有问题而不是一两个问题，那也最好，因为这样我就不得不再问一次，这很无聊。”。