Question

I am dynamically loading content into my page using jQuery and Ajax and I would like to attach a Rails link to each object being added. My code to generate the list of data is:

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

What I want to achieve is add a link_to that will delete the selected item. ie. <%= link_to "Remove", delete_mail_recipient_path(object.id), method: :delete, data: {confirm: "You sure?"} %>

Is it possible to add this code to the page using jQuery or do I need to use html instead? I’ve seen the use escape_javascript used a few places but as far as I can see that is used in js.erb files?

Any help would be appreciated thanks.

Answer 1

So I kinda worked around this using jQuery: here’s my delete code on the jquery side:

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

And this is the code where I set my id’s for the dynamic objects on the page that I want to be able to remove:

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