使用jQuery動態添加嵌入式ruby html

我使用jQuery和Ajax動態地將內容加載到我的頁面中，並且我想爲每個添加的對象附加一個Rails鏈接。我的代碼生成數據列表是：使用jQuery動態添加嵌入式ruby html

$.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文件中使用？

任何幫助，將不勝感激謝謝。

來源

2012-11-30 Hugs

所以我還挺解決這個使用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-30 17:02:52 Hugs

你的預感是正確的:)

如果你是從你的控制器（而非資產）服務的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）類似的命名變量中並重用它們。

P.S.該數據ATTRS是Rails添加如下：

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; 
};

使用它，就像在軌道上的網址助手。

HTH

來源

2012-11-30 12:25:02 stuartc

嘿謝謝你的回覆，我只是想知道你有一個想法，如何指定你想刪除的對象？當我使用這個data-method =「delete」data-confirm =「你確定嗎？」在我的一個href中，顯示的模型有它的刪除方法，叫做我指定的路徑。 – Hugs

根據文檔，鏈接到ajax鏈接的用法是： link_to（「Destroy」，「http://www.example.com」，：method =>：delete，：confirm =>「你是當然？「）＃=>Destroy – stuartc

使用jQuery動態添加嵌入式ruby html

回答

相關問題