How can I simultaneously execute two functions, one while the page is reloading/refreshing and the other on ng-click?

Question

How can I simultaneously execute two functions, one while the page is reloading/refreshing and the other on ng-click?

Here is the code snippet for the controller functions related to payment status.

$scope.userhold_payment = function() {
    $http.get('http://localhost/ngaffiliate/api/payment/change_hold_payment_status')
        .then(function(response) {
            console.log('User hold payment called');
            $scope.userhold = response.data;
        });
};

$scope.check_status = function() {
    $http.get('http://localhost/ngaffiliate/api/payment/check_payment_status')
        .then(function(response) {
            console.log('Check payment status called');
            $scope.checkstatus = response.data;
            console.log(response);
            console.log($scope.checkstatus.is_hold_payment);
        });
}

Below is a section from main.html which triggers these functions:

<div ng-init="check_status()">
    <button type="button" ng-click="userhold_payment()" class="btn-success btn-lg hold_payment_html" style="margin-top:7px; font-size:16px">Hold Payment</button>
</div>

I am looking for help on how to initialize the check_status() function upon reloading and trigger the userhold_payment() function only when the button is clicked. Thanks in advance!

javascript angularjs

Answer 1

Answer №1

Consider trying this approach:

$scope.userhold_payment = function() {
    $http.get('http://localhost/ngaffiliate/api/payment/change_hold_payment_status')
        .then(function(response) {
            console.log('Function called successfully');
            $scope.userhold = response.data;
            // console.log($scope.userhold.is_hold_payment);
        });
};

// This function will be triggered whenever the controller is reinstantiated
($scope.check_status = function() {
    $http.get('http://localhost/ngaffiliate/api/payment/check_payment_status')
        .then(function(response) {
            console.log('Reinstantiation success')
            $scope.checkstatus = response.data;
            console.log(response);
            console.log($scope.checkstatus.is_hold_payment);
        });
})();

HTML snippet:

<div>
    <button type="button" ng-click="userhold_payment()" class="btn-success btn-lg hold_payment_html" style="margin-top:7px; font-size:16px">Hold Payment</button>
</div>

Using a controller is recommended over using ng-init.

Answer 2

Consider trying this approach:

$scope.userhold_payment = function() {
    $http.get('http://localhost/ngaffiliate/api/payment/change_hold_payment_status')
        .then(function(response) {
            console.log('Function called successfully');
            $scope.userhold = response.data;
            // console.log($scope.userhold.is_hold_payment);
        });
};

// This function will be triggered whenever the controller is reinstantiated
($scope.check_status = function() {
    $http.get('http://localhost/ngaffiliate/api/payment/check_payment_status')
        .then(function(response) {
            console.log('Reinstantiation success')
            $scope.checkstatus = response.data;
            console.log(response);
            console.log($scope.checkstatus.is_hold_payment);
        });
})();

HTML snippet:

<div>
    <button type="button" ng-click="userhold_payment()" class="btn-success btn-lg hold_payment_html" style="margin-top:7px; font-size:16px">Hold Payment</button>
</div>

Using a controller is recommended over using ng-init.

Answer 3

Answer №2

To achieve this, utilize the window onload event as shown in the code snippet below.

var app = angular.module("myapp",[]);

app.controller("demoCtrl",function($scope,$window){

  $window.onload = function(){
   alert("load event");
  }
  $scope.clickFunction =function(){
    alert("ng-click event");
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp" ng-controller="demoCtrl">
  <div>
   <button ng-click="clickFunction()">click</button>
  </div>
</div>

Answer 4

To achieve this, utilize the window onload event as shown in the code snippet below.

var app = angular.module("myapp",[]);

app.controller("demoCtrl",function($scope,$window){

  $window.onload = function(){
   alert("load event");
  }
  $scope.clickFunction =function(){
    alert("ng-click event");
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp" ng-controller="demoCtrl">
  <div>
   <button ng-click="clickFunction()">click</button>
  </div>
</div>

Answer 5

Answer №3

To properly initialize the data, it is recommended that a function call is made within the controller. By incorporating a module such as ngStorage, you can easily persist data through page refreshes with minimal effort.

$scope.check_status=function(){
   $http.get('http://localhost/ngaffiliate/api/payment/check_payment_status')
      .then(function(response){
          console.log('I called now')
          $localStorage.checkstatus = $scope.checkstatus = response.data;
          console.log(response);
          console.log($scope.checkstatus.is_hold_payment);
        });
}
if ($localStorage.checkstatus){
    $scope.checkstatus = $localStorage.checkstatus;
}
else{
    $scope.check_status();
}

Answer 6

To properly initialize the data, it is recommended that a function call is made within the controller. By incorporating a module such as ngStorage, you can easily persist data through page refreshes with minimal effort.

$scope.check_status=function(){
   $http.get('http://localhost/ngaffiliate/api/payment/check_payment_status')
      .then(function(response){
          console.log('I called now')
          $localStorage.checkstatus = $scope.checkstatus = response.data;
          console.log(response);
          console.log($scope.checkstatus.is_hold_payment);
        });
}
if ($localStorage.checkstatus){
    $scope.checkstatus = $localStorage.checkstatus;
}
else{
    $scope.check_status();
}

How can I simultaneously execute two functions, one while the page is reloading/refreshing and the other on ng-click?

Answer №1

Answer №2

Answer №3

Similar questions

Implementing Do Not Track in an express application

Troubleshooting Issue with Bootstrap 4 Modal Varying Content Display

JSON Error: Attempting to access the value of a key that is undefined

When running scripts, Protractor is unable to perform a click action in Safari, even though it works perfectly in

Navigation menus are being highlighted

What is the best way to allow a number to be editable when clicked on in a React application

Executing a Python function using JavaScript: Step-by-step guide

Is there a way to achieve a transparent background while animating the second text?

User Interface Pop-up dialog in AngularJS

Upon attempting to add a new component, an error was encountered: Uncaught SyntaxError: Unexpected token export

Error: The function of forEach is not applicable to todoList

Tips for reducing the minimum height and weight of a GridStack grid component

Hide the 1, 2, 3 page buttons in Datatables pagination and instead display only the Next and Previous buttons for navigation

What causes the "Unknown provider: defaultFilterProvider <- defaultFilter" error in AngularJS when using angular-filters?

Class methods cannot be invoked within their constructor

Having trouble transforming the JSON object into a usable format

Creating a seamless navigation experience with Next.js: Implementing per-page layouts for efficient 2-link navigation on a single screen

An array of length x containing keys of JavaScript objects

Saving JSON data as a file on server

Various progress bars alter their appearance