Why is My JQuery Button Data Null?

I am facing an issue with a button where I want to pass the HTML object as a parameter to a JavaScript function. The objective is to print the data-hi attribute value from the element in the button.

HTML BUTTON

<button type = "button" onclick = "whoIsRdns(this)" class="dns-information btn btn-xs btn-info pull-right" data-toggle="modal" data-target = "#whois_rdns_modal" data-path="{{ path( '_who_is_rdns', { 'peer': peer.number, 'ip': peer.mac } ) }}" data-hi = "hi2">
<i class="icon-search"></i>
</button>

JS FUNCTION(W/ JQUERY)

    function whoIsRdns(thisButton){

    //Enable jQuery properties from the param of the HTML object
        var btn = $(thisButton);

        var test = btn.data('hi');
        console.log('Value is ' + test);

}

What could be causing the test variable to return null?

Answer №1

Is it correct to write var btn = $("thisButton"); as var btn = $(thisButton); without using quotes?

Answer №2

Just a small mistake

$("thisButton") !== $(thisButton);

Remove the quotes so that you are not searching for an element with the tag name thisButton

var btn = $("thisButton");

Should actually be

var btn = $(thisButton);

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

Unable to import an empty class, encountered error TS2307: Module 'menu' not found

I'm facing an issue where I am trying to import a basic, empty exported class. It seems like the file cannot be located even though it is in the same directory as the class that is importing it. I have looked up similar error messages on Google, but n ...

I am sometimes experiencing issues with activating ajax code using Bootstrap 3 modal

I'm stumped trying to find a solution for this issue. Currently, I am utilizing the bootstrap modal to retrieve ajax content from a specified URL. To prevent content overlap, I am using $.removeData() when reloading the content. The problem arises w ...

Learn how to customize the path for express.cookieSession based on the req.url in your application

I've developed a node.js server that utilizes passport for user authentication and express.cookieSession for session management. Currently, I have multiple clients, each with its own folder serving different copies of my application. The access to th ...

What distinguishes loading angular dependencies and what method is optimal for module sharing?

Can you explain the distinction between these two methods of loading modules? angular.module('CoreApp', ['...','...','...','...']); //parent module angular.module('MainApp1', ['CoreApp' ...

jquery detecting changes and enabling readonly attribute

I need to trigger an event with the "on change" functionality for a read-only input using jQuery. After that, I want to add some HTML content below it. Essentially, whenever the read-only input is modified, the HTML code should be appended. Please take a ...

What is the best way to manage rotation with TrackBallControls in three.js?

I've been working on this app. By clicking the top left tab, you can view the assistant cube and use trackBallControls to move the camera by dragging your mouse around the screen. However, when toggling between showing and hiding the assistant cube, t ...

Retrieving a boolean value from a function that includes an asynchronous AJAX request

In my calendar application, I am working with an array of dates: <div v-for="date in dates">{{ date }}</div> I want to apply a conditional class based on the outcome of an isWeekend() method that involves making an API call: <div v-for="d ...

Creating an iPad-inspired password field experience in a text input with jquery: A step-by-step guide

Looking for a plugin that mimics the iPad's password field behavior for credit card number entry. The focus should only reveal the entered digit and then switch to a bullet as the next digit is typed. Additionally, all previously entered digits should ...

What could be causing my Dojo Pie chart to vanish when I trigger the updateSeries function following an Ajax request?

I'm currently working on updating a dojo Pie chart using the updateSeries method. The method is called after an ajax request to retrieve an updated JavaScript array data. Below is the JavaScript code: var eventByReasonsData = .... //data is populate ...

Increasing the height of list items

I'm currently working on creating a scale using list items, and I want the height of each item to increase incrementally. So far, I haven't been able to find a solution other than adding a class to each item. Here's a fiddle demonstrating t ...

Tips for animating an element in a straight line while also rotating it using CSS

Whenever I apply the transform property to an element for translate3d and rotate3d, it ends up orbiting around. My goal is to have a linear motion while rotating. I have utilized webkit animations in CSS img{height:50px; width:50px; animation:tt; ...

Avoid unintended double-tapping on mobile devices

On my main page, I have a button that triggers an overlay with item details, including buttons like one that reveals a phone number. An issue arises when a user accidentally double-clicks the main page button. The first click is processed on the main page ...

Avoiding line wrapping can be achieved by hiding elements using the d-none class from Bootstrap

During the development of a responsive website, I encountered an issue with the topbar menu. The menu contains numerous options, which is ideal for larger screens. However, on smaller viewports like cellphones, the buttons start wrapping rather than fittin ...

Neither BigText nor FitText is effective

Here is a sample HTML snippet: <div id="bigtext" style="width: 300px"> <div>The mysterious</div> <div>BIGTEXT</div> <div>feature exclusively</div> <div>encapsulated on screen</div> < ...

Comparing the architecture of two JSON objects in JavaScript without taking into account their actual content

One of the tools I rely on for my projects is a Node.js based mock server that helps me specify and mock API responses from the backend. However, it would be beneficial to have a way to ensure both the backend and frontend are in sync with the specified st ...

The jQuery Ajax function seems to be malfunctioning, while the PHP code is executing smoothly without any

I attempted to utilize AJAX to send form data to a .TXT file using PHP code. The information is successfully being added to the text file, however, the AJAX functionality is not functioning properly. Can someone please point out the error in my code? ...

Unleashing the Power of Node Js: Retrieving File Data and Form Data in POST Requests

When sending form data values using Postman, you can utilize a NodeJS server in the backend to handle the POST request. Here is an example of how to structure your code: require('dotenv').config(); const express = require('express'); co ...

Inserting data into a Textbox by clicking on a Div

I'm currently working on creating a wallpaper changer for my website. Right now, I'm looking to input the URL of a wallpaper into a text box when the corresponding DIV option in a CSS menu is clicked. Below is the JQuery I am using: $("div.bg8 ...

Deliver the PDF generated document to Django Rest API

I have successfully created a PDF from an HTML file, Now, I am looking to automatically email the PDF as soon as it is generated. To achieve this, I need to send it to Django REST for backend processing. However, I am facing difficulties in figuring out h ...

Activate the 'click' function for changing data sources

My webpage has a unique feature where checkboxes are generated dynamically from a .csv file. These checkboxes include an additional 'Select All' option created dynamically as well. The functionality I'm aiming for is that upon checking the & ...