Building a dynamic web form using JSP and Angular for the JEE platform

I am currently working on a banking project using JSP and angular 1.3.2. I have encountered an issue with a form where, upon blurring after typing the customer number, the customer's information such as name and address should be displayed if the customer exists. However, in my case, everything is showing up even when testing with a simple string in the servlet. The alert in the angular controller is also not displaying anything. I need help to identify and fix this issue. Any assistance would be greatly appreciated. Thank you in advance. Below are the relevant codes: JSP Page

var banking = angular.module('banking', []);
banking.controller('accountCtrl', ['$scope', '$http',
  function($scope, $http) {
    $scope.getClient = function() {
      $http({
        method: 'GET',
        url: 'account',
        params: {
          action: "getClient",
          numClient: $scope.numClient
        }
      }).success(function(data, status, headers, config) {
        alert(ok);
        $scope.nameCli = data.nomComplet;
        $scope.adresse = data.adresse;
        $scope.email = data.email;
        $scope.tel = data.telephone;
        $scope.sexe = data.sexe;
        $scope.datenaiss = data.dateNaissance;
      });
    };
    alert("ok");
  }
]);

...

Servlet</p>

<pre><code>@WebServlet(name = "Account_Servlet", urlPatterns = {"/account"})
public class AccountServlet extends HttpServlet {

    @EJB
private CompteEJBLocal compteEJB;
@Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        //response.sendRedirect("/home/ajouter_compte.jsp");
        System.out.println("ok");
        String action = request.getParameter("action");
        System.out.println("action " + action);
        switch (action) {
            case "getClient": {
                String numCli = request.getParameter("numClient");
                Client foundCli = compteEJB.unClient(numCli);
                System.out.println("client " + foundCli);
                ObjectMapper map = new ObjectMapper();
                String json = map.writeValueAsString(foundCli);
                response.getWriter().println(json);
            }
            break;
            default: {
            }
            break;
        }
    }

Answer №1

Here is the recommended format to use:

 $http({
         url: 'account',
         method: "GET",
         params: {
             action: "getClient",
             numClient: $scope.numClient
         }
    })
    .then(function(response) {
        // Handle success
    }, 
     function(response) { // Optional
        // Handle failure
    });

Make sure to call the method $scope.getClient in your form or button to execute it.

Answer №2

I have made changes to the controller code as follows: compteCtrl

There doesn't seem to be any activity in the server console

Take a look at the server console

Answer №3

When working with the HTML file, remember to utilize

data-ng-change="getClient(numClient)"
in place of ng-blur="getClient()".

For the Angular Controller File:

$scope.getClient = function(numClient) {
      $http({
        method: 'GET',
        url: 'account',
        params: {
          action: "getClient",
          numClient: numClient
        }
      }).success(function(data, status, headers, config) {
        alert(ok);
        $scope.nameCli = data.nomComplet;
        $scope.adresse = data.adresse;
        $scope.email = data.email;
        $scope.tel = data.telephone;
        $scope.sexe = data.sexe;
        $scope.datenaiss = data.dateNaissance;
      });
    };
    alert("ok");
  }

Answer №4

Here is a visual representation of how the form is being displayed for reference: view image here

It's worth noting that the form loading process is managed by a JavaScript script rather than a servlet.

Answer №5

I have identified the root cause of the issue, but I am struggling to find a solution. When I separate the form from the menu and load it directly from the do get of the servlet, everything functions correctly. I am able to print messages from the servlet and the controller as well. However, once it returns to the menu bar, neither the servlet nor the angular controller can detect the form, even though it is visible. I have loaded the form using a JavaScript code Script for sidebarmenu

Another issue I am facing is that Angular is not utilized on my homePage. Is it possible to use it on a page loaded from the homePage (triggered by clicking an element on the sidebarmenu) without using it on the homePage itself?

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

Get image data from Next.JS API and show it in the web browser

