Unable to open a modal in Angular UI after closing the initial modal

Hey there! I've been attempting to open a modal after closing the first one, but I'm encountering an issue where the second modal appears to be opened but is actually not. I'm struggling to understand what's causing this problem. Could someone lend me a hand, please?

Here's a snippet from myController.js:

$scope.detailsPdt = function(pdt, size)

        {
            $scope.cancel();
            $scope.pdt = pdt;

            $rootScope.modalInstance = $uibModal.open({
                animation : $scope.animationsEnabled,
                templateUrl : 'partials/detailsProduct.html',
                controller : 'ProductsController',
                size : size,
                scope : $scope,
                resolve : {}
            });
        }
javascriptangularjstwitter-bootstrap

Answer №1

The issue you're facing is that the first modal remains open when you attempt to open the second one.

To resolve this, you'll need to close the first modal and transfer its data to the second one as follows:

The first modal can be triggered from various sources (HTML or controller). Then, in myController1, close the first modal. In modalInstance.result.then(), proceed to call the second modal.

$scope.openSecondModal = function(size, data){

    var modalInstance = $uibModal.open({
    templateUrl: 'templates/mytemplate2',
    controller: 'myController2',
    size: size,
    resolve: {
        data: function(){
           return data;
        },

   });
   modalInstance.result.then(function(data2){


   });
};


$scope.openFirstModal = function(size){

    var modalInstance = $uibModal.open({
    templateUrl: 'templates/mytemplate1',
    controller: 'myController1',
    size: size,
    resolve: {

        }
    });
    modalInstance.result.then(function(data){
        if(data){
            //call the second modal
            $scope.openSecondModal('lg', data);
        }
    });
};

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

Utilizing asynchronous false in Wordpress Ajax functionality

Is there a way to use the AJAX return value outside the function in WordPress? For example: function get_login_member($) { $.post(ajax_object.ajax_url, {action: 'getloginmember'}, function (data) { data = JSON.parse(data); ...

javascriptphpjqueryajaxwordpress

Create a URL hyperlink using javascript

I am looking to create a link to a page that updates its URL daily. The main URL is where X represents the day of the month. For example, for today, July 20th, the link should read: In my JavaScript section, I currently have code that retrieves the cur ...

javascripthtml

Issue encountered while constructing an array within the component data following the 'created' event

It's been a while since I've dealt with Vue.Js, so my memory is a bit fuzzy. I'm facing an issue where I can't seem to modify a data array within a function that is called in the created hook. My goal is to create a multidimensional ar ...

javascriptvue.jsvue-component

Unable to display the last rendering time in AngularJS

I have made some modifications to my program in order to display the last time, but I am facing issues with it. Here is the code snippet: <h1> Time is {{date | date: "medium" }} </h1> $scope.date = function(){ Date.now(); } Unfor ...

angularjsdatetime

Ways to protect my login details when making an ajax request?

The scenario I am dealing with is as follows: I have developed a website using Javascript where users are required to input a username and password. Subsequently, the site makes an ajax call to the Webserver. On the other end, I have a PHP-powered Webser ...

javascriptphpjqueryajax

Will the script src onclick change have an effect after the page is fully loaded?

Imagine you have a script that loads right away when a page loads. Now, what happens if the script src changes when you click on a button? Will the new src get executed? Here is some example code: <button> click </button> <script class=" ...

javascript

AngularJS fetching data with two separate AJAX requests for both HTML and JSON responses

After activating network capture in my web browser to inspect the ajax calls coming out of AngularJS, I noticed that each call seems to result in two outcomes: URL|Protocol|Method|Result|Type|Received|Taken /p/jobs/03512dc8-6f25-49ea-bdff-0028ac2023cb|HTT ...

angularjsnancy

Issue with dynamically adding AngularJS directives and their scopes

Check out this live example I have set up: Angularjs Circle Directory I've created a directory that is dynamically added when you click a button. Each time a circle directory is added, the counter inside increases. However, I'm facing an issue ...

angularjsangularjs-directiveangularjs-scope

Tips for implementing a repeater item to function beyond the ng-repeat directive

Recently, I decided to play around with AngularJS and now I seem to be facing a small issue with ng-class. Specifically, I'm attempting to change the color of an awesome font icon. <div ng-controller="MyCtrl"> <i ng-class="{'test': ...

javascriptangularjsng-class

What is the correct way to apply styles universally instead of using "*" as a selector?

With Nextron, I was able to successfully run my code, but upon opening the window, I noticed that the body tag had a margin of 8px. Although I managed to change this using the dev tools, I am unsure how to permanently apply this change in my code. When att ...

javascriptcssnext.jselectron

Error: The function was expecting a mapDiv with the type of Element, but instead undefined was passed - google

I have a map within a div tagged with #mapa. Whenever I try to plot a route on the map, it refreshes. I don't want the map to refresh, and here is the code I currently have: <div style="height: 500px; width: auto;" #mapa> <google-map heigh ...

javascriptangulartypescriptgoogle-maps

Unable to establish connection with Uploadthing due to a timeout error

I am facing timeout errors while setting up the upload feature. app/api/uploadthing/core.ts import { createUploadthing, type FileRouter } from "uploadthing/next"; import { auth } from "@clerk/nextjs"; const handleAuth = () => { c ...

javascriptreactjsnext.jsupload

What is the procedure for transferring the inputted data from an HTML file to its corresponding TS file and subsequently to a different component file?

I have created two components, a login and a home-page. I am attempting to capture user input from the login template, pass it to the login component, and then display it on the home-page template using the home-page component. What is the best approach to ...

javascriptangulartypescript

Next.JS: The Key to Long-Term Data Storage

How can we retrieve and maintain data during app initialization or user login so that it persists throughout the application? Currently, every time a page is refreshed, the context is cleared and attempting to use getServerSideProps results in undefined ...

javascriptreactjsnext.js

Issue with utilizing display: table and overflow: hidden in Internet Explorer and Firefox, functioning properly on Webkit and Blink

JSFiddle : http://jsfiddle.net/h7xvr2t9/2/ I have been experimenting with ways to achieve some effects: Animating a hidden DIV to slide into view from below a visible container Centering text/image on a link to trigger the animation HTML <div clas ...

javascripthtmlcss

While it is possible to filter by friend.brand.id within friends in Angular, unfortunately the || undefined trick cannot be used to reset the filter when it is NULL

In the futuristic world of 2075, immortal humans have subjugated mortal humans. There exists a unique store where mortal friends are sold, and efforts are being made to develop an app that allows customers to manage their friends based on their favorite br ...

javascriptangularjsangular-filters

Is there a way to manually add route resolve data to a controller without using automatic injection?

Two routes in my application share a controller, but one route requires data to be resolved before the view loads while the other does not. Here is an example of the routing segments: ... when('/users', { controller: 'UsersCtrl', ...

javascriptangularjs

Get the nearest offspring of the guardian

I have a main 'container' div with multiple subsections. Each subsection contains 1 or 2 sub-subsections. Let's say I have a variable that holds one of the subsections, specifically the 4th subsection. This is the structure:container > s ...

javascriptjqueryhtml

Encountering difficulty when integrating external JavaScript libraries into Angular 5

Currently, I am integrating the community js library version of jsplumb with my Angular 5 application (Angular CLI: 1.6.1). Upon my initial build without any modifications to tsconfig.json, I encountered the following error: ERROR in src/app/jsplumb/jspl ...

javascripttypescriptnpmangular-cliangular5

javascript to retrieve data by reducing

Here is the code snippet I am working with: var points = 4; var yModifier = []; for (var i = 0; i <= points; i++) { yModifier.push([]); }; yModifier.forEach( (a, j) => { var start = j; var end = start + points; fo ...

javascriptarrays