Tips for utilizing the onload attribute alongside the ng-controller directive to run a function that has been established within the controller

When trying to call the submit() function as soon as the page loads, I keep encountering a submit() method not found error. The positioning of ng-controller and onload is confusing to me.

If there is an alternate method in Angular to achieve this, please provide some guidance.

PS: This is a snippet of code with all variables defined.

<body ng-controller="DashboardDisplay" onload="submit()">
    <div class="container-fluid" >

        {{scope.arr}}
    </div>
</body>
<script>

var myApp = angular.module('myApp',[]);
myApp.controller('DashboardDisplay', ['$scope','$http',function($scope,$http) {

    $scope.submit = function(){
        var jsonOb = {"A":"B"};
        $http.post(URL,jsonOb).
        success(function(response) {
            console.log('got it' + response);
            $scope.arr=response;
        }).
        error(function(data, status, headers, config) {
        console.log('nufin' + status);
        });
    }
    }]);

Answer №1

Replace onload with ng-init in the following code snippet:

<body ng-controller="DashboardDisplay" ng-init="submit()">

Also, eliminate 'scope' before 'arr' in the HTML code from {{scope.arr}} to {{arr}}

To see a working DEMO, click on this link: https://jsfiddle.net/Shital_D/x2k8n23n/1/

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

Exploring the dynamic data loading feature in Vue 3 by fetching data from the server and displaying it using a v-for

I am encountering an issue where I want to display data dynamically from a database using a v-for loop. However, when I attempt to push new data into the array, they show correctly in a console.log() but do not reflect any changes in the template. I have ...

Obtain XML information that is not categorized under any specific node

Currently in the process of upgrading an extremely outdated webpage to utilize Angular. The webpage is currently loading data from an XML document structured as follows: <xml> <PREMout> <PolicyNumber>12345</PolicyNumber> &l ...

Ways to dynamically eliminate focus around text inputs

I have created an HTML page and here is the link to it: https://i.sstatic.net/n8UdU.png My main goal is to remove the black border around the text input on this page. The challenge I am facing is that the 'things to do' list is generated dynamic ...

issue encountered while passing a callback in a res.render() function

Currently, I am working on a small application where I am fetching data from remote JSON files to generate statistics that will be displayed in an EJS file later. My objective is to pass separate values for rendering and then utilize them within the EJS d ...

Ensure that the jQuery datepicker is set with a maximum range of 365 days between the two input fields

Setting Up jQuery Datepicker Inputs I have implemented two jQuery datepicker inputs with default settings as shown below: $("#polis_date_from").datepicker({ uiLibrary: "bootstrap4", changeYear: true, changeMonth: true, dateFormat: "yy.mm.dd", ...

The overflow of Highcharts tooltips is set to be hidden

My issue arises when the chart drawing area is smaller than a highchart tooltip, causing part of the tooltip to be hidden as it overflows the chart. I would like the tooltip to remain visible at all times, regardless of the size of the chart area. I have ...

Updating MongoDB collections in Mongoose with varying numbers of fields: A step-by-step guide

Updating a mongodb collection can be challenging when you don't know which fields will be updated. For instance, if a user updates different pieces of information on various pages, the fields being updated may vary each time. Here is my current appro ...

Tips for excluding the HTTP OPTIONS request from being intercepted by the express.js authentication middleware

I have set up a backend API using express.js that interacts with an AngularJS single-page application. To secure access to specific resources, I am utilizing token authentication to verify clients. In order to validate whether the incoming request from th ...

Data from Ajax calls is only available upon refreshing the page

I am working on adding a notification button for inactive articles on my blog. I want to use AJAX so that the admin does not have to reload the page to view newly submitted inactive articles. I am trying to prepend HTML data to: <ul id="menu1" class= ...

"Improprove your website's user experience by implementing Material UI Autocomplete with the

Recently, I experimented with the Autocomplete feature in Material UI. The focus was on adding an option when entering a new value. You can check out the demo by clicking on this link: https://codesandbox.io/s/material-demo-forked-lgeju?file=/demo.js One t ...

Not entirely certain about how to execute this concept using AJAX

While pondering the development of an instant messaging application, I aimed to decrease the frequency of AJAX requests (currently one every .2s). This led me to devise a unique approach: Initiate an AJAX request from the user side to the server. Wait ...

Tips for utilizing a function within a callback function using jQuery

When using jQuery's .load() to load HTML files into a parent webpage, I am interested in executing jQuery/JS from the parent page against the loaded HTML file. It seems like this can be achieved with a callback function. The jQuery I'm using is ...

How can I extract information from an HTML table using AngleSharp?

Seeking a way to extract song data from a playlist on a music streaming website This table contains song information: <tr class="song-row " data-id="ef713e30-ea6c-377d-a1a6-bc55ef61169c" data-song-type="7" data-subscription-links="true" data-index="0" ...

Manage how child components are displayed in React in a dynamic manner

My React parent component contains child components that are rendered within it. <div id="parent"> {<div style={{ visibility: isComp1 ? "visible" : "hidden" }}><MyComponent1 {...props}/></div>} ...

Why are certain items excluded from comparison within a sorting algorithm?

In a scenario where an array of strings needs to be sorted based on multiple criteria, such as copying a list of directory paths, consistency in the result is crucial regardless of the initial order of the input. The following requirements need to be met: ...

Exploring the power of Jquery's id selector in Javascript

Recently, I came across a unique approach to using the ID selector in jQuery: $("*[id*=foo]").val() I'm curious about why this method is being used and how it compares to the standard id selector in jQuery. What sets this implementation apart from t ...

Storing a class method in a variable: A guide for JavaScript developers

I am currently working with a mysql connection object called db. db comes equipped with a useful method called query which can be used to execute sql statements For example: db.query('SELECT * FROM user',[], callback) To prevent having to type ...

Disabling a tooltip using the tooltip-is-open attribute is ineffective

I am looking to implement a clickable element with a font awesome icon that can copy data to the clipboard. Additionally, I want to display a tooltip that disappears when the cursor leaves the element. Since I need this functionality in multiple instances ...

Using jQuery to upload a file by reading from the local device

I am attempting to upload a file using jQuery in pure JavaScript by reading the file from a local path. The typical approach involves fetching the file from an HTML input and appending it to FormData. var formData = new FormData(); formData.append("test", ...

Using Service as a Parameter for a Controller

I have an AngularJs controller that retrieves a list of categories from the ASP.NET MVC controller. The code works perfectly fine and here is the snippet: productApp.controller('categoryController', function ($scope, categoryService) { //The con ...