Is it possible to invoke an AngularJs service by clicking a button?

Recently, I've been working on some AngularJS code involving a service and controller.

 angular.module('myModule', []).service("AttendanceService", function ($http) {
        this.getdata = function () {

            return $http({
                method: "post",
                url: "Dashboard/GetAttendanceReport",
                params: [{ EmpID: $("#nameofEmp").val(), YearID: $("#YearIn").val() }],
                dataType: "json"
            });
        };
}).controller('myController', function ($scope, AttendanceService) {

        GetAlldata();
        function GetAlldata()
           {
            var getAttendanceData = AttendanceService.getdata();  
           }
            })

In my current setup, all I need is to call the above service like so:

return $http({
                method: "post",
                url: "Dashboard/GetAttendanceReport",
                params: [{ EmpID: $("#nameofEmp").val(), YearID: $("#YearIn").val() }],
                dataType: "json"
            });

with just a button click

   $("#btnLoad").click(function (event) {

    });

I'm wondering if this can be done. This is all pretty new to me...

Answer №1

To enhance the functionality of your factory, make the following adjustments:

angular.module('myModule', []).service("AttendanceService", function ($http) {            
    var fac = {};
    fac.getData = function () {
        return $http({
            method: "post",
            url: "Dashboard/GetAttendanceReport",
            params: [{ EmpID: $("#nameofEmp").val(), YearID: $("#YearIn").val() }],
            dataType: "json"
        });
    };
    
    return fac;
})

$("#btnLoad").click(function (event) {
    AttendanceService.getData();
});

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

Is there a way to update the color of a button once the correct answer is clicked? I'm specifically looking to implement this feature in PHP using CodeIgniter

Within my interface, I have multiple rows containing unique buttons. Upon clicking a button, the system verifies if it corresponds to the correct answer in that specific row. The functionality of validating the responses is already functional. However, I a ...

Utilize MetroUiCSS to effortlessly integrate a sleek calendar into your AngularJS application

I'm looking to incorporate a calendar from Metro Ui CSS into my project. Here is the link to the calendar: However, I am struggling with how to activate the calendar. I have already included all necessary scripts in my index.html (3 scripts) and have ...

Looking for a substitute for iframes when using jQuery UI tabs?

I currently have a Spring-based web application that integrates with jQuery Tabs. What I'm doing is building a data string with specific parameters and appending it to a URL: var hrefData = "?" + item1 + "&" + item2 + "&" + item3; var href = ...

In React, ensure a component's state is preserved when the browser history changes

I recently developed a React application that features a classic layout with a left-side menu, title, footer, and main content section. The side menu includes navigation links structured using components such as <List>, <ListItem>, etc. from th ...

Hover over two different divs with JQuery

I have a situation where I have two HTML table rows. When I hover over the first row, I want to display the second row. However, once the mouse leaves both rows, the second row should be hidden. Is there a way to achieve this using JQuery? <tr class=" ...

Cross-Origin Resource Sharing (CORS) for HTML

Here is a code snippet I found on http://jakearchibald.com/scratch/alphavid/ $("#video").append('<video id="movie" style="display:none" autobuffer><source id="srcMp4" src="https://host-away-from-host.com/file.mp4" type=\'video/mp4; ...

Steps for updating the property "project_id" within a nested JSON array to "project_name"

Issue: [ { "project_id": 1, "project_name": "CDP", "role": "PL" }, { "project_id": 2, "project_name": "Admincer", "role": "PM" }, I am trying to extract the "project_id" property from the above JSON array and add it to another array using a specific ...

What is the best way to send a confidential string from my Node.js backend to my Angular frontend without it being visible to the user?

Currently, I'm working on a project that involves Front-end development with Angular and Back-end with NodeJS. In the backend, I compile Angular static files using the command: response.sendFile(path.join(__dirname, 'dirname', 'index.h ...

Issue: Trouble with ajax form functionality

I'm a beginner in ajax, js, and php. Recently, I set up a simple contact form. <form id="contact-form" method="post" action="process.php" role="form"> <div class="messages"></div> <div class="form-group"> <l ...

Error alert: Blinking display, do not dismiss

I am trying to make it so that when the "enviar" button is clicked, the "resultado" goes from being hidden ("display:none") to being visible ("display:block"). This is my html document: <script type="text/javascript"> function showResu ...

Having trouble getting a Mocha test to display two decimal places in Javascript? Both Big and Decimal libraries are causing issues

After encountering an error with the Big library, I decided to switch to Decimal. First, I ran npm install Decimal Then, I added the following code: const Decimal = require('decimal'); Even after following the examples, my comparison returned { ...

Eliminating the need for RequireJS in the Typescript Visual Studio project template

After integrating RequireJS into my Typescript template using the nuget package manager, I found that it was more than what I needed and decided to uninstall it. Even though I removed the package through nuget and the files were deleted properly, my Typesc ...

Modify an HTML table and record any modifications as POST requests using Javascript

As a beginner in JavaScript and HTML, I am open to corrections if I am not following the correct practices. Recently, I delved into editing an HTML form table. {%extends 'base.html'%} {%block content%} <html> <body> <h4> Search ...

The overall outcome determined by the score in JavaScript

Currently, I am working with a dataset where each person is matched with specific shopping items they have purchased. For instance, Joe bought Apples and Grapes. To gather this information, individuals need to indicate whether they have made a purchase. I ...

Changing the Style of a CSS Module Using JavaScript

Embarking on a journey into Javascript and React, I am currently working on my first React app. My aim is to adjust the number of "gridTemplateRows" displayed on the screen using a variable that will be updated based on data. Right now, it's hardcode ...

JQuery syntax for adding a comma before the first element in an array

When I insert data into an array, the output in my console includes a comma before the first element (9). How can I remove this comma from the first element using the provided code snippet? ,9,My firstname,My lastname,<a href="/cdn-cgi/l/email-protecti ...

What is the best way to trigger the Javascript blur event following a click event that results in the element losing focus

Encountering this issue multiple times has left me dissatisfied with the solutions I've implemented in the past. The challenge lies in dealing with an input box that triggers a validation process on blur, while also having a button that populates the ...

Modifying table background color using AJAX and jQuery?

Scenario: My web page is designed to automatically search for a specific cell input by the user. If the cell has been input with a value, the table's background color will turn red; otherwise, it will remain green. Currently, the table has not been p ...

Activate ajax search in select2 by hand

I recently integrated the select2 plugin with jQuery into my website. For the most part, it functions perfectly. One particular feature I have is a search widget that utilizes select2 and remote data search. When I enter a search query using a keyboard ...

What is the best method for dividing strings in javascript?

After invoking a JavaScript function, I received the following results: (1, 00), (2, 10), (3, 01), (4, 11) I am looking to store this data in an array or JSON format like this: [{id:1, number: 00},{id:2, number: 10},{id:3, number: 01},{id:4, number: 11} ...