Unable to invoke modal popup from master page on child page

Incorporating a modal popup to display a login box has brought up an interesting challenge. The modal popup is situated in the master page and connected to a LogIn link. However, now there is a need to invoke the same modal popup from a child page using a different link button. While the current setup allows for calling the modal popup via the LogIn link on the master page, the goal is to introduce a second control (linkButton) on the child page that can trigger the master page's modalpop.

The attempted solution in the child page was as follows:

function LogIn2()
{
$find("programmaticModalPopupBehavior").show();
} 

<asp:LinkButton ID="LinkButton1" runat="server" OnClientClick="LogIn2">Log in</asp:LinkButton>

For more insights, check out this resource discussing multiple TargetControls for the ModalPopup.

The question remains - how can the operational modal popup on the master page be summoned from a control on the child page?

Update:

This snippet is part of the masterpage:

<ajax:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="linkLog" CancelControlID="linkClose" BackgroundCssClass="cssModal" PopupControlID="panelPopUp" BehaviorID="programmaticModalPopupBehavior" PopupDragHandleControlID="panelDrag"></ajax:ModalPopupExtender>
javascriptasp.netajaxmaster-pagesmodalpopupextender

Answer №1

To implement an OnClientClick event for the LinkButton, you can follow this example:

<asp:LinkButton ID="LinkButton1" runat="server" Text="Login 2" OnClientClick="return LogIn2()" ...>

Ensure that the JavaScript function is placed in your master page. After displaying the popup, make sure to include a return false statement in the method to prevent the LinkButton from triggering a postback:

function LogIn2()
{
    $find("<%=ModalPopupExtender1.UniqueID%>").show();
    return false;
}

Alternatively, you can also add return false to the OnClientClick of the LinkButton after the execution of the LogIn2 function, like so:

<asp:LinkButton ID="LinkButton1" runat="server" Text="Login 2" OnClientClick="LogIn2();return false;" ...>

Answer №2

I am uncertain about this, but please confirm if you are utilizing the ajax control as shown below:

 <asp:ModalPopupExtender ID="ImageUploaderEx" runat="server"  BehaviorID="ImageUploaderBID" TargetControlID="Link Name" CancelControlID="Cancel"  PopupControlID="Panel to be open" OnCancelScript="hideUploader()"></asp:ModalPopupExtender>

If so, you can use the same modal with a different name. If this method does not work, let me know and I will do my best to assist.

Please try the following steps:

((ModalPopupExtender)Page.Master.FindControl("ModalPopupExtender1")).Show();

Additionally, make sure to include the following code:

using AjaxControlToolkit;

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

Having trouble with properly writing to multidimensional arrays?

The issue I am encountering is clearly depicted in the simplified code snippet below. During the execution of the TestArrays function, the goal is to write a single item to each location in the multidimensional array. However, upon examining the layers in ...

javascriptarrays

Guide on combining two JSON Array objects in Nodejs

