1

jQueryとAjaxを使用してコンテンツをページに動的にロードしており、追加される各オブジェクトにRailsリンクをアタッチしたいと思います。データのリストを生成するための私のコードは次のとおりです。

$.each(data.recipients, function(index, object){
    $("#recipient-list").append("<div id=\""+ object.id +"\" class=\"recipient-list-item "+ object.recipient_type +"\">" + object.email + "<br/> </div>");
});

私が達成したいのは、選択したアイテムを削除するlink_toを追加することです。すなわち。<%= link_to "Remove", delete_mail_recipient_path(object.id), method: :delete, data: {confirm: "You sure?"} %>

jQueryを使用してこのコードをページに追加することは可能ですか、それとも代わりにhtmlを使用する必要がありますか？私はescape_javascriptの使用がいくつかの場所で使用されているのを見てきましたが、私が見る限り、それはjs.erbファイルで使用されていますか？

どんな助けでもありがたいです。

4

2 に答える 2

2

あなたの勘は正しいです:)

コントローラから（アセットではなく）jsファイルを提供している場合は、すべてのRailsビューヘルパー（link_toなど）にアクセスできる必要があります。明らか.erbにファイル名に追加して、render呼び出しが最初にerbで解析することを認識できるようにします。

だから例えば

$.each(data.recipients, function(index, object){
   $("#recipient-list").append("<%= link_to "Remove", delete_mail_recipient_path(object.id), method: :delete, data: {confirm: "You sure?"} %>");
});

あなたが言ったように、あなたは評価をrawまたはで包む必要があるかもしれませんescape_javascript。

ただし、それ以外の場合は、JSを資産に保持することをお勧めします。すべてのURLを追跡するのが面倒な場合は、url_helpers（つまりmail_recipient_path）と同じ名前の変数にそれらを保持して再利用することができます。

PSRailsが追加するデータ属性は次のとおりです。

data-method="delete" data-confirm="Are you sure?"

ドキュメントによると、ajaxリンクのリンクの使用法は次のとおりです。

link_to("Destroy", "http://www.example.com", :method => :delete, :confirm => "Are you sure?")
# => <a href='http://www.example.com' rel="nofollow" data-method="delete" data-confirm="Are you sure?">Destroy</a>

したがって、その例を使用すると、削除するオブジェクトを反映するようにURLを変更できます。しかし、ええ、それでもURLヘルパーをJSで最新の状態に保つ必要があります。

おそらく、次のような関数でそれらをラップします。

var mail_recipient_path;

mail_recipient_path = function(id) {
  return '/mail_recipients/' + id;
};

RailsのURLヘルパーのように使用します。

HTH

于 2012-11-30T12:25:02.833 に答える
1

だから私はjQueryを使ってこれをちょっと回避しました：これがjquery側の私の削除コードです：

// deletes a mail recipient
function delete_recipient(element){
    target = element.attr("target");
    var confirm_delete = confirm("Are you sure you want to remove this recipient?")
    if (confirm_delete){
        $.ajax({
            url: '/delete_mail_recipient',
            type: 'delete',
            dataType: 'json',
            data: {
                id: target
            },
            dataType: 'json',
            success: function(data){
                if (data.result){
                    console.log(target);
                    $("#"+target).remove();
                }else{
                    alert("Sorry something went wrong when trying to delete that recipient.");
                }
            }
        });
    }
}

    // saves the configuration of the mails recipients
    $('#save-config').click(function(){
        var form = $('form#mail-form');
        var valuesToSubmit = $('form#mail-form').serialize();
        console.log(valuesToSubmit);            // 
        save_mail_configuration(valuesToSubmit, form)
    });

そして、これは、削除できるようにしたいページ上の動的オブジェクトのIDを設定するコードです。

$.each(data.recipients, function(index, object){
    $("#recipient-list").append("<div id=\""+ object.id + "\" class=\"recipient-list-item "+ object.recipient_type +"\">" + object.email + "<a class=\"remove-recipient\" target=\""+ object.id + "\" > Remove</a><br/> </div>");
});
于 2012-11-30T17:02:52.747 に答える