What steps can I take to stop the textfield from automatically changing the ID "myid" to "myid-tokenfield" when using Tokenfield for Bootstrap?

While utilizing Tokenfield for Bootstrap, I have encountered an issue where the id of my textfield gets modified from myid to myid-tokenfield.

In order to properly interact with the search engine I am using, this textfield must maintain a specific id. Therefore, it is imperative that Tokenfield does not alter the id.

Regardless of the ID assigned to the textfield, Tokenfield consistently adds "-tokenfield" to it. This behavior may serve a purpose, but is there a way to prevent it without causing any disruptions?

javascripttwitter-bootstrapbootstrap-4bootstrap-tokenfield

Answer №1

Line 105 in the tokenfield script is where the id is being initialized, as seen below: 

// Generating a new input ID
var id = this.$element.prop('id') || new Date().getTime() + '' + Math.floor((1 + Math.random()) * 100)
this.$input = $('<input type="'+this.options.inputType+'" class="token-input" autocomplete="off" />')
                .appendTo( this.$wrapper )
                .prop( 'placeholder',  this.$element.prop('placeholder') )
                .prop( 'id', id + '-tokenfield' )
                .prop( 'tabindex', this.$element.data('original-tabindex') )

If you're experiencing issues with the tokenfield due to changes in the id, have you attempted creating a -custom.js version of tokenfield and modifying the id there to see if it causes any problems?

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

Calculator for calculating values using JavaScript data attributes

One issue is that certain elements are canceling each other out.. The value of the element is specified in the "data-price" attribute. My code is currently not valid and does not handle it properly, ideally I would like to update the total whenever a selec ...

javascriptjqueryhtmlcheckbox

Node.js Express post query failing to set content type

I have a POST request implemented with the express framework to submit a query to a rest api. Here is the relevant code snippet: var request = require('request'); app.post('/compute', function(req, postResponse) { var queryJSON = re ...

javascriptnode.jspostexpress

What is the material-ui component that mirrors the functionality of <input type="color"><datalist>?

I'm just starting out with javascript, react, and Material-UI, so my question (along with the code sample) might show my lack of experience. Within a Material-UI TableCell (not a form), I have the following code: <input type="color" name ...

javascripthtmlreactjsmaterial-ui

Accessing external data in Angular outside of a subscription method for an observable

I am struggling to access data outside of my method using .subscribe This is the Service code that is functioning correctly: getSessionTracker(): Observable<ISessionTracker[]> { return this.http.get(this._url) .map((res: Response) => ...

javascriptangulartypescriptobservableangular-services

Solutions for resolving the error "Unable to access property 'value1' because it is undefined"

constructor() { super(); this.state = { value1 : Math.floor(Math.random() * 100), value2 : Math.floor(Math.random() * 100), value3 : Math.floor(Math.random() * 100), proposedAnswer : Math.floor(Math.random() * 3) + this.state.value1 + t ...

javascriptreactjs

Using HTML and CSS to create interactive icons that change color when clicked, similar to how a link behaves

Have you ever wondered if there's a way to make an icon act like a link when clicked, just like regular text links turning purple? And not just the last one clicked, but every single icon that gets clicked. Trying to use the :visited pseudo was unsucc ...

javascripthtmljquerycssvisited

Cross-origin resource sharing (CORS) policy issue arises when the 'Access-Control-Allow-Origin' header is not included in the requested resource, especially when utilizing an iframe in a React

I am trying to link a website to a button using an iframe. This website allows access to all domain names. Below is the code for my button: <Button component={NavLink} activeClassName={classes.activeBtn} to="/searchEngine&qu ...

javascriptreactjscorsmern

Implementing specifications throughout the entire nodejs route

In my Nodejs app, I have a RESTful API where I need to check for a user's role before sending a response with data or 404 error. apiRouter.route('/users') .get(function (req, res) { var currentUser = req.decoded; if(curr ...

javascriptnode.jsexpress

Error message encountered when attempting to rotate an object in three.js: "Object is undefined"

Experiencing an "Undefined Object" error while attempting to rotate an object using three.js. Here is a snippet of the code in question: var object; function render() { renderer.render(scene, camera); } function animate() { object.rotation.x + ...

javascriptanimationerror-handlingthree.jsundefined

Implementing Keycloak Policies to Secure a Node.js API

Hello everyone, this is my first time reaching out for help here so please bear with me if I miss out on any important information or make some mistakes. Apologies in advance for the lengthy text. Summary of My Objective (I might have misunderstood some ...

javascriptnode.jskeycloak

Issue encountered during Heroku deployment: Failed to build React app. When attempting to push changes to Heroku, an unexpected end of input error was received instead of the expected result. This error occurred on an unidentified file at

Encountering a parsing error while attempting to deploy a React app on Heroku using git push heroku master. The app built successfully yesterday, but since then some media queries were added by another contributor to various .scss files. The primary error ...

javascriptreactjsgitherokunpm

Manipulating a 2D array in Javascript and Jquery: Implementing push functionality

I am trying to set up an array structure as follows: track[divID][wrapID] However, when I attempted track[divID][wrapID] = wrapID, I encountered an issue. This is because I need to add more elements to the second dimension in another loop, like this: tr ...

javascriptjqueryarrays

Removing consecutive pipe symbols in JavaScript

Looking for a way to remove excess pipe characters before a certain pattern in JavaScript. var testString="||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||f_test!!3!!||f_test!!4!!||f_test!!5!!||"; output ="||f_test!!3!!| ...

javascriptjquery

Incorporate new markers into Google maps without the need to constantly initialize the map

My current goal is to have the user input a latitude and longitude into a text box, and then display a marker on the map for that location without needing to reinitialize the map each time. To start, I have set up my map like this: <script type="text/ ...

javascriptjquerygoogle-mapsgoogle-maps-markers

Should the form-group class be utilized in Bootstrap 4 even without a form tag?

Is it considered good practice to use the form-group class without including a form tag? Dhiraj Dhakal ...

twitter-bootstrapbootstrap-4

How come .trim() isn't cooperating with me?

I am encountering an issue with this particular piece of javascript. Every time I attempt to use it, nothing is displayed in my div. Instead, it simply adds ?weight=NumberInputed&measure=lbsOrkgs&submit=Submit to the URL. <h2>What size d ...

javascripthtml

Issue with storage functionality in Vuex Axios response

Every time I send data to the Vuex storage using an axios response, for example: ** Sidebar.vue ** created(){ this.getRoles(); }, methods: { getRoles(){ var _this = this var roles = null this.$http.get('/api/userroles/ ...

javascriptvue.jsvuex

Collaborate by sharing local storage with other systems

One of my systems (x.x.x.x: 8000) creates a localstorage after logging in. Now, when a user interacts with another system (x.x.x.x: 8001) by clicking a specific button, the information stored in the initial system's localstorage (x.x.x.x: 8000) is nee ...

javascriptvue.js

Can the CSS color of struts2-jquery-grid-tags be modified?

Is there a way to customize the CSS style of my Struts2 jQuery grid tags? I'm having trouble adjusting the font size of the header layer. Can someone please advise on how to change the style, color, and other formatting of the grid similar to regular ...

javascriptjquerycsshtmlstruts2

Reorganizing the position of the HTML form method for processing PHP $_POST data

Content goes here ...

javascriptphphtmlcss