Is there a way to swap out a modal dialog for an HTML page? I am looking for a method to navigate to an HTML page without relying on

I am in the process of developing a web application using jhipster, which incorporates bootstrap and angular js.

When I create a new entity, like Department, it automatically generates CRUD operations for me.

Upon creating a department, a modal popup appears. However, I prefer this to be displayed on a separate HTML page rather than as a popup.

How can I change the modal dialog to open in a new HTML file instead? https://i.sstatic.net/U0b3d.png

This is my current state.js file:

.state('department.new', {
        parent: 'department',
        url: '/new',
        data: {
            authorities: ['ROLE_USER']
        },
        onEnter: ['$stateParams', '$state', '$uibModal', function($stateParams, $state, $uibModal) {
            $uibModal.open({
                templateUrl: 'app/entities/department/department-dialog.html',
                controller: 'DepartmentDialogController',
                controllerAs: 'vm',
                backdrop: 'static',
                size: 'lg',
                resolve: {
                    entity: function () {
                        return {
                            deptId: null,
                            deptName: null,
                            id: null
                        };
                    }
                }
            }).result.then(function() {
                $state.go('department', null, { reload: true });
            }, function() {
                $state.go('department');
            });
        }]
    })

Do you recommend changing the state configuration like this?

.state('department.new', {
        parent: 'department',
        url: '/new',
        data: {
            authorities: ['ROLE_USER']
        },
        views: {
            'content@': {
                           templateUrl: 'app/entities/department/department-dialog.html',
                controller: 'DepartmentDialogController',
                controllerAs: 'vm',
            }
        },
                           resolve: {
                    entity: function () {
                        return {
                            deptId: null,
                            deptName: null,
                            id: null
                        };
                    }
                }
          .result.then(function() {
                $state.go('department', null, { reload: true });
            }, function() {
                $state.go('department');
            }),
                  })

Answer №1

