Triggering events upon clicking custom buttons in Django admin list

  • admin.py
class TestAdmin(admin.ModelAdmin):
    class Media:
        js = (
            'js/common.js',
        )

    list_display = ['custom_actions']

    def custom_actions(self, obj):
        return mark_safe(
            '<a class="button call_alert" href="#" data-msg="A">A</a>&nbsp;'
            '<a class="button call_alert" href="#" data-msg="B">B</a>'
        )
    custom_actions.short_description = 'Custom Actions'

admin.site.register(Test, TestAdmin)
  • js/common.js
(function($) {
    $(".call_alert").on("click", function() {
        alert($(this).data("msg"));  // ★★★ Dose not!!! ★★★
    });
})($);

error message :

Uncaught TypeError: $ is not a function at common.js:2 at common.js:5

Is there a way to display the alert message?

Any potential solutions?

Your help is greatly appreciated.

Answer №1

At last, I've figured it out. :)

The code has been updated as follows.

if(!$) $ = django.jQuery;
$(function(){
    $(".call_alert").on("click", function() {
        alert($(this).data("msg"));
    });
});

I appreciate all your help. :D

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

jQuery - The .always() callback is triggering prematurely

I am currently developing a client-side JavaScript application that is designed to retrieve data from a CSV file, make multiple API calls for each row, and then save the results back to the CSV. The main challenge I am facing is how to coordinate these req ...

Combining jQuery's UI widget with my topNav disrupts horizontal alignment

Within my web application, I have integrated jQuery and jQuery UI (specifically versions 1.10.2 and 1.10.4). To style the components, I utilize the CSS found in /js/jquery-ui-1.10.4/css/ui-lightness/jquery-ui-1.10.4.min.css from the jQuery site. Prior to i ...

The curious conduct of wild safari creatures

I have been using JavaScript to split my ePub chapter into pages by wrapping the code with new divs that represent separate pages. I have also created CSS styles for these new divs. Everything works perfectly when the file has a filename extension of &apos ...

Obtain data from a popup window and transfer it back to the main parent window

I am having trouble with a pop-up window that contains selections. After the user chooses options, I want those selected options to appear in the main window without refreshing it. I am utilizing JavaScript for this task, but I am struggling to find a way ...

How can we automatically redirect users to an external website based on their responses to a specific question in SurveyJS?

Within my SurveyJS json, I have a radiogroup question that prompts users to make a choice. If they select a specific option, I'd like to redirect them to a different page. Otherwise, I want them to continue with the survey. Is this achievable? (The s ...

Guidelines on resolving the issue of Unsupported platform for [email protected]: requested {"os":"darwin","arch":"any"} (existing: {"os":"win32","arch":"x64"})

Trying to install Parallelshell but encountering a persistent warning. I've checked the package file multiple times without finding a solution. Can someone assist me with this issue? ...

Arranged list becomes depleted (Although Lodash's groupBy function still functions properly)

Check out the sample plunker here Initially, I am grouping a collection by a specific key, which in this case is yob (year of birth). I have two approaches: I can create a custom function to group the collection, allowing for custom logic to be impleme ...

Error: VueJS mixins do not include the property definition

I've been trying to incorporate Mixins into my Vue.js code, but I've run into a few issues :/ Here's the current code for two test modules : ErrorBaseMixin.vue <script> import ErrorAlert from './ErrorAlert'; expor ...

Utilizing the Vuex/Redux store pattern to efficiently share a centralized source of data between parent and child components, allowing for customizable variations of the data as

Understanding the advantages of utilizing a store pattern and establishing a single source of truth for data shared across components in an application is essential. Making API calls in a store action that can be called by components, rather than making se ...

experimenting with adding fresh choices to dropdown menu using ajax and jquery

When attempting to load a list of locations through ajax/jQuery, I encounter an issue. After typing a letter into the input field, the first response is displayed but subsequent responses are simply appended to it. I have tried using .html('') an ...

Using Vue's forEach method in a computed property

I am currently working on a checkbox filter function that saves the value of clicked checkboxes in an array. However, I am encountering issues with updating the computed data as it is always returning undefined. The structure of the data: Casino { brand_ ...

The Mapbox map fails to display properly upon initial page load

When my Mapbox map loads, I am experiencing issues with it only rendering partially. It seems that adjusting the width of the browser or inspecting the page will cause the map to snap into place and display correctly. To demonstrate this problem, I created ...

Tips for changing an existing variable and adding new variables through the use of the import * statement

I have a file test.py with list_sample = [1,2,4] Now, I want to append to the list from another file eg: test2.py list_sample =+ [10,11] # also I have many other things in this script a=10 c=10+a and modify test.py as list_sample = [1,2,4] # I want to ...

Redux jargon for a method that updates state

Within the realm of redux, what is the term used to describe a function inside a switch statement that takes the state as a parameter, modifies it, and then returns a new state? function reducer(state = DEFAULT_STATE, action) { let count = state.count ...

Tips for Incorporating xmlhttp.responseText in If Statements

This is the code snippet from my save_custLog_data.php file: <?php $a = $_GET['custEmail']; $b = $_GET['pswrd']; $file = '/home/students/accounts/s2090031/hit3324/www/data/customer.xml'; if(file_exists($fi ...

Is it necessary for Webpack to package all dependent node modules with the final bundle in production mode?

It's common knowledge that when we run npm run build, React scripts utilize Webpack to create a bundle by examining the entire dependency graph (following imports) and generating a bundle.js which is then stored in the dist/build folder for production ...

Verify whether a string initiates with any of the strings contained in a specified array

Is there a way in JavaScript to determine if a string begins with any of the strings contained within an array? For instance, You have an array comprised of strings: const substrs = ['the', 'an', 'I']; And you also possess ...

My attempts to save data using the Django save() method are not successfully populating my Mysql database

I have been attempting to input data into a MySQL database using Django. The user inputs the necessary data through the addSubscriber.html page in order to save it in the database, however, the data is not being successfully saved. Whenever I check the MyS ...

Controlling the file system on a local level through browser-based JavaScript and Node.js

I am currently working on a project that requires users to interact with the file system directly from their browsers. While I have extensive experience in writing client-side JavaScript code and using Node.js scripts for tasks like web scraping, data anal ...

Passing a JavaScript variable to PHP resulted in the output being displayed as "Array"

After sending a JavaScript variable with the innerHTML "Basic" to PHP via Ajax and then sending an email with that variable, I received "Array" instead of "Basic". This situation has left me puzzled. HTML: <label class="plan-name">Plan name: <b ...