CODEWITHSUNDEEP
jquerycssfont-awesomefont-awesome-5
Caverman
Caverman

Reputation: 3727

jQuery to change FontAwesome CSS not working?

I have a MVC project that I'm using Ajax to update a section of a View that includes a FontAwesome 5 icon. FontAwesome is set using CSS class so I assumed that I could easily remove and then add the CSS for the icon. However, when I try making the CSS change through jQuery the CSS never get's set. The add/remove class works as expected on the regular CSS class I'm changing but not on the FA class valid-icon.

This is the initial HTML:

@if (Model.VALID_FLAG == "Y")
{
    <div class="validation__text-success" id="valid-flag>
        <i class="fas fa-check-circle" id="valid-icon"></i> Yes
    </div>
}
else
{
    <div class="validation__text-danger" id="valid-flag>
        <i class="fas fa-times-octagon" id="valid-icon"></i> No
    </div>
}

This is the jQuery from the Ajax call. 

var $html = $(response);
if ($html.hasClass('alert-success')) {
    $("#valid-flag").text('Yes');
    $("#valid-flag").removeClass().addClass('validation__text-success');
    $("#valid-icon").removeClass().addClass('fas fa-check-circle');
}
else if ($html.hasClass('alert-danger')) {
    $("#valid-flag").text('No');
    $("#valid-flag").removeClass().addClass('validation__text-danger');
    $("#valid-icon").removeClass().addClass('fas fa-times-octagon');
}

Upvotes: 1

Views: 1307

Answers (1)

showdev
showdev

Reputation: 29188

The text() method replaces all text content, including the icon element.
It seems that you've opted for html() to replace the icon element and text label at the same time.

Another alternative solution is to modify a specific text node of the element, using contents().
I found this idea in this answer by charlietfl.

Note that, in my example below, duplicate IDs are added to the page. But this is only for demonstration, given that you cannot change the HTML code returned by your response.

var response = [
  `<div class="alert-success" id="valid-flag">
     <i class="fas" id="valid-icon"></i> ???
   </div>`,
  `<div class="alert-danger" id="valid-flag">
     <i class="fas" id="valid-icon"></i> ???
   </div>`
];

function processResponse(response) {

  var $html = $(response);

  if ($html.hasClass('alert-success')) {

    $html.contents().last()[0].textContent = 'Yes';
    $html.removeClass().addClass('validation__text-success');
    $('#valid-icon', $html).removeClass().addClass('fas fa-check-circle');

  } else if ($html.hasClass('alert-danger')) {

    $html.contents().last()[0].textContent = 'No';
    $html.removeClass().addClass('validation__text-danger');
    $('#valid-icon', $html).removeClass().addClass('fas fa-frown');

  }

  $('body').append($html);

}


$.each(response, function(i, v) {
  processResponse(v);
});
.validation__text-success {
  background-color: lightgreen;
}

.validation__text-danger {
  background-color: pink;
}

#valid-icon {
  margin: 0 .5em 0 0;
}
<link href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 1

Related Questions