AngularJS secondary controller experiencing malfunctions

Having an issue with my second controller (RegisterController) in the module I've created. The first one is working perfectly fine. I have both controllers in a file named user.js

var app = angular.module("User", []);
app.controller('LoginController', ['$scope', '$http',
  function($scope, $http) {
    $scope.user = {
      email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b1d3d3d3f1d2d2d29fd2dedc">[email protected]</a>',
      password: '',
      username: 'sex',
    };
    $scope.login = function() {
      return $http.post('http://localhost/cw/index.php/rest/resource/user/action/login', $scope.user).then(function successCallback(response) {
        if (response.data.success == 'true') {

        }

      }, function errorCallback(response) {

      });;

    }

  }
]);
app.controller('RegisterController', ['$scope', '$http',
  function($scope, $http) {
    $scope.user = {
      email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="05646766453437362b666a68">[email protected]</a>',
      password1: 'lol',
      password2: '',
      username: 'blah',
      profile_picture: '',
      dobDay: '',
      dobMonth: '',
      dobYear: '',
    };
    $scope.submit = function() {
      alert("submit");

    }
  }
]);
Regarding my HTML structure:

<table>
  <tr>
    <td>
      <span>
                        <table style="text-align: right" ng-app="User" ng-controller="LoginController">
                            <tr>
                                <td>
                                    Email
                                </td>
                                <td>
                                    <input type="text" ng-bind="user.email" ng-model="user.email">
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Password
                                </td>
                                <td>
                                    <input type="password" ng-bind="user.password" ng-model="user.password">
                                </td>    
                           </tr>
                           <tr>
                               <td></td>
                               <td style="float:left">
                                    <button ng-click="login()">login</button>
                               </td>
                           </tr>
                        </table>
                    </span>

    </td>

    <td>
      <div style="border-left:1px solid">
        <table style="text-align: left" ng-app="User" ng-controller="RegisterController">
          <tr>
            <td>
              Username
            </td>
            <td>
              <input type="text" ng-bind="user.username" ng-model="user.username">
            </td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td>
              Email
            </td>
            <td>
              <input type="email" ng-bind="user.email" ng-model="user.email">
            </td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td>
              Password
            </td>
            <td>
              <input type="text" ng-bind="user.password1" ng-model="user.email">
            </td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td>
              Retype password
            </td>
            <td>
              <input type="text" ng-bind="user.password2" ng-model="user.password">
            </td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td>
              Date of Birth
            </td>
            <td>
              <input type="text" ng-bind="user.dobDay" ng-model="user.password" value="DD" size="2" maxlength="2">
              <input type="text" ng-bind="user.dobMonth" ng-model="user.password" value="MM" size="2" maxlength="2">
              <input type="text" ng-bind="user.dobYear" ng-model="user.password" value="YYYY" size="4" maxlength="4">
            </td>
          </tr>
          <tr>
            <td>
              Profile picture
            </td>
            <td>
              <input type="file" ng-bind="profile_picture">

            </td>
          </tr>
          <tr>
            <td></td>
            <td style="float:left">
              <button ng-click="submit()">Submit</button>
            </td>
          </tr>
        </table>
      </div>
    </td>

  </tr>

</table>

Clicking the button doesn't seem to trigger any action. Any insights on what might be going wrong? Still getting acquainted with AngularJS. Appreciate any guidance.

Answer №1

  • Place your ng-app="User" within the table element.
    • Remove any other instances of ng-app="User".
    • Remember, you can only define ng-app once when using multiple controllers.

