I'm currently making an ajax call and attempting to add a class to a DOM element, followed by changing a property value of that class.
Although I am able to add the class successfully, I am facing issues when trying to change the attribute.
<script>
function load_to_be_analysed_count() {
$.ajax({
url: 'experiments/to_be_analysed/count',
dataType: 'text',
type: 'get',
success: function(data) {
// data represents the number of experiments to be analysed, retrieved from the server
if (data >= 0) {
$('#new_experiments').addClass('badge');
console.log($('.badge').css('content')); // DEBUG
$('.badge').css('content', data);
}
},
error: function () {
$('#login-language').html('<p>An error occurred</p>'); // TODO: for debugging purposes. Maybe use console.log
}
});
if ($('#new_experiment').hasClass('badge')) {
$('.badge')
}
}
$(function () {
load_to_be_analysed_count()
})
</script>
Original HTML:
<i id="new_experiments" class="fa fa-bell fa-2x icon-grey"></i>
Upon loading the page, the Inspector shows none when
console.log($('.badger').css('content')); // DEBUGIn the Inspector, I observe that the above HTML has been modified to
Updated HTML:
<i id="new_experiments" class="fa fa-bell fa-2x icon-grey badge" style=""></i>
CSS:
i#new_experiments {
width: 50px;
text-align: center;
vertical-align: middle;
position: relative;
}
.badge:after{
content: "50";
position: absolute;
background: red;
height: 2rem;
top: -0.2rem;
right: 0.2rem;
width: 2rem;
text-align: center;
line-height: 2rem;
font-size: 1rem;
border-radius: 50%;
color: white;
}