使用FontAwesome更改文本时如何“刷新”（重新渲染）按钮？

Question

I have the following UI:

and from there I need to change dynamically the button Archive and Unarchive as well as the icon from FontAwesome depending on the action taken and the response from the backend. The response basically looks like:

{"row_id":"12518","status":true}

In a few words:

• In the blue row (archived item): if I click on Unarchive button and the response is true I should: remove the background color, change the button text to Archive , change the button class from unarchive-form to archive-form and change the FontAwesome icon class from fa fa-arrow-circle-up to fa fa-arrow-circle-down .
• In the other row (non archived item): if I click on Archive and the response is true then I should: add the blue background, change the button text to Unarchive , change the button class from archive-form to unarchive-form and change the FontAwesome icon class from fa fa-arrow-circle-down to fa fa-arrow-circle-up .

I have almost everything covered (and I will show the sources for just one case since it's pretty much the same and I don't want to make a big post):

$.ajax({
    url: '/ajax/forms/archive',
    type: 'POST',
    dataType: 'json',
    data: {
        form_id: ids
    }
}).done(function (response) {
    $.each(response, function (index, value) {
        var this_row_tr = $('input[data-form=' + value.row_id + ']').closest('tr'),
            this_btn = this_row_tr.find('.archive-form');

        if (value.status === true) {
            // here I add the background color to the TR 
            this_row_tr.addClass('info');
            // here I swap the button class 
            this_btn.removeClass('archive-form').addClass('unarchive-form');
            // here I swap the button text and also the whole FontAwesome part
            this_btn.text('<i class="fa fa-arrow-circle-up" aria-hidden="true"></i> Unarchive');
        } else if (value.status === false) {
            this_row_tr.addClass('error');
            all_archived = false;
        }
    });

    if (all_archived) {
        toastr["success"]("The forms were archived successfully.", "Information");
    } else {
        toastr["error"]("Something went wrong, the forms could not be archived.", "Error");
    }
}).error(function (response) {
    console.log(response);
    toastr["error"]("Something went wrong, the forms could not be archived.", "Error");
});

But the problem comes when I change the text for the FontAwesome since I get the plain text instead of the icon. For example clicking on Unarchive in the first row will become into this:

As you can see there everything is fine but the FontAwesome icon. Is there any way to refresh the button so the changes takes effect? Or do you know any other way to achieve this?

Answer 1

You don't have to change the text like you are doing now, use .html() instead and replace only necessary strings, this way you maintain the structure of the button's content.

Try this:

// this one is for the Archive action
$.each(response, function (index, value) {
    var this_row_tr = $('input[data-form=' + value.row_id + ']').closest('tr');
    var archiveToUnarchive = this_row_tr.find('.btn[class*="archive"]');
    if (value.status === true) {
        this_row_tr.addClass('info');
        archiveToUnarchive.toggleClass('archive-form unarchive-form')
                .html(archiveToUnarchive.html()
                .replace('Archive', 'Unarchive')
                .replace('fa-arrow-circle-down', 'fa-arrow-circle-up'));
    } else if (value.status === false) {
        this_row_tr.addClass('error');
        all_deleted = false;
    }
});

// this one is for the Unarchive action
$.each(response, function (index, value) {
    var this_row_tr = $('input[data-form=' + value.row_id + ']').closest('tr');
    var unarchiveToArchive = this_row_tr.find('.btn[class*="archive"]');

    if (value.status === true) {
        unarchiveToArchive.toggleClass('archive-form unarchive-form')
                .html(unarchiveToArchive.html()
                .replace('Unarchive', 'Archive')
                .replace('fa-arrow-circle-up', 'fa-arrow-circle-down'));
        this_row_tr.removeClassName('info');
    } else if (value.status === false) {
        this_row_tr.addClass('error');
        all_deleted = false;
    }
});

Answer 2

As per my understanding you only need the functionality for Archieve and UnArchieve,

Could you please try the following script

$(document).ready(function(){

    $(".unarchive-form").click(unArchieveToArchieve);
    $(".archive-form").click(archieveUnArchieve);

    function unArchieveToArchieve(){
        var btn = $(this);
        var rowId = $(this).parent().parent().parent().find(".to-upload").attr("data-form");

        var response = [{"row_id":rowId,"status" :true}];

        $.each(response, function (index, value) {
            var this_row_tr = $('input[data-form=' + value.row_id + ']').closest('tr');

            if (value.status === true) {
                this_row_tr.attr('class','');
                $(btn).text("Archieve");
                $(btn).removeClass("unarchive-form");
                $(btn).addClass("archive-form");
                $(btn).click(archieveUnArchieve)
            } else if (value.status === false) {
                this_row_tr.attr('class','error');
                all_deleted = false;
            }
        });
    }
    function archieveUnArchieve(){

        var btn = $(this);
        var rowId = $(this).parent().parent().parent().find(".to-upload").attr("data-form");

        var response = [{"row_id":rowId,"status" :true}];

        $.each(response, function (index, value) {
            var this_row_tr = $('input[data-form=' + value.row_id + ']').closest('tr');

            if (value.status === true) {
                this_row_tr.attr('class','info');
                $(btn).text("Unarchive");
                $(btn).removeClass("archive-form");
                $(btn).addClass("unarchive-form");
                $(btn).click(unArchieveToArchieve)
            } else if (value.status === false) {
                this_row_tr.attr('class' , 'error');
                all_deleted = false;
            }
        });

    }

});

I hope this will solve your problem.

Let me know if you need further details.