Targeting Multiple Ids with ModalPopUp Extender

Greetings everyone!

Let's get started!

So, I have a couple of buttons on my page and I want to use one modal popup for both save clicks. Here is the code for the buttons:

<asp:Button ID="btnSave1" runat="server" OnClick="btnSave1_Click" Text="Save" OnClientClick="$find('showSaveConfirm').show(); return false;" />
<asp:Button ID="btnSave2" runat="server" OnClick="btnSave2_Click" Text="Save" OnClientClick="$find('showSaveConfirm').show(); return false;"/>

<asp:Button ID="btnSaveAll" runat="server" Text="" Style="display: none" />

And here is the information for the Modal panel:

<asp:Panel ID="pnlSaveConfirm" runat="server" Style="display: none;" CssClass="modalPopupContainer">
            <div id="Div7" class="modalPopupHeaderPanel">
                <div id="Div8" class="modalPopupHeader">

                </div>
                <asp:LinkButton ID="LinkButton2" runat="server" CssClass="modalPopupClose" CausesValidation="False">Cancel and close</asp:LinkButton>
            </div>
            <div id="Div9" class="modalPopupBannerPanel">
                <div class="modalPopupPanel">
                        <br />
                        You are about to save this piece of data.
                        <asp:Button ID="btnOkSave" runat="server" Text="Ok" />
                        <asp:Button ID="btnCancelSave" runat="server" Text="Cancel" />
                        <br />
        </asp:Panel>
        <ajaxToolkit:ModalPopupExtender ID="mdlPopupSaveConfirm" runat="server" TargetControlID="btnSaveAll" BehaviorID="showSaveConfirm"
            OkControlID="btnOkSave" CancelControlID="btnCancelSave" PopupControlID="pnlSaveConfirm" BackgroundCssClass="modalBackground" />

Both clicks trigger the same modal panel perfectly. The cancels work fine, but there seems to be an issue.

When I click on btnOkSave, it doesn't seem to confirm as the btnSave1_Click and btnSave2_Click server side events are not being triggered.

Any thoughts on what might be causing this problem?

Answer №1

Instead of taking the usual route, I decided to leverage the Ajax toolkit and incorporated the ConfirmButtonExtender.

I configured two separate ModalPopUpExtenders for the original saves, both pointing at the same panel and triggered by the ConfirmButtonExtender:

<ajaxToolkit:ConfirmButtonExtender ID="ConfirmButtonExtender1" 
                    runat="server" ConfirmText="" Enabled="True" TargetControlID="btnSave1" DisplayModalPopupID="mdlPopupSave1Confirm">
                </ajaxToolkit:ConfirmButtonExtender>
<ajaxToolkit:ConfirmButtonExtender ID="ConfirmButtonExtender2" 
                    runat="server" ConfirmText="" Enabled="True" TargetControlID="btnSave2" DisplayModalPopupID="mdlPopupSave2Confirm">
                </ajaxToolkit:ConfirmButtonExtender>

These were linked to the respective panels:

<ajaxToolkit:ModalPopupExtender ID="mdlPopupSave1Confirm" runat="server" TargetControlID="btnSave1"
             OkControlID="btnOkSave" CancelControlID="btnCancelSave"
            PopupControlID="pnlSaveConfirm" BackgroundCssClass="modalBackground" />
            <ajaxToolkit:ModalPopupExtender ID="mdlPopupSave2Confirm" runat="server" TargetControlID="btnSave2"
             OkControlID="btnOkSave" CancelControlID="btnCancelSave"
            PopupControlID="pnlSaveConfirm" BackgroundCssClass="modalBackground" />

This setup successfully accomplished my goal.

It may not be the cleanest solution, but it gets the job done :)

Answer №2

Ensure that the OnClick event is properly set for btnOkSave by adding the following code snippet to your control:

OnClick="btnSave1_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

Dynamically update arguments using ajax

