Trigger an Ajax function using a button within a Bootstrap modal

I need to trigger an ajax function after selecting an option from a bootstrap confirmation modal. The modal will appear by calling the remove(parameter) function.

Any assistance would be greatly appreciated

function remove(parameter){
// $("#remove-modal").modal('show');
/*
  if( modal clicked Yes){
  ..perform ajax call using 'parameter'
  }
*/
}
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" id="remove-modal">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myModalLabel">Do you wish to delete this item?</h4>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" id="modal-btn-si">Yes</button>
        <button type="button" class="btn btn-primary" id="modal-btn-no" data-dismiss="modal">No</button>
      </div>
    </div>
  </div>
</div>

Answer №1

To handle the yes button, consider adding an event listener specifically for it. Since the event changes each time the modal appears, it's important to remove the previous listener before adding a new one.

remove(parameter) {
    var yesButton = $("#modal-button-si");
    yesButton.off("click");
    yesButton.click(function(){
        //execute ajax request here
    });
} 

Answer №2

To ensure proper functionality, I recommend implementing a click handler for the "Yes" button once the modal is displayed. You can achieve this by following these steps:

function handleRemove(parameter){
    // Display the modal dialog
    var modal = $("#remove-modal").modal('show');
    
    // Find the "Yes" button within the modal and attach a click event handler
    modal.on('shown.bs.modal', function(){
        modal.find('#modal-btn-si').on('click', function(e){

            // Perform desired actions here...

            // To close the modal when ready, use:
            //
            // modal.modal('hide');
            //
            // Ensure this is inside the callback of your AJAX request
            // if you want the modal to close after button click
        });
    });
}

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

HTML - Customizing container with background color and ensuring minimum height of 100%

After creating a dynamic page using Bootstrap, I managed to add a sticky nav bar and footer. The navbar, footer, and page content are all in black color. I want the main content area to be white with black sides matching the background. Currently, I ca ...

Utilizing various if conditions in conjunction with the jQuery chart plugin Piety

Check out this Fiddle example I'm interested in experimenting with different color combinations using a small chart plugin called piety. The documentation demonstrates how to set different colors for a pie chart: $(".bar-colours-1").peity("bar", { ...

Creating a dynamic 2D image using HTML5 animation

As a beginner HTML5 developer, I have been exploring ways to create an animated image using multiple jpg files stored in a specific folder on my website. My goal is to design an animation of a rabbit running across the page when a user clicks on a button. ...

Display a preloader image while waiting for the content to load using jQuery or AJAX

Hey there, I could really use some help with a little issue. I've been trying to use the click() and load() functions to bring my content into a specific CSS class. $("#feed").click(function(){ $(".homefeed").load("feedcontainer.php"); ...

What does drizzle.config.ts serve?

I've been working on setting up a project with Drizzle + Next.js + Vercel for my serverless backend. To utilize the ORM API of Drizzle, I reference my database in the following way: import { drizzle } from "drizzle-orm/vercel-postgres"; impo ...

Validating complex ASP.NET MVC objects using AngularJS

I am encountering an issue with validating my model in a subform using AngularJS. Despite making changes to the SearchPostCode values and seeing updates in classes, the error message fails to display, and the button remains disabled. <form novalidate&g ...

Issue with Vue method not providing expected output

As I dive into the world of Vue, I find myself facing a peculiar issue with a method that should return a string to be displayed within a <span>. While I can successfully retrieve the correct value through console.log, it seems to evade passing into ...

Error: Invalid syntax detected: /blog

I am encountering an issue with jQuery while trying to add a blog section to my existing single-page site. The new blog will be located in a separate /blog directory, causing the menu item for it to differ from the other href="#" tags on the index.html pag ...

Issue: The DLL initialization routine failed for electron, but it works perfectly fine on node.js

Currently, I am facing an issue while attempting to load a custom module in electron that is written in D using the node_dlang package. The module loads successfully with node, but encounters failures within electron. The test run with node, which works w ...

Selenium encountered an error when trying to execute the 'querySelector' function on the document. The selector provided, my_selector, is not recognized as a valid selector

Whenever I run this code: document.querySelector(my_selector) using selenium, an error is thrown: Failed to execute 'querySelector' on 'Document' my_selector is not a valid selector my_selector is definitely a valid selector that func ...

Tips for setting multiple states simultaneously using the useState hook

Exploring the use of multiple states handled simultaneously with the useState hook, let's consider an example where text updates based on user input: const {useState} = React; const Example = ({title}) => { const initialState = { name: &a ...

Incorporating Chip into a Material-UI DataGrid column

I'm having trouble displaying data of a specific column inside a chip. I attempted to use the Chip component in my code: StackBlitz Demo Web Link: Live Demo I tried to incorporate it using: import Chip from '@mui/material/Chip'; but c ...

Looking to center a title in React Navigation without interference from headerLeft?

I am using react navigation and trying to center the title in the header bar. However, it seems to be affected by the presence of headerLeft. When I disable headerLeft, the title centers perfectly. How can I achieve this without interference from other lef ...

Is It Possible to Use Separate Stylesheets for Different Web Browsers?

I have been trying to implement a JavaScript code that loads a specific stylesheet based on the user's browser. However, it seems like the code is not functioning correctly as none of the stylesheets are being displayed. I have meticulously reviewed t ...

Having trouble getting buttons to wrap onto a new line instead of spilling over the container

Struggling with getting a JSFiddle to work properly with React and other dependencies, I've decided to share the Github repo link to demonstrate the issue: https://github.com/ishraqiyun77/button-issues/ The main problem arises when a group of button ...

What is the method to select a hyperlink that includes a variable in the "href" attribute and click on it?

Currently, I am in the process of creating acceptance tests utilizing Selenium and WebdriverIO. However, I have encountered a problem where I am unable to successfully click on a specific link. client.click('a[href=#admin/'+ transactionId + &apo ...

How can I send extra information along with my Ajax request in jQuery UI Autocomplete?

I currently have two jQuery UI Autocomplete widgets set up. The first autocomplete allows the user to enter a client's name, narrowing down options until the correct client is selected. A callback function then takes the ID of the chosen client and st ...

fetching indexeddb information using the equivalent of a "WHERE IN (a,b)" query

I've been working on transitioning from websql to indexeddb, but I'm struggling to recreate the SELECT query: "SELECT * FROM tableA WHERE cid ='"+cid+"' AND hid IN("+hid+",1) ORDER BY hid DESC LIMIT 1"; function getMyData(e) { var ...

Fetching data without Cookies even when the options and CORS settings are configured correctly

I have a backend server at https://b.com and a client server at https://a.com. I need to send authenticated ajax requests from a.com to b.com. Prior to sending the request, users will visit b.com to sign in. The session cookie will be stored in their brow ...

Creating a smooth JQUERY fade slideshow with seamless transitions, no white gaps in

I am having trouble with the slideshow on my Wordpress website www.2eenheid.de. I want the images to fade smoothly between each other instead of fading into a white background color first and then into the next image. Can anyone help me find a solution for ...