I am looking to utilize my own next.js endpoints to request an image that I can then embed into my website. Currently, the issue I am facing is that the image seems to be immediately downloaded and does not display in the browser window. import type { Next ...

Using AngularJS to access form field ids that are generated dynamically

I am dynamically generating form fields using ng-repeat and everything is functioning correctly. However, I now want to incorporate an angular datepicker component that is based on a directive. The issue I am facing is that it only seems to work with stat ...

Issue with scrolling in Droppable container on JQuery UI interface

I've encountered an issue with JQuery UI. In my code snippet, I can drag elements onto fields and when hovering over a field, it gets highlighted in green. However, I recently added the functionality to scroll while dragging. Now, I can scroll up and ...

Expanding Rows Feature in Angular Grid

I'm searching for an Angular grid that offers a variety of features: Data retrieval through Ajax Sorting and pagination functionality Headers that stick to the top of the grid Expandable rows, where clicking on a row reveals additional data below it ...

Achieve uninterrupted deployment of node.js applications by utilizing naught for zero downtime implementation

Recently, I began utilizing naught for deploying my node.js applications (https://github.com/andrewrk/naught). In my Ubuntu Server, I have a directory that contains my node.js (express) app. To deploy it, I used the command "naught start app.js" from tha ...

Struggling to determine if the checkbox has been ticked?

I have integrated a like button on my website using socket io to ensure that it updates for all users when the like button is clicked. I have successfully implemented a like() function that emits liked, increments a counter, and displays it on the page. Ho ...

Unable to get jQuery plugin to function properly within a .vue component

I am currently working on a Vue component for my Laravel 5.3 application. I am trying to integrate the Laravel File Manager into a standalone button, but it seems like it's not functioning properly. When I click on the button to choose an image, nothi ...

The command "Npm Start Causes sleep is not accepted" just popped up

After cloning a React project from GitHub, I proceeded to run npm install, which successfully installed the node_modules folder. However, upon trying to run npm start, I encountered the following error: 'sleep' is not recognized as an internal or ...

What is the method to retrieve the return value from this ajax request?

Here's a code snippet: var information = { ObtainInfo : function() { var url = 'http://www.bungie.net/api/reach/reachapijson.svc/game/info/'+storage.get('apikey'); $.ajax({ url: url, su ...

What is the best way to merge all project modules into a single file using the r.js optimizer?

While working with the r.js optimizer, I noticed that the final index.html file doesn't seem to allow for referencing just a single script without making any async calls to other scripts during a user's session. It appears to generate multiple gr ...

What methods can be used to prefill formatted HTML content when launching an email client?

My first step is to generate the formatted html code: onClick={(_) => { const content = `Check out what I found ..<div></div`; Next, I set the content variable window.location.href = `mailto:<a href="/cdn-cgi/l/email-protection" cla ...

Adjusting the brightness of colors using JavaScript

I am looking for a way to return different color tones for a specific color using JavaScript. For example, if I have the color code #4a4a4a, I want to be able to return #494949 and #666464. If there is a package or method that can achieve this, please sugg ...

Error encountered: Cannot load Bootstrap date time picker in MVC due to ReferenceError: $ is not defined

My issue arises when trying to incorporate the bootstrap date time picker - the calendar fails to load upon clicking on the "glyphicon glyphicon-calendar" icon. Despite adding all necessary files, an error persists: Uncaught ReferenceError: $ is not de ...

In Selenium version 2.32 with Java 1.6.0_07, using IE Webdriver for both 32 and 64 Bit systems, it has been observed that when running IE9, the

I am currently utilizing Selenium version 2.32, Java JDK 1.6.0_07, IE9 on Windows 7. Here's the issue at hand: While using IE WebDriver 32 Bit and clicking on a link that opens a new browser displaying a PDF, the PDF opens within the browser as ex ...

How to access v-for dynamically generated elements beyond the loop

How can I access a dynamically created item outside of a v-for loop in Vue.js? <li v-for="item in cart.items"> <h1>{{ item.product.name }}</h1> </li> <p>Is it possible to access {{ item.product.name }} out ...

Guide on uploading images to a NodeJS server from an Angular 2+ application

I have a NodeJS rest-API that can handle both images and text content in the same function. Currently, I am using multer in my NodeJS server to manage image uploads along with text content. Below is an example code snippet showcasing how I am handling this ...

Jackson: Deserialize a JSON object (missing some fields) into a Plain Old Java Object (POJO)

Recently, I encountered a JSON entry that looked like this: { "name" : "tom" "age" : 10 } Interestingly, some JSON entries also contain an additional field called address. In order to properly read this data into a P ...

Remember the functionality of a function

I have a function that loads a JSON file and updates the scope. If it encounters an error, it displays an ionicPopup with options to either click OK or retry. I want to be able to relaunch the function on retry. Below is my code: $scope.loadEvents = func ...

Updating the selected value in TomSelect based on an ajax response

I am facing an issue setting a value on TomSelect using ajax response. Normally, I would use the following code on a general dropdown: $('#homebasepeg').val(data.hmb_id).change(); However, when I try to apply this on TomSelect, it doesn't s ...

How can I use apps script to automatically remove old files from google drive that are over a month old?

Every week, I secure backups of my sheets to a backup folder using the following code. Now, I am looking for a way to automatically delete files older than 1 month from the backup folder. How can I add a script to accomplish this? Backup code (triggered w ...