I'm attempting to create a notification box similar to this one:
https://i.sstatic.net/HIJPJ.png
As shown, there is a .gif image positioned at the top that will be hidden once the content loads. Now, I want to insert the following image into a <div>:
https://i.sstatic.net/M3CUV.gif
Below is my code using AJAX:
function notification(){
$(".notifications_list").html(/* insert this path: /myfolder/img/progress.gif */ );
$.ajax({
url : '/myweb/files/notification.php',
dataType : 'JSON',
success : function (notification_system) {
$(".notifications_list").html(/* remove progress.gif image */ );
if(notification_system.success === 1){
$(".notifications_list").html(notification_system.notifications);
} else {
alert('something is wrong');
}
}
});
}
Specifically, I need assistance with the following lines:
$(".notifications_list").html(/* insert this path: /myfolder/img/progress.gif */ );
$(".notifications_list").html(/* remove progress.gif image */ );
How can I achieve this? In other words, how can I add an image by its path to the HTML and then remove it?