What is the process for altering the text contained within a button?

My website uses Bootstrap and a KendoUI data grid where each row has a button like this...

<button type="button" id="requestbtn1" class="btn btn-success">Request</button>

I've written some JavaScript to handle the click events of these buttons...

$("button[id^='requestbtn']").click(function() {
  var lgid = String(this.id).replace("requestbtn", "");
  alert("Request for slip " + lgid);
  this.html("Done");
  this.addClass("btn-primary");
  this.removeClass("btn-success");
});

Although the alert shows the correct number, I'm having trouble changing the button text to "Done" and updating its CSS class to "btn-primary" to indicate that the request has been made.

Unfortunately, none of my attempts at changing the text and class have worked. Originally, I had all the changes in one line...

  this.html("Done").addClass("btn-primary").removeClass("btn-success");

...but I tried splitting them up to troubleshoot the issue.

If anyone knows how I can successfully change the text and CSS class of the button, please let me know!

javascriptjquerycsstwitter-bootstrap

Answer №1

Utilize this

$("button[id^='requestbtn']").click(function() {
  var lgid = String(this.id).replace("requestbtn", "");
  alert("Request for slip " + lgid);
  var $this = $(this);
  Sthis.html("Complete");
  Sthis.addClass("btn-primary");
  Sthis.removeClass("btn-success");
});

Answer №2

Attempting to execute jQuery methods like html(), addClass(), removeClass(), etc. on native DOM nodes (such as this) will not work, as these methods are not accessible for native DOM elements. It's important to always be mindful of whether you're working with the DOM or using jQuery.

Consider the following approach:

$("button[id^='requestbtn']").click(function() {
  var lgid = String(this.id).replace("requestbtn", "");
  alert("Request for slip " + lgid);
  $(this).html("Done").addClass("btn-primary").removeClass("btn-success");
});

Alternatively, you can utilize native DOM options:

$("button[id^='requestbtn']").click(function() {
  var lgid = String(this.id).replace("requestbtn", "");
  alert("Request for slip " + lgid);
  this.innerHTML = 'Done';
  this.classList.add('btn-primary');
  this.classList.remove('btn-success');
});

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

Accessing iframe's HTML using a server-side solution by circumventing the Cross-Domain Policy

Our current challenge involves accessing dynamically generated HTML elements using JavaScript, particularly when trying to extract image URLs from these elements. When the HTML elements are generated solely through JavaScript, extracting the URL is straigh ...

javascriptphphtml

Encountering the "ERPROTO" error message while attempting to send an Axios request from my REST API

