1

この質問は、モデルの作成/編集機能をそのインデックス ページに移動することを扱う、昨日尋ねた以前の質問に便乗するものです。私が抱えている最後の問題の1つは、モデルを削除するときに、モデルのリストをリロードしてデータベースの変更を反映するJavaScriptを実行することです。この js は html としてレンダリングされています。関連すると思われるコードは次のとおりです。

私のコントローラーで：

def destroy
  @post = Post.find(params[:id])
  @post.destroy
  flash[:notice] = "Successfully destroyed post."
  @posts = Post.all
  respond_to do |format|
    format.js {render :content_type => 'text/javascript' }
  end
end

部分的な投稿のリスト（私が参照している破棄リンクがあります）：

<table>
  <tr>
    <th>Title</th>
    <th>Content</th>
  </tr>
  <% for post in @posts %>
    <tr>
      <td><%= post.title %></td>
      <td><%= post.content %></td>
      <td><%= link_to "Edit", edit_post_path(post), :class => "edit" %></td>
      <!--
        This is the problem here... I can't seem to get it to work.
        It DOES delete the record, but then gets redirected to /posts/:id
        and displays my javascript as html.
      -->
      <td><%= link_to "Destroy", post , :confirm => 'Are you sure?', :method => :delete, :class => 'destroy' %></td>
    </tr>
  <% end %>
</table>

destroy.js.erb:

$("#post_errors").hide(300);
$("#flash_notice").html("<%= escape_javascript(flash[:notice])%>");
$("#flash_notice").show(300);
$("#posts_list").html("<%= escape_javascript( render(:partial => "posts") ) %>");

ページの読み込み時に読み込まれる JavaScript:

// Setting up the ajax requests for the forms/links.
$(document).ready(function() {
  $("#new_post").submitWithAjax();
  $("a.edit").each(function(){
    $(this).getWithAjax();
  });
  $("a.destroy").each(function(){
    $(this).postWithAjax();
  });
});

// Setting up ajax for sending javascript requests
jQuery.ajaxSetup({
  'beforeSend': function(xhr) {xhr.setRequestHeader("Accept", "text/javascript")}
});

jQuery.fn.submitWithAjax = function() {
  this.submit(function() {
    $.post(this.action, $(this).serialize(), null, "script");
    return false;
  });
  return this;
};

jQuery.fn.getWithAjax = function() {
  this.click(function() {
    $.get(this.href, null, null, "script");
    return false;
  });
  return this;
};

jQuery.fn.postWithAjax = function() {
  this.click(function() {
    $.post(this.href, null, null, "script");
    return false;
  });
  return this;
};

私が使用しているすべてのコードを確認するには、私が投稿した他の質問をチェックしてください。また、Chrome を実行しているときに破棄リンクをクリックすると、Chrome から JavaScript の警告が表示されます。

Resource interpreted as document but transferred with MIME type text/javascript.
4

3 に答える 3

3

この問題に対する答えは、リクエストヘッダーで、ヘッダーがまたは同様のものAcceptに設定されている必要があるということです。text/javascriptこれは、このjs関数で実行する必要があります。

jQuery.ajaxSetup({
  'beforeSend': function(xhr) {xhr.setRequestHeader("Accept", "text/javascript")}
});

リクエストの場合、これは問題なく発生していましたが、リクエストまたはリクエストPOSTを実行したいときに、これが何とか呼び出されないか、無視されていました。HTML5を使用しているので、jQuery/AJAX用のプラグインを使用することを参照する必要があることに気付きました。PUTDELETErails.js

編集と削除を機能させるために、私は自分のlink_toメソッドに対してこれを行いました。

link_to "Edit", edit_post_path(post), "data-remote" => 'true', 'data-method' => 'get'      
link_to "Destroy", post , "data-confirm" => 'Are you sure?', "data-remote" => 'true', "data-method" => 'delete'

それらのhtml属性をアンカータグに追加することで、それらrails.jsを使用していくつかのajaxリクエストを実行したいと判断できました。その後、彼らは働き始めました。

于 2010-10-24T11:08:11.887 に答える
0

私は同じ問題に遭遇しました。解決策は、ここで提供されているスクリプトを使用することでした : http://www.danhawkins.me.uk/2010/05/unobtrusive-javascript-with-rails-2-3-5/
オブジェクトを削除するには、次のコードのようなものを使用します。 

 <%= link_to "Destroy", post , :confirm => 'Are you sure?', :class => 'remote destroy' %>

私にとって、これは魅力のように機能します。

于 2010-09-28T11:38:26.440 に答える
0

MIME タイプを手動で設定すると、問題が発生する可能性があります。JavaScript はapplication/x-javascript代わりにas として送信されることが多いtext/javascriptため、レンダリング エンジンに任せて設定することをお勧めします。

また、.js.rjsこのような単純なケースでは、JavaScript がフレームワークにほとんど依存しないようにするため、この方法を使用することをお勧めします。

于 2010-08-29T19:27:52.020 に答える