Is there a way to merge two JSON Array objects together using Node.js? I am looking to combine obj1 + obj2 in order to create a new JSON object: obj1 = [ { t: 1, d: 'AAA', v: 'yes' }, { t: 2, d: 'BBB', v: 'yes& ...

javascriptjsonnode.js

I am seeing an unexpected '0' being added to my output when using the Ajax script in WordPress

I have developed a custom WordPress plugin that utilizes AJAX to refresh a div every 10 seconds. Although the AJAX GET request is functioning properly and displaying test as expected, it is also appending a 0 to the output in the div. (response) I'm ...

phpjqueryajaxwordpress

1. Common obstacles in the functionality of data binding2. Constraints

Working on a basic controller to perform some calculations, which is a simplified version of a more complex project. The issue I'm facing is that the result displayed in the HTML gets recalculated every time there's a change, but when calculating ...

javascriptangularjsangular-data

Having trouble accessing the property 'keys' of undefined in React event handling operations

I am currently working on implementing a button that executes Javascript code roshtimer(), along with the ability for users to trigger the command using hotkeys. Users should have the option to either click the button or press 'r' on their keyboa ...

javascriptreactjsevent-handling

Modify HTML by replacing two consecutive tags using JavaScript

Currently working on a React project and struggling with a particular issue. My text editor seems to have trouble with certain HTML syntaxes, making the package less than ideal for my needs. The main goal is to convert the following syntax from: <p> ...

javascriptreactjs

Tips for eliminating the undefined/null values from an array nested within another array in Angular

DATA = [{ application: [{ name: 'Room1' },{ name: 'Room2' },{ name: 'Room3' },{ name: 'Room4' },{ name: 'Room5' }], name: 'Batch 1&ap ...

javascripttypescript

ui-grid row size set to automatically adjust using rowHeight : 'auto'

Has anyone else experienced this strange behavior with ui-grid? When I set the rowHeight to auto, each cell in the same row ends up with different heights. One of the cells contains multiline data, which seems to be causing issues for ui-grid. I've ev ...

javascriptcssangularjsng-gridangular-ui-grid

What steps should be taken to modify it so that the user is prompted to input the time in minutes

I attempted to modify the user input in minutes by changing "remseconds" to remminutes and adjusting the calculations to "x 60", but unfortunately, nothing happened as expected. Instead of "remseconds," I tried using remminutes and multiplied it by 60, bu ...

javascripthtmlcss

Angular model is not receiving the value of a false checkbox

One issue I am facing is with a form that includes a checkbox bound to an ng-model property. The problem arises when the checkbox is checked, as the value gets set in the model. However, when it is unchecked, the key and value remain unset, causing API val ...

javascriptangularjs

Is it feasible to hide the key element until modified by my code using waitForKeyElements?

I've developed this userscript (with valuable assistance from Stack Overflow) specifically for the website metal-archives.com. Here is the basic structure of the script: function appendColumn(...) { // code for adding a column // code for en ...

javascriptjquerycssajaxgreasemonkey

What is the method for sending a GUID as a hidden form field?

I have a form field that is supposed to have a GUID assigned to it, but for some reason, it is not being submitted with the form. <asp:HiddenField ID=GuidToken" runat="server"/> //Code behind (psuedo code) GuidToken = [valid guid]; //double check ...

c#asp.net.net

MERN Application encounters UnhandledPromiseRejection Warning while attempting to save files

Currently, I am working on a project using the MERN stack. Whenever I make edits to a file and try to save them, an error pops up in the console, showing UnhandledPromiseRejection. Because of this, the changes I make to the file do not take effect. How can ...

javascriptreactjswebpack

Update the textbox data after performing the "reloadGrid" action in jqgrid

Utilizing a modal form to update or create records, the "reloadGrid" method is used to enable the grid to refresh from within the modal when clicking the "save" button. However, there are two issues that arise: 1) The form below does not get updated. 2) Th ...

asp.netjsonjqgrid

Step-by-step guide on creating a pressure gauge using canvas

Seeking assistance with creating an animated pressure gauge in Canvas for a new application. I need to animate the red needle to move from one angle to another when given a specific input. My original attempt to calculate the ratio between pressure and ang ...

javascriptjqueryhtmlcanvas

Differences between visibility property manipulation in HTML and JS

One issue I am facing is that when I add a hidden property to a button in the HTML, it remains invisible. <button id="proceed_to_next_question" hidden> Next Question </button> However, if I remove the hidden property and include the following ...

javascripthtmlvisibility

Mastering the art of grouping by a key and generating sub-objects from a plain array of key-value pairs in JavaScript ES5 without relying on third-party libraries

My dataset consists of an array of objects, each containing 4 keys: [ { "team": "USA", "team_profile_id": "10", "player": "Captain America", "player_id": "10X1" }, { "team": "USA", "team_profile_id": "10", "player": "The ...

javascriptarraysjsonobjectecmascript-5

I am attempting to implement an auto-assignment feature in my Discord bot using discord.js, however, it seems to be malfunctioning

Trying to implement an autorole feature for my bot following a tutorial, but encountering an error message when testing it on a secondary account in Discord. The section of code related to autorole in my index.js file: client.on("guildMemberAdd" ...

javascriptnode.jsbotsdiscorddiscord.js

The Element Ui component fails to update when the prop of the Vue component changes

In my project, I have a parent component and several child components which all make use of the same prop. This prop is an array of keys that are used for a dropdown menu in element.js. Initially, when the children render for the first time, they do not co ...

javascriptvue.jsvuejs2vue-componentelement-ui

Map Infobox appearing on page load

I am working on a Google map project where markers and info boxes dynamically populate when the user clicks on the map. However, I now need the info box to be loaded initially when the map loads, without requiring a click event. I have tried writing some c ...

javascriptangularjsgoogle-maps