I have set up my API at "localhost:3000/api/shopitems" and it successfully returns the JSON data below when accessed through a browser: [ { "item_available_sizes": { "s": 1 }, "imgs": { "album": [], ...

javascriptnode.jsmongodbexpressmongoose

JavaScript - utilize regular expressions to check if the argument starts with a forward slash

Currently, I am utilizing nodejs for API testing purposes. To properly test the logic within this if statement, I am in search of a string that aligns with this specific regular expression. if (arg.match(/^\/.*/)) { // ... } Would anyone be able ...

javascriptregex

Ensure that any portion of a child DIV becomes visible only if it falls within the confines of the parent DIV, even if the overflow:hidden property is

My inner div can be resized by the user, and I have it inside another div. The issue is that when the inner div extends beyond the outer div, it covers it completely, or I have to use overflow:hidden, which hides the outer edges of the inner div. Ideally, ...

javascriptjquerycss

What is the best way to automatically close a parent popup window when the child popup is

Currently, I am developing a web application using Angular that requires managing nested popups. Specifically, in my scenario, I initiate Popup 1 and from within that popup, I trigger another popup (Popup 2) upon clicking "delete." My goal is to ensure tha ...

javascriptangularpopup

Obtaining the result from within the .then() block

Through the utilization of Google's API, I am successful in retrieving and displaying nearby places on the console. router.get('/', function (req, res, next) { // Locating nearby establishments googleMapsClient.placesNearby({ ...

javascriptnode.jsgoogle-mapsexpress

Switching the background hue of the chat box after each message

Does anyone know how to change the colors of each message in a chat window using CSS and HTML? I'm trying to customize my stream but can't figure it out. Here is an example for reference. ...

htmlcssstreamchattwitch

What is the best way to send parameters to an event listener in a React component?

I am struggling with a component setup that looks like this: import React, { useEffect } from 'react'; const WindowFocusHandler = ({store}) => { // The store object is valid and working here useEffect(() => { window.addEventListene ...

javascriptreactjsreact-hooks

Styling Page Titles with CSS Content

I'm having trouble including the page title in the footer of all printed pages. I've tried using the following code snippet: @page { @bottom-right { content: attr(title); } } However, this method doesn't seem to be working for me. ...

htmlcssprinting

evaluation is not being executed in javascript

I am struggling to assign a value of 1 to the educationflag variable. I am trying to avoid calling the enableEdit.php file when the flag is set to 1. The issue arises when control reaches the if condition but fails to set the variable to 1. Here is my cod ...

javascriptjqueryajaxeval

The function update in chart.js is not available

I encountered an issue while trying to update my chart. When I clicked the button, an error message popped up saying TypeError: pieChartData.update is not a function const LatestSales = props => { const {pieChartData} = props; const toggle ...

javascriptreactjschart.js

What is the best way to redirect to a different URL in angular after signing in with AWS Amplify?

Currently, I am utilizing the latest authentication component from AWS-Amplify. While I can successfully log in, I am facing an issue where the URL remains the same after logging in, instead of redirecting to a custom URL as desired. To provide some contex ...

javascriptangularamazon-web-servicesaws-amplify

Incorporating header and footer elements into the design

I am facing an issue while editing a layout. Currently, when clicking on some side of the layout, a header and footer appear in a certain way. However, I would like to change this so that the header and footer appear differently, similar to the example s ...

htmlcss

What is the best way to access and manipulate data stored in a Firestore map using React?

In my Firestore database, I have a field with map-like data: coordinates:{_01:"copper",_02:"gold",_03:"iron"} When viewing this database in the Firestore admin panel, it appears like this: pic However, when attempting to list items using the following c ...

javascriptreactjsgoogle-cloud-firestore

Unable to change the color of InputBase component's placeholder in React.js

I've been attempting to modify the color of the placeholder in an inputbase. I came across several methods online and tried implementing them, but none have been successful. Below are the codes I have tried. <InputBase id="input-id&quo ...

javascriptcssreactjs

Error in Email Attachment - Invalid Attachment File Path

My workflow is as follows: User selects a local file while filling out an HTML form AJAX sends the form data to my ASMX Public classes use JSON data to create an email (with the file being an attachment) While there are many ...

jqueryajaxvb.netemail-attachments

Exploring Jasmine and Karma for testing Angular 5 HTTP requests and responses

I am brand new to the concept of Test-Driven Development (TDD) and I am currently in the process of debugging a complex Angular 5 application for the company I work for. The application is functioning without any issues, but now I need to incorporate test ...

javascriptangularjasminekarma-jasmine

Securing Node function parameters in an asynchronous environment

I've been grappling with a pressing question lately, and I just can't seem to find a definitive answer. Let me share with you a Node function that I frequently use. It manages web requests and conducts some input/output operations: function han ...

javascriptnode.js

most effective approach for recurring AJAX requests

Currently working on a web app that includes real-time features such as chat and auto-updating lists. Looking for the best method to perform interval updates using AJAX. My current approach is quite simple: updateAll(); function updateAll(){ $.ajax({ ...

jqueryajaxloops

The error occurred while trying to cast the value of "{{Campground.name}}" to an ObjectID. This value, which is of type string, could not be converted to an ObjectID at the path "_id" for

const express = require("express"); const session = require("express-session"); const cookieParser = require('cookie-parser') const mongoose = require("mongoose"); const { Campground, User, Review } = require(" ...

javascriptnode.jsmongodbexpressmongoose