Unable to display Bootstrap Glyphicons within a div container

I've created the following code snippet:

function acceptButtonClick(th) {
    var id = $(th).attr('data-id');
    $(th).parent().parent().find('div.Declined').attr('class', "Approved");

    $(th).parent().parent().find('div.Requested').attr('class', "Approved");

    $.ajax({
        type: "POST",
        url: "/TableRequest/AcceptRequest",
        data: { 'id': id },
        success: function (msg) {
        }
    });
    $(th).hide();
    $(th).parent().find('button.decline-button').show();
    $(th).parent().parent().find('span.decline-img').hide();
    $(th).parent().parent().find('span.accept-img').show();

    $(th).parent().parent().find('span.requested-img').hide();
}
function declineButtonClick(th) {

    tempId = $(th).attr('data-id');
    $('#dialog').attr('data-id', tempId);   
    $("#dialog").modal('show');
}
$(document).ready(function () {

    $('#requestTable').dataTable({
        "bServerSide": true,
        "sAjaxSource": "TableRequest/GetDataTable",
        "bProcessing": true,
        "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
            $('td', nRow).find('button').attr('data-id', aData.ID);
            $('td', nRow).find('button.accept-button').click(function () {
                acceptButtonClick(this);
            });
            $('td', nRow).find('button.decline-button').click(function () {
                declineButtonClick(this);
            });
            if ($('td:eq(1)', nRow).find('div').attr('class') == "Approved") {
                $('td', nRow).find('button.accept-button').hide();
                $('td', nRow).find('span.decline-img').hide();
                $('td', nRow).find('span.requested-img').hide();
            }
            else if ($('td:eq(1)', nRow).find('div').attr('class') == "Declined") {
                $('td', nRow).find('button.decline-button').hide();
                $('td', nRow).find('span.accept-img').hide();
                $('td', nRow).find('span.requested-img').hide();
            }               
            else if ($('td:eq(1)', nRow).find('div').attr('class') == "Requested") {
                $('td', nRow).find('span.accept-img').hide();
                $('td', nRow).find('span.decline-img').hide();
            }            
        },        
        "aoColumns": [
        { "data": "ID", "visible": false, bSortable: false, bSearchable: false },
        { "data": "Name" },
        {
            "data": "VacationRequestStatus",
            bSortable: false,
            bSearchable: false,
            "mRender": function (data, type, full) {
                return '<div class = "' + data + '"><span class="glyphicon icon-question-sign accept-img" height = "25px" /><span class="glyphicon glyphicon-ok decline-img" height = "25px" /><span class="glyphicon glyphicon-remove requested-img" height = "25px" /></div>';
            }
        },
        { "mData": "Position", bSortable: false, bSearchable: false },
        { "mData": "DateStart", bSortable: false, bSearchable: false },
        { "mData": "DateEnd", bSortable: false, bSearchable: false },
        {
            bSortable: false,
            bSearchable: false,
            data: null,
            className: "center",
            defaultContent: '<button class="btn btn-danger decline-button">Decline</button> <button class="btn btn-primary accept-button">Accept</button>'
        }
        ]
    });
    $('button.ok-request').click(function () {
        var tempId = $('#dialog').attr('data-id');
        var message = $('textarea#commentForDecline').val();
        $.ajax({
            type: "POST",
            url: "/TableRequest/DeclineRequest",
            data: { 'message': message, 'id': tempId },
            success: function (msg) {
            }
        });

        $("#dialog").modal('hide');
        $('button[data-id="' + tempId + '"]').parent().parent().find('div.Approved').attr('class', "Declined");       
        $('button[data-id="' + tempId + '"]').parent().parent().find('div.Requested').attr('class', "Declined");       
        $('button[data-id="' + tempId + '"]').parent().parent().find('span.decline-img').show();
        $('button[data-id="' + tempId + '"]').parent().parent().find('span.accept-img').hide();
        $('button[data-id="' + tempId + '"]').parent().find('button.decline-button').hide();
        $('button[data-id="' + tempId + '"]').parent().find('button.accept-button').show();
        $('button[data-id="' + tempId + '"]').parent().parent().find('span.requested-img').hide();
        $('textarea#commentForDecline').val('');
    });
});

I have made changes to use Bootstrap Glyphicons instead of <img>. I modified the selectors by replacing <img> with <span>. The line that included <img> has been commented out. Everything seems to be working well with these changes. However, feel free to ask for further assistance if needed!

Answer №1

I believe the issue lies in using the wrong class for the question mark icon. Please update from icon-question-sign to

glyphicon glyphicon-question-sign

For a demonstration, check out this JSFiddle link where I replaced your data variable with "test". All icons are now displaying correctly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using a combination of different materials on a single mesh can lead to problems with z-index and clipping

Currently in my threejs project, I am attempting to apply two different materials to a mesh. One material has a solid color, while the other has a canvas texture. To achieve this, I have created both materials and added them to an array, which is then assi ...

Using ajax for transferring form data to a different php page