Is it possible to dynamically initialize DropzoneJS with a URL obtained through an AJAX call without using async: false? The resulting URL will be dependent on the files argument. $('.class').dropzone({ url: function(files) { var url ...

Inject "incorrect" information using jQuery

I am dealing with the following constellation: <dl> <dt>Content</dt> <dd>123</dd> <dt>Content</dt> <dd>123</dd> <dt>Content</dt> <dd>123</dd> </dt> ...

Disabling the camera feed in a React application

Attempting to turn off the webcam using javaScript in React has been a bit challenging. Whenever I shift to a new component or when a component is destroyed, my react component immediately moves to the next page, but the webcam light remains on in the new ...

Page showing without banner

As I scroll down through my website, I want a specific banner to appear when I reach the contact page. The banner will show a goodbye message and give users the option to close it or keep it open. For example: (function() { requestAnimationFrame(fu ...

How can I invoke a function within a directive-generated HTML element's scope?

I created a custom directive that utilizes element.html() to set the HTML content. Within this HTML code, I would like to be able to invoke functions from the scope where the directive is being used. Here's an example: app.directive('myDirective ...

The compatibility issue between Bootstrap4 Navbar and "jQuery.BgSwitcher" is causing functionality limitations on mobile devices

Currently, I am utilizing Bootswatch4 within Bootstrap4 and have a requirement for a div with backgrounds that change or fade. After some research, I stumbled upon a JavaScript solution that aligns closely with my needs at: https://github.com/rewish/jquery ...

Having trouble launching the Nuxt 3 development server because the module '@volar/typescript/lib/node/proxyCreateProgram' cannot be located

Whenever I attempt to execute npm run dev, the dev server initiates but encounters the following error: Cannot start nuxt: Cannot find module '@volar/typescript/lib/node/proxyCreateProgram Require stack: - node_modules\vite-plugin-checker&bsol ...

Asynchronously Sending Intermediate Results from Server to Client in GWT

In my current project with GWT, the user provides data that is sent to the server for a lengthy computation process. This computation consists of multiple stages, and I want the server to send back results after each stage so the user can track progress wh ...

Looking for tips on resolving issues with the bootstrap navigation bar?

Check out this code snippet: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport ...

Learn how to dynamically activate an icon in Angular to enhance user interaction

HTML Code: The Zoom Component <div class="zoom py-3"> <i nz-icon nzType="minus" (click)="zoomToggle(false)" nzTheme="outline"></i><br> <i nz-icon nzType="plus" (click)=&q ...

Angular 8 experiencing unexpected collision issues

Currently, I am utilizing Angular 8 with "typescript": "~3.5.3". My objective is to handle the undefined collision in my code. const { testLocation } = this.ngr.getState(); this.step2 = testLocation && testLocation.step2 ? testLocat ...

How can a producer know when it's time to send a message in NodeJS using ZeroMQ?

After conducting some research on patterns supported by zeromq, I have encountered an issue with the PUB/SUB pattern in my recent project as well as the PUSH/PULL pattern. I am using NodeJS for the zeromq implementation. In my examples (server.js & client ...

Angular ngClick on a rectangle within an SVG element

Need to trigger angular click functions on rects in an svg. <rect data-ng-click="scrollToAnchor('siteHeader')" fill="#010101" width="501" height="81"></rect> Here's the function: $scope.scrollToAnchor = function(anchor) { $a ...

Dynamic menu plugin for JQuery

I am still new to jQuery and currently learning how to efficiently use it in website development. I am currently working on implementing a responsive navigation plugin that I came across online. However, I have encountered an issue with the plugin where th ...

Linking two dropdowns in Ember with data binding

I need help with connecting two selectboxes. I want the options in the second one to be determined by what is selected in the first selectbox. I'm new to using Ember and could use some advice on how to approach this problem. I tried using computed pro ...

What is causing the scripts to fail when I attempt to press a button?

Clicking on the button is supposed to slowly reveal phone numbers on the page. Here are the HTML Codes: <span id="show-phone-numbers" class="btn btn-success"> <i class="fe fe-phone-call"></i> Show Phone Nu ...

Preventing Ng-repeat from refreshing after deleting using $http request

Once I remove an item from my list, the deleted object's data disappears, but the placeholder (empty row) lingers. (I tried using apply() with no luck) I have a standard CRUD interface displaying expenses. <table class="table table-striped"> ...

Having trouble getting Next.js 404 page to function properly with the .tsx extension?

My latest project involved creating a Next.js application using regular JavaScript, which led to the development of my 404 page. 404.js import { useEffect } from "react"; import { useRouter } from "next/router"; import Link from " ...

Utilizing JavaScript: Passing a parameter into a function to be used with getElementById()

Implementing a feature that displays statistics by incrementing rapidly until reaching their final value when the element is in view, creating the illusion of a rising number. Encountering some difficulty in passing the necessary parameters to identify th ...

How can a function be executed asynchronously in node.js?

What is the best way to run a function in the background using node.js? For example: task = function(){ for (var i=0; i<1000000; ++i); return "world!"; }; background(task).then(console.log); console.log("Hello "); You should see the expected ...