I am leveraging AngularJS to display a modal window with Bootstrap and Spring servlet integration

In my project, I am utilizing AngularJS to display multiple pages. One of these pages contains a smart-table where I showcase the details of "users". When I wish to edit one of the users, I aim to display the edit page as a popup window.

Below is an excerpt from my app.js file:

config.$inject = ['$routeProvider', '$locationProvider'];
function config($routeProvider, $locationProvider) {
    $routeProvider
    .when('/', {
        controller: 'HomeController',
        templateUrl: 'home',
        controllerAs: 'vm'
    })

    .when('/login', {
        controller: 'LoginController',
        templateUrl: 'login',
        controllerAs: 'vm'
    })

    .when('/register', {
        controller: 'RegisterController',
        templateUrl: 'register',
        controllerAs: 'vm'
    })

     .when('/users', {
        controller: 'usersListController',
        templateUrl: 'users',
    })

    .when('/user-modal', {
        templateUrl: 'user_model',
    })

        .otherwise({ redirectTo: '/login' });
}

Additionally, here is my controller code responsible for displaying the popup window:

this.openUser = function(row) {
                    service.GetUsers(row.userId).then(function(data){

                        var modalInstance = $uibModal.open({

                            templateUrl : '/user_model',
                            controller : 'MonitoringModalController',

                    };

Moreover, I utilized a Spring servlet for URL redirection. Here's a snippet of the code:

@RequestMapping(value = "/user_model", method = RequestMethod.GET)
public ModelAndView user_model(HttpServletRequest request) {
        try{
            logger.info("MappingController --> Users List...");
        }catch(Exception e){
            logger.fatal(new MasterProtectionLogger().reportError("MappingController.users()", e, logger));
        }
        return new ModelAndView("users/user_model");
    }

When attempting to trigger the popup window display by clicking on a button, an error occurs:

angular.js:10765 GET http://localhost:8080/MasterProtection/user_model 404 (Not Found)(anonymous function) @ angular.js:10765sendReq @ angular.js:10558serverRequest @ angular.js:10268processQueue @ angular.js:14792(anonymous function) @ angular.js:14808$eval @ angular.js:16052$digest @ angular.js:15870$apply @ angular.js:16160(anonymous function) @ angular.js:23618dispatch @ jquery-2.0.3.min.js:5y.handle @ jquery-2.0.3.min.js:5 angular.js:12520 Error: [$compile:tpload] Failed to load template: ./user_model (HTTP status: 404 Not Found)

Answer №1

Kindly review the references to user-modal and user-model. It appears there may be a typo.

Here is the incorrect reference:

 templateUrl : './user-modal',

and here is another incorrect reference:

@RequestMapping(value = "/user_model", method = RequestMethod.GET)

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

Every time I employ window.location, the Iframe becomes nested

I am experiencing an issue with my HTML structure: <html> <body> This is the container of the iframe <iframe src="/foo.html"> </iframe> </body> </html> (/foo.html) <html> <script type="text/javascript"> $( ...

One-page application featuring preloaded data from a backend API

Imagine building a single-page application that relies heavily on client-side interactions communicating with the server through API methods. When we land on the index page that displays all records from the database, we essentially make two initial requ ...

Javascript Error - Issue with Fuse.js: e.split() function is not recognized

Scenario - I am in need of implementing a fuzzy search feature, and therefore utilizing fuse.js for this purpose. I obtained the code snippet from fuzzy.min.js at https://github.com/krisk/Fuse/blob/master/src/fuse.min.js Challenge - Despite using the cod ...

Animation is not applied to Bootstrap Collapse on a row within a table

My Bootstrap 4 table has an issue - when I apply the "collapse" class to a table row, it behaves differently compared to applying it to a div element. Clicking "animate div" smoothly animates the target div, but clicking "animate tr" does not animate the ...

Tips for utilizing the "this" keyword in JavaScript

Here's a snippet of code that I'm having trouble with: this.json.each(function(obj, index) { var li = new Element('li'); var a = new Element('a', { 'href': '#', 'rel': obj ...

Is there a way to launch iframe links in the parent window of an Android native app?

I'm currently working on developing a directory-style application, and I am using iframes to embed other websites into the app. I would like the embedded site links to open within the parent window. In the Progressive Web App version, everything is w ...

Does angular have a feature comparable to JavaScript's .querySelectorAll()?

I developed an inventory calculator in JavaScript that provides item count based on weight. The calculator has 4 inputs, and now I'm looking to replicate the same functionality using Angular. Is there a method in Angular similar to .querySelectorAll() ...

Combining Angular subscriptions to fetch multiple data streams

I am looking to retrieve the most recent subscription from a group of subscriptions. Whenever the value of my FormControl changes, I want to capture only the latest value after the user has finished typing. Below is the code snippet I am using - let cont ...

Issues are arising with the .mouseover functionality within this particular code snippet

Learning Javascript has been a challenge for me so far. I tried following a tutorial, but the result I got wasn't what I expected based on the video. I'm wondering why that is and how I can fix it. I'm aiming to make a box appear suddenly w ...

Angular - Displaying a message on blur event when user updates input field

As I search for an effective way to validate forms in Angular without overly aggressive error messages, I have found that checking for $dirty and $touched before displaying messages generally works well. However, there is one scenario that poses a challeng ...

What is the target scope of an ng-model in AngularJS?

Currently in the process of familiarizing myself with Angular lingo... I'm considering whether it's appropriate to view the ng-model attribute as a reference to a data element within a parent scope... [is that accurate?] I am working on pinpoin ...

When running the command `npx create-react-app client`, an error is thrown stating "Reading properties of undefined is not possible (reading 'isServer')."

Installing packages. Please wait while the necessary packages are being installed. Currently installing react, react-dom, and react-scripts with cra-template... Encountered an error: Unable to read properties of undefined (reading 'isSer ...

The Laravel Mix Hot Module Replacement (HMR) server fails to start up

Laravel Mix Version: 6.0.43 Node Version (node -v): 16.13.1 NPM Version (npm -v): 8.1.2 OS: Windows 10 21h2 Description: Encountering an issue on a fresh installation of Laravel and other existing projects. When running npm run hot, the script tag sourc ...

What is the best way to say hello using jQuery?

I need some assistance with a task that involves entering my name into an input field, clicking a button, and having an h1 tag display below the input saying Hello (my name)! Unfortunately, I am struggling to figure out how to achieve this. Below is the H ...

Using the Rails cocoon gem to populate numerous input fields

I'm currently implementing the cocoon gem in my rails application, where I have a form with two nested fields (categories and subcategories). Initially, only the first field is visible while the second one remains hidden. When the first select field h ...

How can I create a pop-out message box in HTML similar to the style used in Gmail or OkC

As someone who isn't very experienced in client development, I hope you'll forgive me for asking what might be a simple question that can easily be solved with Firebug. I'm interested in learning how to create a feature like the OKCupid or G ...

Tips for displaying an error message when there is no match found in ng repeat due to filtering

I'm facing an issue with displaying an error message when no match is found after searching in a text box. I've used ng-show to display the message, but it's not working as expected. Can someone assist me with this problem? I am relatively n ...

Ajax requests are returning successful responses for GET and POST methods, however, no response is being received for

When I make a POST request within the same domain ( -> ), the responseXML contains the expected data. However, when I make the same request as a PUT, the responseXML is null for a successful request. I have tried using jQuery.ajax and even implemented i ...

Why won't Node.js let me redirect to my error page?

I've been putting together my newsletter project with the Mailchimp API, everything seems to be working fine except for when I try to redirect to a failure page if the status code is not 200. The browser shows an error message saying 'localhost r ...