Showing the bootstrap symbol at the same time as the jqgrid heading words

I'm having trouble displaying a twitter bootstrap icon in the jqgrid caption section. The icon is not showing up despite my efforts. Here's the fiddler link: https://jsfiddle.net/99x50s2s/31/

Here's the code I've tried:

jQuery("#sg1").jqGrid({
    datatype: "local",
    gridview: true,
    loadonce: true,
    shrinkToFit: false,
    autoencode: true,
    height: 'auto',
    viewrecords: true,
    sortorder: "desc",
    scrollrows: true,
    loadui: 'disable',
    colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
    colModel:[
        {name:'id',index:'id', width:60, sorttype:"int"},
        {name:'invdate',index:'invdate', width:90, sorttype:"date"},
        {name:'name',index:'name', width:100},
        {name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
        {name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},     
        {name:'total',index:'total', width:80,align:"right",sorttype:"float"},      
        {name:'note',index:'note', width:150, sortable:false}       
    ],
    caption: "<i class'glyphicon glyphicon-alert'></i> Pending"
});

Current Output:

Expected:

Am I missing something? Can you help me figure out how to display the bootstrap icon in jqgrid caption?

javascriptjquerycsstwitter-bootstrapjqgrid

Answer №1

There's a simple mistake here. In your code, you are missing the =:

 caption: "<i class'glyphicon glyphicon-alert'></i> Pending"

The correct version should be:

 caption: "<i class='glyphicon glyphicon-alert'></i> Pending"

You can see the corrected code in action at this link: https://jsfiddle.net/99x50s2s/33/

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

Ensure that the date is valid using Joi without transforming it into UTC format

Is there a method to validate a date using @joi/date without converting it to UTC? I need to ensure the date is valid before storing it in the database. Here's what I've attempted: const Joi = require('joi').extend(require('@joi/ ...

javascriptnode.jstypescriptjoi

Best way to extract objects from an array by filtering based on the nested property value at nth level in JavaScript

Looking for a Solution: Is there an efficient method to filter out objects from an array based on a specific property value without using recursion? The Issue: While the recursive approach works for filtering, it struggles with performance due to a large ...

javascriptarraysobjectrecursion

Retrieving the source code via JQuery Ajax

I've been implementing JQuery Ajax on my website and encountered an issue. It's working perfectly fine on our test server, but when I transferred it to our live server, the Ajax response is just the source code of the website itself. Here's ...

javascriptphpjqueryajax

Error: $e.data() is incompatible with yii.confirm box

After upgrading to yii 2 stable, the code I used for the confirm box is no longer working. The error message I am now encountering is: "$e.data() is not a function." Upon further investigation, it seems that the type of $e is a function. yii.allowAction ...

phpjqueryyiiyii2bootbox

Searching through text in Node JS using Mongoose for Full-Text queries

I am facing an issue while attempting to perform a full-text search on an array of strings using Mongoose. The error message I receive is as follows: { [MongoError: text index required for $text query] name: 'MongoError', message: 'text ...

javascriptnode.jsmongodbmongoosefull-text-search

When the cursor is placed over it, a new div is layered on top of an existing

Currently, I am working on a project with thumbnails that animate upon hovering using jQuery. One of the challenges I have encountered is adding a nested div inside the current div being hovered over. This nested div should have a background color with som ...

jquerycsshoveraddclass

Items that do not commence from the start of the list

I'm encountering an issue with my unordered list where the li elements are not rendering properly. The first element seems to have a margin, and I'm unsure why this is happening. How can I fix this problem? function App() { return ( < ...

htmlcssreactjs

Retrieve the content of all textareas in a specific order that can be

Is there a way to collect all the textareas in a sortable order and then insert them into another textarea? Option 1: Use $("div textarea").val(); Option 2: Make use of $("div textarea").text(); The Issue: Option 1: Value gets updated with new input bu ...

javascriptjqueryajaxjquery-ui

Enhance your ChartJS visualizations by updating your charts with multiple datasets

Seeking a way to update both datasets in my chart without having to destroy and recreate it. chart2 = window.TrafficChart; chart2.data.labels = data.timestamps; console.log(data.traffic_tx); chart2.data.datasets[0] = data.traffic_rx; chart2.data.d ...

javascriptjsonchart.js

An unexpected glitch causes Parse server to crash

Currently, I am experimenting with using kue for scheduling jobs on my Parse Server which is hosted on Heroku. Following the guidelines from various tutorials I found regarding Kue, I made some modifications to my index.js file as shown below: var express ...

javascriptnode.jsexpressparse-serverkue

Is there a similar alternative to ignoring in webpack or browserify?

My code works perfectly in the browser after ignoring two packages with browserify: browserify files.js -i fs-extra -i request --standalone files > files.browserify.js. However, when I try to use webpack instead, the code throws errors about missing mod ...

javascriptnode.jsnpmwebpackbrowserify

Is it possible for the outcome of a component to be passed to render and actually show up as undefined

I am currently working on creating a wrapper component for an API call in order to display "loading" if the API hasn't updated yet. As I am new to React, I am struggling with passing the state to the ApiResp component: After checking the console.log ...

javascriptreactjsreact-native

Is there a way to automatically calculate the sum of two boxes and display the result in a separate

I am working with two boxes: one is called AuthorizedAmount and the other is called LessLaborToDate: <div class="col-md-6"> <div class="form-group"> <label>Authorized Amount</label> <div class="input-group"> & ...

javascriptjqueryhtmlasp.net-mvcrazor

What are some strategies for utilizing v-model in VueJS without altering the value?

I am struggling with using the v-model directive to manage data in an input field. My goal is to monitor changes to this data, but when I try to watch it, the old and new values always appear identical. This behavior is a result of the data being mutated, ...

javascriptvue.jsimmutability

Switch up the initial caret position in a Bootstrap 4 dropdown

This task seems trickier than I expected. I am trying to create a Bootstrap dropdown list where the caret initially points to the right and then rotates downward when expanded. Rotating the caret is not the problem, but starting with it facing right is cha ...

cssbootstrap-4

Implementing Vue Js checkboxes using dynamic JSON data

I have a product search page where users can filter based on selected category. When a category is chosen, the API returns the following response: "customFields":{ "select":{ "brand":{"options":[ "nike", "adidas","puma"]}, "colour" ...

javascriptvue.js

Using multiple GET methods on a single route in Express and Sequelize can lead to conflicts

I've created a simple product CRUD application with routes to search for products by ID and by name. However, when I send a request to http://localhost:4000/products?name=pen, the routes conflict with each other and I'm unable to retrieve the pro ...

javascriptnode.jsexpresssequelize.js

Poorly formatted mui table representation

I have utilized the Table component from @mui/material and referenced the documentation at https://mui.com/material-ui/react-table/. To reproduce the issue, I have created a static table with fixed values. Here is the code snippet: <TableCo ...

javascriptreactjsmaterial-ui

Creating a button to display the following 5 arrays after using the slice method

Is it possible to create a button in my code that will display the next 5 arrays from a table with over 15 arrays, after slicing it to show only 5 of them initially? Here is the code snippet I am working with: <tbody> <Table ...

javascriptarraysvue.jspagination

What specific regular expression pattern does jQuery employ for their email validation process?

Can jQuery validate email addresses? http://docs.jquery.com/Plugins/Validation Does jQuery use a specific regular expression for their email validation? I want to achieve something similar using JavaScript regex. Thank you! An Update: My Question I ...

javascriptjqueryregex