CODEWITHSUNDEEP
jquery
irwan dwiyanto
irwan dwiyanto

Reputation: 690

Change font awesome class realtime without refresh

How to replace a class in realtime without reload or refresh if the value is equal to the input value ??

ex :

<input id="status_action" name="status_action" value="1"  type="text" readonly="readonly">

<a href="javascript:void(0)" id="status_alert"  class="btn btn-success btn-xs"><i class="fa fa-envelope-o" aria-hidden="true"></i> unread </a>  

<script>
$(document).ready(function(){
 if ($('#status_action').val() == 0 ) {
    $('#status_alert').find('i').addClass('fa fa-envelope-open-o').removeClass('fa fa-envelope-o');  
 }
})
</script>

Upvotes: 0

Views: 568

Answers (1)

haxxxton
haxxxton

Reputation: 6442

You should hook into the input event on your input, then use toggleClass to switch just the necessary classes.

$('#status_action').on('input', function(){
    // get the number value, or 0 from the input
    var value = parseInt($(this).val(), 10) || 0;
    if(value === 0){ // if our value is strictly equal to 0
        // find all closed envelopes, and toggle their classes to open
        $('#status_alert .fa-envelope-o').toggleClass('fa-envelope-o fa-envelope-open-o');
    }else{ // otherwise
        // find all open envelopes, and toggle their classes to closed
        $('#status_alert .fa-envelope-open-o').toggleClass('fa-envelope-o fa-envelope-open-o');
    }
})

JSFIDDLE

UPDATE

Convert this to a reuseable function, in the chance that you end up using another piece of code to update the readonly input after the page has finished loading

HTML

<a href="javascript:void(0)" id="status_alert" class="btn btn-success btn-xs">
    <i class="fa fa-envelope-o" aria-hidden="true"></i>&nbsp;<span>unread</span>
</a>

JS

var toggleEnvelopeIcon = function(){
    // get the number value, or 0 from the input
    var value = parseInt($('#status_action').val(), 10) || 0;
    if(value === 0){ // if our value is strictly equal to 0
        // find all closed envelopes, and toggle their classes to open
        $('#status_alert .fa-envelope-o').toggleClass('fa-envelope-o fa-envelope-open-o');
        $('#status_alert span').text('read');
    }else{ // otherwise
        // find all open envelopes, and toggle their classes to closed
        $('#status_alert .fa-envelope-open-o').toggleClass('fa-envelope-o fa-envelope-open-o');
        $('#status_alert span').text('unread');
    }
}
$('#status_action').on('input', toggleEnvelopeIcon);
toggleEnvelopeIcon();

Updated JSFIDDLE

CSS + JS OPTION

Personally, i prefer this option, i would rather have JS only toggle a single class, and CSS handle the show/hide of the correct icons/text, this way i dont have to worry about putting text values into my JS (doesnt sit right with me about view code in the logic stuff).

HTML

<a href="javascript:void(0)" id="status_alert" class="btn btn-success btn-xs has-unread">
    <span class="show-if-unread"><i class="fa fa-envelope-o" aria-hidden="true"></i>&nbsp;unread</span>
    <span class="show-if-read"><i class="fa fa-envelope-open-o" aria-hidden="true"></i>&nbsp;read</span>
</a>

CSS

.has-read .show-if-read,
.has-unread .show-if-unread{
    display:inline-block;
}
.has-read .show-if-unread,
.has-unread .show-if-read{
    display:none;
}

JS

var toggleEnvelopeIcon = function(){
    // get the number value, or 0 from the input
    var value = parseInt($('#status_action').val(), 10) || 0;
    if(value === 0){ // if our value is strictly equal to 0
        // toggle alert classes
        $('#status_alert').removeClass('has-unread').addClass('has-read');
    }else{ // otherwise
        // toggle alert classes
        $('#status_alert').removeClass('has-read').addClass('has-unread');
    }
}

CSS + JS JSFIDDLE

Upvotes: 2

Related Questions