var app = angular.module("User", []);
          app.controller('LoginController', ['$scope', '$http',
            function($scope, $http) {
              $scope.user = {
                email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cdafafaf8daeaeaee3aea2a0">[email protected]</a>',
                password: '',
                username: 'sex',
              };
              $scope.login = function() {
                return $http.post('http://localhost/cw/index.php/rest/resource/user/action/login', $scope.user).then(function successCallback(response) {
                  if (response.data.success == 'true') {

                  }

                }, function errorCallback(response) {

                });

              }

            }
          ]);
          app.controller('RegisterController', ['$scope', '$http',
            function($scope, $http) {
              $scope.user = {
                email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5f3e3d3c1f6e6d6c713c3032">[email protected]</a>',
                password1: 'lol',
                password2: '',
                username: 'blah',
                profile_picture: '',
                dobDay: '',
                dobMonth: '',
                dobYear: '',
              };
              $scope.submit = function() {
                alert("submit");

              }
            }
          ]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
          <div ng-app="User">

            <table>
            <tr>
            <td>
            <span>
            <table style="text-align: right" ng-controller="LoginController">
            <tr>
            <td>
            Email
            </td>
            <td>
            <input type="text" ng-bind="user.email" ng-model="user.email">
            </td>
            </tr>
            <tr>
            <td>
            Password
            </td>
            <td>
            <input type="password" ng-bind="user.password" ng-model="user.password">
            </td>
            </tr>
            <tr>
            <td></td>
            <td style="float:left">
            <button ng-click="login()">login</button>
            </td>
            </tr>
            </table>
            </span>

            </td>

            <td>
            <div style="border-left:1px solid">
            <table style="text-align: left" ng-controller="RegisterController">
            <tr>
            <td>
            Username
            </td>
            <td>
            <input type="text" ng-model="user.username">
            </td>
            <td> </td>
            <td> </td>
            </tr>
            <tr>
            <td>
            Email
            </td>
            <td>
            <input type="email" ng-model="user.email">
            </td>
            <td> </td>
            <td> </td>
            </tr>
            <tr>
            <td>
            Password
            </td>
            <td>
            <input type="text" ng-model="user.email">
            </td>
            <td> </td>
            <td> </td>
            </tr>
            <tr>
            <td>
            Retype password
            </td>
            <td>
            <input type="text" ng-model="user.password">
            </td>
            <td> </td>
            <td> </td>
            </tr>
            <tr>
            <td>
            Date of Birth
            </td>
            <td>
            <input type="text" ng-model="user.password" value="DD" size="2" maxlength="2">
            <input type="text" ng-model="user.password" value="MM" size="2" maxlength="2">
            <input type="text" ng-model="user.password" value="YYYY" size="4" maxlength="4">
            </td>
            </tr>
            <tr>
            <td>
            Profile picture
            </td>
            <td>
            <input type="file">

            </td>
            </tr>
            <tr>
            <td></td>
            <td style="float:left">
            <button ng-click="submit()">Submit</button>
            </td>
            </tr>
            </table>
            </div>
            </td>

            </tr>

            </table>

          </div>

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

The art of controlling iframe elements with jquery

I've been researching various topics related to this issue, but I'm still unable to achieve the desired outcome. Currently, I am embedding an iframe within an HTML document like so: <iframe class="full-screen-preview__frame" id="nitseditpre ...

Utilizing a Buefy element without Vue.js integration

Is there a way to generate a Buefy notification without utilizing a Vue component? Specifically, I'm attempting to implement a Buefy notification within the axios interceptor below: import axios from "axios"; import { Notification } from "buefy/dist/ ...

In Javascript, the DOM contains multiple <li> elements, each of which is associated with a form. These forms need to be submitted using AJAX for efficient

I have a list element (ul) that includes multiple list items (li), and each list item contains a form with an input type of file. How can I submit each form on the change event of the file selection? Below is the HTML code snippet: <ul> ...

Dynamic autocomplete feature with AJAX integration for filtering in Flask

Looking for some guidance on creating an HTML form with two input fields. Check out the HTML template code below: <form role="form" action="/cities/" method="get" autocomplete="on"> <label for="#input1"><strong>Country:</strong&g ...

Tips for utilizing console log within a react form component

I'm currently exploring ways to communicate with a React form in order to provide it with an object.id for updating purposes. While I can successfully console log the object.id within the update button and modal, I am struggling to confirm if the val ...

How can I submit a form or retrieve HTML content using JavaScript without using an iframe?

Background: My current job involves transcribing paper reports using a webapp that is quite old and cannot be updated or connected to a database directly. The system only checks for duplicate unique IDs once the entire form is submitted. This often leads ...

Converting an MVC form into JSON using Jquery

I am encountering an issue with serializing my MVC form to JSON using JQuery and then deserializing some values, like the input field value, on the backend in C#. I have tried to serialize it in JSON without success. Can someone please assist me with this ...

Releasing the mouse button after dragging successfully without the use of any libraries

I have implemented a pure CSS snap scroll feature and now I need to determine the position of an element in relation to the viewport once the user stops dragging. However, I prefer not to rely on any complex libraries as I do not require any actual movemen ...

Guide to monitoring updates to a universal server-side variable in Angular 2

I am currently developing an application using Angular 2 with Electron and Node. The tests are executed on the server, and the results are stored in a global variable array named testResults. I am able to access this array in Angular by using: declare var ...

Using NodeJS with the Express framework to send a GET request

Can express be used as a client-module for making http-requests to another server? Currently, I'm handling requests like this: var req = http.get({host, path}, function(res) { res.on('data', function(chunk) { .... } } This ...

Safari AJAX glitch - Unable to load requested resource

Today, an unexpected bug has appeared in a web app I'm currently developing. Without making any changes to the code, this bug suddenly emerged: I am sending AJAX requests (using vanilla JavaScript instead of jQuery) to our local server running MAMP P ...

Display a list of errors from an array in JavaScript or jQuery, and output them into a designated <

I need assistance with displaying a list of error messages in a specific div. Within my code, I have a #error-list div and an array called errors that contains various error messages: var errors = ["First name is blank", "Last name is blank", "Company na ...

If I type too quickly in the input field, it ends up displaying the incorrect div

I need to display two different dropdowns in my input field. To achieve this, I am using a method called shouldShowWarningBox that gets triggered every time the user updates the input and updates the value of showWarningBox accordingly. However, when I typ ...

rearranging items from one list to another list

I've encountered an issue in my HTML code that I need help with. I have included some classes for clarity, but their specific names are not essential. My goal is to make the "sub-nav" element a child of the "mobile parent" list item on mobile devices. ...

Page elements subtly move when reloading in Chrome

I am experiencing an issue with a div that has left and top offsets randomly selected from an array of values upon page load. Most of the time, it works fine. However, occasionally, upon refreshing the page, the window scrolls down slightly, revealing the ...

Encountering difficulty in implementing two modals simultaneously on a single web page while utilizing the useDisclosure() hook in Ch

ChakraUI provides a custom hook called useDisclosure() which gives you access to isOpen, onClose , onOpen. const { isOpen, onOpen, onClose } = useDisclosure() You can use the onOpen function as an onClick handler for a button to open a modal. <Modal ...

Display all months on mobile screen using Mui DesktopDatePicker

Looking for a Better Date Range Picker I've been working on a project that requires a date range picker, and I opted to use the Mui date range picker. While it works well on desktop, I encountered an issue with mobile view where only one month is sho ...

Troubleshooting problem with dynamic filter in AngularJS using ngTable

I am trying to implement a filter for my ngTable. Initially, in the root of the controller, outside of any function, I set the filter like this: $scope.filters = { nomSociete: 'test' } and then later on I reload the tableParamsContacts lik ...

Having trouble with JQuery click function not executing on initial click?

As I scoured through various resources looking for solutions to issues similar to mine, I stumbled upon numerous helpful insights. However, after going through approximately 15 of them, I hit a roadblock in finding someone who has encountered the exact sam ...

Navigating following a JQuery AJAX request in PHP

After clicking the login button, I utilize JQuery's POST method to retrieve data from login.php to check if the login was successful. If it fails (no user found), the appropriate message is displayed. However, when attempting to redirect a user (whic ...