Similar to standard web pages, you have already located the necessary information but there are some slight adjustments and corrections required, such as implementing translatePartialLoader.

        .state('department.new', {
                parent: 'department',
                url: '/new',
                data: {
                    authorities: ['ROLE_USER']
                },
                views: {
                    'content@': {
                        templateUrl: 'app/entities/department/department-dialog.html',
                        controller: 'DepartmentDialogController',
                        controllerAs: 'vm'
                    }
                },
                resolve: {
                    translatePartialLoader: ['$translate', '$translatePartialLoader', function ($translate, $translatePartialLoader) {
                        $translatePartialLoader.addPart('department');
                        return $translate.refresh();
                    }],
                    entity: function () {
                        return {
                            deptId: null,
                            deptName: null,
                            id: null
                        };
                }
            })

Answer №2

To confirm, please specify that your current status is department, and if you are creating a new department, you should create a state called department.new.

If so, all you need to do is pass the template URL directly without having to open the uib modal. .state('department.new', { url: '/new/', controller: 'DepartmentDialogController', controllerAs: 'vm', templateUrl: 'app/entities/department/department-dialog.html' })

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

Discover the Power of Grouping by Distinct Names in D3

Data newdata = [ {'Name':'Andrew', 'Country':'US', 'Start date':'2012-7-2','Total':'30days' }, {'Name':'Kat', 'Country':'US', ' ...

What is the daily limit for free Google Places Search/Details requests?

After enabling billing for my Google Places API credentials and using the JavaScript SDK, I found myself even more confused after reading through the documentation on usage and billing. I want to avoid any surprise charges this month due to exceeding limit ...

What steps should be taken to execute Node.js on a web hosting platform?

I am in the process of developing a 2D MMORPG game and have successfully uploaded both the client and socket.io server on my web hosting platform. However, I am facing a challenge in starting the server.js file. I believe I need to run Node with the packag ...

Access the angular controller using the radio button option

I am looking to showcase data in an HTML table retrieved from an Angular controller. I have the controller set up but I am unsure about how to display the data when a radio button is selected. <div class="radio"> <label class="radio-inline" ...

Javascript navigating through the User control

Our current folder arrangement looks like this: ParentFolder HostPage1.aspx UserControlsFolder UserControl.ascx AnotherFolder HostPage2.aspx The UserControl.ascx file is utilized in both HostPage1.aspx AND HostPage2.aspx I have an e ...

When the loading of data in vue is delayed, the information may not be accessible to various child components

`I recently started working with Vue and have encountered a problem. The main parent component on this page is as follows, with 2 child components. The structure is like this {CURRENT PAGE..} > {FancyButton} > {AnotherViewChild} I am trying to pass a ...

Using JavaScript for loops to return an empty array

When comparing the arrays in bakeryA and bakeryB with the ingredients of each recipe, the chooseRecipe function should print the name of the recipe if both bakeries have an ingredient for it. In this scenario, the output should be Persian Cheesecake. Howev ...

Strategies for managing JSON data with numeric strings

I have implemented a PHP code to fetch JSON data from a web server. Here is the code snippet: $result = mysql_query("select lat,lng from gpsdata limit 10"); $rows = array(); while($r = mysql_fetch_assoc($result)) { $rows[] = $r; } print json_encod ...

Stop angular from processing a URL

I am working on an Angular web page that features a Twitter Bootstrap carousel component. The carousel includes arrow buttons for navigating to the next or previous image, and the URLs associated with these actions are as follows: http://localhost:8080/#m ...

Guide on integrating database information into an array with Vue.js

I'm having trouble retrieving data from Firestore and applying it as my array. I expect to see objects in the console but nothing is showing up. Should the method be called somewhere in the code? My method created() is functioning, but only when I han ...

CurrentStyle in IE is not accurately reading the inherited font size from the computed style, leading to incorrect results

Here is a little test case I've compiled for you: http://jsfiddle.net/D4sLk/2/ The font sizes set in this case are as follows: * (everything): 12px container: 20px test element: inherit The hierarchy of the DOM is: container > test element. W ...

Challenges with displaying a scene in certain browsers using Three JS version 71

In my three.js v71 project, I am experimenting with adding a meshphong material and displaying it on the screen once material caps are added. Surprisingly, everything works perfectly when I render it on Chrome version 42.0 (Linux). However, when I attempt ...

JavaScript code for calculating percentage equally distributed

const convertPercent = (num, param) => { const array = []; for(let i=(param ? 0 : 1); i <= num; i++) { array.push( (param ? i : 1) * 100 / num ); } return array; } console.log( convertPercent(7,true)[5] ); ...

What is the best way to customize the CSS of the Skype contact me button?

I am struggling with customizing the Skype contact me button. The standard Skype button has a margin of 24px and vertical-align set to -30px. I have tried removing these styles but have had no success. Here is the code snippet I am working with: Skype ...

The Vue/Vuetify wrapper component does not automatically pass on the `hide-details` parameter to the input component

I recently crafted a custom wrapper for the v-select input using Vuetify. Along with custom properties, I utilized the v-bind="$props"attribute to inherit all props. Upon testing, I observed that while this method applies to most props, it doesn ...

Jhipster command was not found and is not recognized as an internal or external command, executable program, or batch file

I recently attempted to install JHipster by following the instructions provided at and using the JHipster Quick Start guide. However, when trying to run it on my Windows 10 system, I encountered an error stating "jhipster is not recognized as an internal ...

What are some solutions for resolving the npm error code elifecycle issue?

After following the documentation, I successfully installed React JS but encountered an error when trying to run the app. The error code displayed was elifecycle npm err errno 1. Can someone please assist me in resolving this issue? Additionally, it's ...

How can I prevent nested setTimeout functions with identical names from occurring?

Attempting to utilize nested timeOut with the same names, which functions similar to a loop, although not exactly. An example that I tried is: let i = 1; setTimeout(function run() { func(i); setTimeout(run, 100); }, 100); which was taken from this li ...

The JavaScript onClick function is unable to identify the object

"Newbie" JavaScript Question:-) I'm struggling with a JS function in my code: <script type="text/javascript"> $(function () { $('.shoppinglist-item-add').ShoppinglistItemAdd(); }); </script> This "shoppinglistI ...

New replacement for the .selector method that has been eliminated in JQuery version 3.0

The JQuery version 3.0 has permanently removed the .selector property, leaving me confused about what to use as a replacement for it. I currently have utilized the .selector like this in my code: var TaxYearNode = $(EmployerLatestYear).find("TaxYear&q ...