Hello everyone, I'm in need of assistance. I have a form on one PHP page and I want to use AJAX to pass the data to another PHP page that will update my database and then return the results. <form name="profile" class="profile"> < ...

How can `localePath()` be utilized to create a dynamic route with Nuxt i18n?

I currently have this route set up in my i18n.config.js: { pages: { 'rental/_id': { nl: '/verhuur/:id', en: '/rental/:id', de: '/mietbestand/:id', }, } } When attempting to link to this page in my ...

Looking for a way to deactivate the loader after the submission is complete

Seeking to implement a loader on my asp.net webforms app. Here's my javascript loader: function loading() { $("#loading").show(); } function loaded() { $("#loading").hide(); } html loader ...

Triggering a fancybox by selecting an option from a dropdown menu and sending the chosen value to it automatically

<select name="mySelectboxsituation_found" id="mySelectboxsituation_found"> <option value="100">Firecall</option> <option value="200">FireAlarm</option> <option value="300">FireAlarm2</option> <option value="4 ...

Issue with alignment in the multiselect filter of a React data grid

In React Data Grid, there is a issue where selecting multiple filter options messes up the column headers. Is there a solution to display selected filter options above a line in a dropdown rather than adding them to the column header? The column header siz ...

Disable the mouseenter event in jQuery when the window is resized

I am facing a challenge with my code. I have two different functions that are triggered based on the screen size - one for desktop and one for mobile. The issue arises when transitioning from a desktop to a mobile view, as the hover/mouseenter effect still ...

Remove the </div> text and replace it with nothing

I'm attempting to substitute the end tag div with an empty string. Here is my code: $('#textDiv').html().replace(/'</div>'/g,'').replace(/<div>/g,'\n') This is the HTML: <div id='tex ...

What is the key element missing from my code while attempting to integrate Threejs into React?

I recently undertook the task of converting a project from vanilla Three.js to React. For reference, here is the original project: https://codepen.io/Mamboleoo/pen/rNmRqeK And here is the code I have been working on: You can view the code in CodeSandbox ...

Modify the background color of a specific bar across multiple charts when hovering or clicking - utilizing chart.js

I have multiple chart.js canvas elements on a webpage. The goal is to be able to quickly identify and highlight the same bar value across all the charts. For example, when I hover over a bar called "Thu" on the first chart, I want to automatically search f ...

Enhance user interactivity on your website by incorporating jQuery and CSS for

<table id="tab"> <tr aaa="one" bbb="ooo"><td>xxx</td><</tr> <tr aaa="two" bbb="one"><td>xxx</td><</tr> <tr aaa="three" bbb="one"><td>xxx</td><</tr> ...

Creating a static footer in AngularJS with material design: A step-by-step guide

This is how I've set up my webpage design. <div layout="column" layout-fill ng-controller="MainCtrl as mc"> <header> <md-toolbar md-scroll-shrink> <div layout="row" layout-align="center center" flex> ...

Improving performance by incorporating multiple SVGs or Icon Fonts onto a webpage

As I was planning to incorporate SVG for the numerous icons on my website, concerns have been raised about the potential impact on site speed. With multiple search results on each page and several icons per result, another developer advised against using S ...

Retrieve the response text using native JavaScript

Dealing with the nature of asynchronous XMLHTTPRequest in JavaScript can be tricky. I faced a challenge where I needed to return the responseText value but found it impossible due to this nature. To overcome this, I came up with a workaround by calling a f ...

Adaptive Positioned Image Display

I currently have a Section with four blocks of content. Along the right-hand side of the screen, there are some images (as shown in this example) that I want to position absolutely. However, I am encountering an issue where these images overlap with the te ...

Obtain the rotational value in 3D CSS using JavaScript by extracting it from the matrix3d()

My element has been 3D transformed in the following way: .foo { transform: rotateX(-30deg) rotateY(35deg); } Now, I am looking to retrieve these values using JavaScript. Extracting the 3D matrix is simple: var matrix = $('.foo').css('tr ...

The event listener is failing to trigger the JavaScript function upon click

I am experiencing an issue with an onClick listener triggering an AJAX call to a PHP script. It seems that the click is not being recognized. Any suggestions on what could be causing this? Index.html <html> <head> <script src="//ajax.googl ...

Every form submission leads to an increment in the number of ajax calls being made

When attempting to submit my form using ajax, I encountered an issue with the code. Initially, the ajax call does not trigger on the first click. I have to click it a second time for the ajax to work. Additionally, with each submission, the number of aja ...

Implementing mouse hover functionality for fieldset in EXTJS

I am looking to enhance the following code snippet by adding a mouse hover event that changes the background color of the fieldset item and displays an image next to it. Can someone assist me with this modification? var mainGroup = { ...

Discovering the total number of tickets based on priority in an array with Javascript

I have the following data set { agent_id:001, priority:"High", task_id:T1 }, { agent_id:001, priority:"High", task_id:T1 }, { agent_id:001, priority:"Medium", task_id:T1 } { agent_id:002, priority:"High", task_id:T1 ...