ajax,angularjs , Updating View in Angular js on ajax success callback


Updating View in Angular js on ajax success callback

Question:

Tag: ajax,angularjs

I am working on a project where I am getting list of the offers from a service. Each offer is Active or Inactive. I am displying only Active offers on a view on tabular format by giving ajax call and using ng-repeat.

When I click on the link Inactivate Offer then I am giving another ajax request to inactivate that offer in database. So once I inactivate offer it should not be displyed on view. My code to fect offer and Inactivate the offer is :

    mPosServices.factory('mosServiceFactory',function($http,$rootScope){
   return{
       viewAllOffers:function(){
           var allOffers = $http({
                        method: "get",
                        url: "http://myServiceUrl/omnichannel/merchant/offer/view/all?enrollmentId="+$rootScope.enrollMentId,
                    });
               return allOffers;     
       },

       inActivateOffer : function(id){
           var inactivate = $http({
               method:'get',
               url : "http://myServiceUrl/omnichannel/merchant/offer/"+id+"/status/INACTIVE?enrollmentId="+$rootScope.enrollMentId,
           });
           return inactivate;
       }
   } 
});

and controller code is to fect the offers and inactivate offer is :

var mPosController = angular.module('mPosController', []);

mPosController.controller('offerController', ['$scope', '$rootScope', 'mosServiceFactory', 'ngDialog', function ($scope, $rootScope, mosServiceFactory, ngDialog) {
  mosServiceFactory.viewAllOffers().then(function (data) {
            $scope.offers = data.data.offers;
            console.log($scope.offers);
        });

    $scope.inActivate = function (id) {
        mosServiceFactory.inActivateOffer(id).then(function (data) {
           console.log(data);
        });
      }
    }]);

Offer is getting successfully inactivated in response of $scope.inActivate method but that perticular offer is still visible in view.

So how to display on Active offers once I inactivate a offer using service call ?


Answer:

Your code correctly performs a GET request to inactivate the offer, however you do not "tell" Angular that the offer has been inactivated. What you need to do is remove the offer from the offers list $scope.offers once the offer is successfully inactivated (ie. when the inActivateOffer promise is resolved). You could try something like this:

$scope.inActivate = function (id) {
    mosServiceFactory.inActivateOffer(id).then(function (data) {
        for (var i = 0; i < $scope.offers.length; i++) {
            if ($scope.offers[i].id === id) {
                $scope.offers.splice(i, 1);
            }
    });
}

Related:


Iframe does not show scrollbar


html,css,angularjs,iframe,ionic
Can't seem to make the iframe appear with a scroll-bar. Go to https://billiving-qa.azurewebsites.net/accountant email: [email protected] pass: 111111 Reload the list with F5, then click new invoice on the right side. The content is lengthy but doesn't show the scroll-bar. My css uses the following: .frm { position: fixed; width: 100%;...

AngularJS line break at points after a maximum length was reached


javascript,angularjs
I'm using ng-repeat to fill a table. Some elements have a pretty long length, and I'm looking for a way to cut the content into multiple lines, if a specific length is reached. During research I found Angulars limitTo, but it does not exactly look like I was looking for....

Error: [$injector:unpr] Unknown provider: RestangularProvider <- Restangular <- ctrlAG


javascript,angularjs,restangular
I have one app: app.js: angular.module('AngApp', [ 'angularGrid' ]); My own restangular service.js: var app = angular.module('AngApp'); app.factory('restService', ['Restangular', function (Restangular) { // make use of Restangular } ]); and controller.js: var app = angular.module('AngApp'); app.controller('ctrlAG', ['$scope', '$http', '$log', '$mdDialog', 'Restangular',function ($scope,$http, $log, $mdDialog, Restangular) { // make use of...

HTML elements in Angular bindings expression


html,angularjs
Is that possible to insert HTML elements in an Angular expression ? Let's take a few example. I would like to do something like this: <table> <tr ng-repeat="employee in employees"> <td>{{employee.firstname ? employee.firstname : '<p style="color:red">No name</p>'}}</td> <td>{{employee.job}}</td> </tr> </table> In our controller, we have: $scope.employees = [{firstname:'Bob', job:'Developer'}, {firstname:'Paul',...

AngularJS, Animate on change: directive $watch not called


javascript,angularjs,angularjs-directive
I'm creating a live websocket application which requires grabbing the users attention upon change of a value. The following directive is used in multiple places on the same page: <span class="badge" animate-on-change animate-class="highlightWarning" animate-watch="totalAnswers">{{totalAnswers}}</span> and <div animate-on-change animate-class="colorWarning" animate-watch="rq.answer" ng-switch="question.type" ng-repeat="rq in recentResponse.answers" ng-if="rq.question == question.id"> Now, rq.answer rarely changes,...

function is undefined if no module is declared in Angular


angularjs
I am new in Angular and I am studying controllers. In my code I setup a simple controller access but when I tried to run in my browser I encountered a series of error messages that looks like this: "Error: [ng:areq] Argument 'personController' is not a function, got undefined In...

WooCommerce seems to only orderby date and not price


php,ajax,wordpress,woocommerce
I am loading in variable products via a custom WP_Query $args = array( 'post_type' => 'product', 'posts_per_page' => 100, 'product_cat' => 'beast-balls', 'orderby' => 'date', 'order' => 'desc' ); $loop = new WP_Query( $args ); if ( $loop->have_posts() ) { while ( $loop->have_posts() ) : $loop->the_post(); ?> <div class="product-node cat-beast-balls">...

angular.js - simplest way to handle click inside controller


javascript,jquery,html,angularjs
is there any better way of handling clicks inside a controller than this? <div ng-controller="SomeController> <a href="/#!/something" ng-click="doTheSame()">link1</a> <a href="/#!/something" ng-click="doTheSame()">link2</a> <a href="/#!/something" ng-click="doTheSame()">link3</a> .. <a href="/#!/something" ng-click="doTheSame()">link99</a> </div> in jQuery I would do something like: $('div > a').on('click', function() { // do some stuff }); ...

Getting CROS Error even after adding header in node.js for Angular js


javascript,angularjs,node.js
I am trying to consume REST API from NODE JS for Angular js,even after adding cors header in my server code I am getting error XMLHttpRequest cannot load http://127.0.0.1:8085/issues. Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers. I am new to both Angular JS and Node JS. Node JS...

How to send current page number in Ajax request


javascript,jquery,ajax,spring-mvc,datatables
I am using jQuery DataTable to display huge amount of data in a table. I am getting data page wise on Ajax request like this: var pageNo = 1; $('#propertyTable').dataTable( { "processing": true, "serverSide": true, "ajax": "${contextPath}/admin/getNextPageData/"+pageNo+"/"+10, "columns": [ { "data": "propertyId" }, { "data": "propertyname" }, { "data": "propertyType"...

How to select multiple selected value from select option


angularjs,model-view-controller,ionic-framework,ionic
My controller code looks like $scope.items = [{ heading: 'Sports', types: [{ name: 'Football', }, { name: 'Persie', }, { name: 'Ronaldo', }, { name: 'Messy', }], id: '1' }, { heading: 'Cricket', types: [{ name: 'Tendulkar', }, { name: 'Lara', }, { name: 'Ponting', }], id: '2' }]; My...

Can't save json data to variable (or cache) with angularjs $http.get


json,angularjs,web-services,rest
I have weird angularjs problem. I'm trying to fetch data from Rest Webservice. It works fine, but I can't save json data to object. My code looks like: services.service('customerService', [ '$http', '$cacheFactory', function($http, $cacheFactory) { var cache = $cacheFactory('dataCache'); var result = cache.get('user'); this.getById = function(id){ $http.get(urlList.getCustomer + id).success(function(data, status,...

Save to 3 firebase locations with a slow internet connection


javascript,angularjs,firebase,latency
Sometimes I'm having issues with firebase when the user is on a slow mobile connection. When the user saves an entry to firebase I actually have to write to 3 different locations. Sometimes, the first one works, but if the connection is slow the 2nd and 3rd may fail. This...

access the json encoded object returned by php in jquery


php,jquery,ajax,json
I want to post some data to php function by ajax, then get the encoded json object that the php function will return, then I want to get the information (keys and values) from this object, but I don't know how, here is my code: $.ajax({ url: "functions.php", dataType: "JSON",...

Socket.IO message doesn't update Angular variable


javascript,angularjs,node.js,sockets
I have a socket.io client-server setup with AngularJS running on the client. // Server.js var io = require('socket.io')(server); io.on('connection', function (socket) { socket.on('message', function (msg) { //console.log(msg); console.log(msg); io.emit('message', msg); }); }); As observed, it essentially emits a message events with the data stored in the variable msg. And then...

How can this be undefined in the constructor of an Angular config class?


angularjs,constructor,typescript,undefined,this
I've found some examples online, where people create TypeScript config classes and pass them on to Angular. When I've tried it, I got the weird exception, that this was undefined. A closer look to the other implementations revealed, they only use the constructor, so, are those examples actually inherently wrong...

AngularJS dynamically call function


javascript,angularjs
at this point, I'm new to AngularJS. This works: scope.$apply(scope.hideTooltip()); But calling the function dynamically does not work: scope.$apply( scope.$eval(attrs.ngEnter, {'event': event}) ); HTML: <input type="text" ng-model="value" ng-enter="hideToolTip()" /> The enitre directive: app.directive('ngEnter', function() { return function(scope, element, attrs) { console.log(scope.hideTooltip()); element.bind("keydown keypress", function(event) { if(event.which === 13) { console.log(attrs.ngEnter);...

Passing params to an angular service from a controller?


javascript,angularjs,service,controller,params
I'm an angular newby. I'm hoping to pass params to a service that fetches data form a server depending on those params. for example, if I want to pass a book name string and then use it in the service to concatenate with the request url. The documentation does not...

AngularJS: Adding ng-click within element.append


angularjs,directive
Within my directive I have the following code, which will be used to continually append to an html element. //Establishes the type of question and therefore what should be displayed app.directive('questionType', function ($http, $compile) { return { restrict: 'A', link: function (scope, element, attr, model) { switch (scope.Question.inputType) { case...

$http.get returns actual php script instead of running it (yeoman, grunt)


php,angularjs,pdo,gruntjs
I'm building a "simple" AngularJS app with an articles newsfeed. My articles are stored in a mysql database, and I extract them using php PDO. I used to do this using AJAX with a simple LAMP configuration (php5, mysql, apache2), and everything worked as intended. Now I'm trying to rebuild...

remove char from string with angular


javascript,angularjs
I'm trying to remove a period '.' from a value that comes from a feed, however I don't really want to do this in my app.js, rather in my view. So if I do the following: value: {{item.v_value}} I get 3.5, I'd simply like to strip out and render out...

Pre-Select of an option in a select not working


angularjs
I use the following select. Currently, I get empty options in my select on start. To avoid these empty options in angularJS, I want to preselect the first option in the select. But It do not work. I get an 'Cannot read property 'conditions' of undefined'. Thank you for your...

How to add class on ng-click?


angularjs
I have this: http://plnkr.co/edit/gJko3umteXXEye7o9StR?p=preview How can i add class "active-link" on: @Translate("PERSONAL_INFORMATION") @Translate("NOTIFICATIONS") @Translate("CHANGE_PASSWORD") @Translate("GAME_SETTINGS") ...

Using ng-click to toggle between two functions


javascript,angularjs,angular-ui,angular-ui-bootstrap
I am using the datepicker from bootstrap-UI for angular. I would like to toggle between two functions. now() and clear(). Is this possible inside Angular's ng-click? http://plnkr.co/edit/aMcKwXOSQwgnGwfNN9yI?p=preview The toggle has the ng-click="today()" I would like to add clear() to it, thanks. Controller Code: $scope.today = function() { $scope.dt = new...

Unable to upload file to Sharepoint @ Office 365 via REST


javascript,ajax,rest,sharepoint,office365
I'm having trouble creating/uploading files via Microsoft's REST API (or at least that's what they call it) for Sharepoint running on Office 365. It looks like I'm able to authenticate all right, but I'm getting 403 Forbidden when I try to create a file. The same user can upload a...

Can't get angular.js to loop through array and post to html


angularjs,ng-repeat
Edit: changed ng-controller to ng-app in body tag, was typo I'm new to angular and im trying to use ng-repeat to post all items in the products[] to html but the {{expressions}} come out as text rather than computing. I don't have my laptop so I'm testing all this on...

Angular-strap data-trigger='focus' not working


javascript,html,angularjs,angular-strap
the data-trigger focus is not working for me ... <span data-content='foo' data-html='true' data-placement='top' data-container='body' data-trigger='focus' bs-popover> Nothing is actually happening when I am clicking on this element. If I remove data-trigger='focus' and set it to hover or click, it does work. I am using angularjs. 1.2.18 and angular-strap : 2.2.4...

Merge and sum values and put them in an array


javascript,arrays,angularjs,foreach
I'm retrieving values from an external source and apply a foreach loop to the results, with the code below. angular.forEach(data, function(value, key) { if (value.start_date > firstdayOfWeek && value.start_date < lastdayOfWeek) { console.log(value.firstname + ' - ' + value.distance); } else { //do nothing } }); The result is console...

success and error function in the controller for a service


javascript,angularjs,angularjs-service,angularjs-http,angularjs-promise
I have the following code in a service and I am calling fetchData function from the controller. Service app.service("geturl", function($http) { urllist = []; geturl.fetchData = function() { var data = []; for (i = 0; i < urllist.length; i++) { (function(index) { return $http.get(geturl.urllist[index], { timeout: 8000 }) .then(function(response)...

calling one controller from another controller


angularjs
I have 2 controllers and I am calling the second controller from the function of first controller $scope.open = function () { var modal = $modal.open({ templateUrl: 'views/view1.html', controller: 'controller2', // other parameters }); /* some code */ } Both the controllers are in the same folder. There are similar...

AngularJS & Bootstrap Modal - loading template outside controller


angularjs,twitter-bootstrap,angular-bootstrap
I have a dialog which is being used in 3 scenarios within the same page. I have created a controller similar to the below: var modalInstance = $modal.open({ templateUrl: 'myModalContent.html', controller: 'ModalInstanceCtrl', size: size, resolve: { items: function () { return $scope.items; } } }); <script type="text/ng-template" id="myModalContent.html"> <div class="modal-header">...

Automatically calling server side class without


javascript,html,ajax
I have an anchor which calls a server side class when clicked, but I want to modify it so that the class is called as soon as the page loads, without having to click an anchor. <a href="#" class="_repLikeMore" data-id="1234" data-type="pid" data-app="forums"> ...

how to use geocoder class to retrieve latitude and longitude through ajax


javascript,ajax,google-maps
the json array which contains the list of addresses [ { "id": 0, "title": "Coop.Sociale Prassi e Ricerca Onlus", "latitude": 0, "longitude": 0, "address": "Viale Eleonora D'Arborea 12, Roma, IT" }, { "id": 0, "title": "San Lorenzo", "latitude": 0, "longitude": 0, "address": "Viale della Primavera 330, Roma, IT" },...

Getting generic anchor text on click with angularJS/jQuery returns empty string


jquery,angularjs
I have an anchor generated from a JSON database query result. The anchor represents the title of an article (I have no idea how many articles there will be). I want to be able to get the anchor text (the article title), upon clicking the anchor in order to use...

UI-Router : Prevent access to parent state


angularjs,angular-ui-router,state
I am moving to UI-Router as my App router. I want to have nested state as below: $stateProvider .state('app', { url: '/app', template: ' <div ui-view></div>', authenticate: true }) .state('app.state1', { url: '/state1', templateUrl: 'app/state1.html', controller: 'State1Ctrl', controllerAs: 'state1', authenticate: true }) .state('app.state2', { url: '/state2', templateUrl: 'app/state2.html', controller: 'State2Ctrl',...

Is there a way to fire an event every time an ajax call in made in AngularJS?


javascript,ajax,angularjs,express
What I'm trying to do is every time a call to the backend is made, I want a spinner to load up with a dark overlay. I know I can do this by simply running the spinner before the call is made, but I'm working with multiple developers and I...

cross domain ajax form post — How is this allowed?


jquery,ajax
I am using jQuery and jQuery form plugin There is a method in jQuery form plugin ajaxSubmit. You pass a form and then it submits it via ajax and you get a response. I am wondering how this is possible since the form is on a different server than the...

Identifier starts immediately after numeric literal


jquery,ajax,razor
I'm trying to get the current logged in usersID in my jquery function var userID = @User.Identity.GetUserId(); Many answers on this page say that I have to do something like \"@User.Identity.GetUserId()\" But it dont seem to work, can someone tell me how to fix it. Its for my ajax post....

Jquery parsley validate not working


javascript,php,jquery,ajax,parsley.js
if($("#dataform").parsley().isValid()){ $.ajax({ url : '<?php echo base_url();?>index.php/company/final_review?id=<?php echo $this->input->get('id'); ?>', type : 'POST', data : $("#dataform").serialize(), dataType:"json", beforeSend: function(){ $('#remarks').parsley( 'addConstraint', { minlength: 5 }); }, success : function(data){ console.log(data); } }); } This is my ajax part. The plugin is not validating the field it's submitting the form. The...

Create angular page in Django to consume data from JSON


angularjs,django,django-templates
In an angular controller I have a list of items: app.controller('MainController', ['$scope', function($scope) { $scope.items = [ {"foo":"bar 1"}, {"foo":"bar 2"}, {"foo":"bar n"} ] }]); The following html page, based on angular, displays a list of item: <!DOCTYPE html> <html> <head> <title>list</title> <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> </head> <body data-ng-app="myApp"> <div data-ng-controller="MainController">...

REST API with token based authentication


angularjs,codeigniter,api,rest,token
I want to develop a web site with AngularJS. On the backend side I will use Codeigniter REST framework. I have some security issues and I don't want to start developing without fixing them on my mind. I don't want to use something like api key because it will be...

How do I add a class on ng-click from layout?


angularjs
Here is the page layout: <li class="dropdown"> <ul class="submenu"> <li ng-click="SetActiveMenuForPersonalInfo();"> <a href="../Account/#/PersonalInfo">@Translate("MY_ACCOUNT")<a> </li> </ul> </li> When a user clicks on my account, they get this: http://plnkr.co/edit/gJko3umteXXEye7o9StR?p=preview This is the function in the controller: $scope.SetActiveMenuForPersonalInfo = function () { $scope.activeMenu = 'Settings'; $scope.activeLink = "PersonalInfo"; console.log("Active menu:...

Making an alert() with PHP and ajax


javascript,php,jquery,ajax
I have an ajax function that submits some data to my PHP file. In my PHP file I have some checks that it does with that data, I then try to make an alert to come up to say something. I can't get any alerts to come up though. All...

navbar disappears but no dropdown


angularjs,bootstrap
So been trying to set up a navbar that collapses to a drop down when the size is under a certain number of pixels. So far I have managed to make the normal menu disappear when it goes under a certain size, but once I make the window smaller and...

Angular $http and Fusion Tables in IE9


javascript,angularjs,internet-explorer-9,google-fusion-tables
I am trying a simple get request to a google fusion table in my angular controller. $http.get(url) .success(function(data) { //Do stuff with data }) This works in firefox, chrome, safari and IE10+ however in IE9 (Which I am requried to support) the request fails to even send and the console...

Using $.ajaxStop() to determine when page is finished loading in CasperJS


javascript,jquery,ajax,phantomjs,casperjs
So far in my tests written in CasperJS, I've been using waitForSelector() on page-specific elements to determine if a page has fully loaded (including all the async ajax requests). I was hoping to come up with a more standard way of waiting for page load and was wondering if the...

$scope variable does not update within $interval function


javascript,angularjs,angularjs-scope
I am using $interval for my custom stopwatch. Within the $interval function I have a variable $scope.inputValue which is binded to a range. The problem is that after each iteration of $interval (every 500ms), the most recent $scope.inputValue is not taken into account, but only the value at the initialization...

How to use a service with Http request in Angular JS


javascript,angularjs
I'm using AngularJS to build my web application, I've been always using controllers to make HTTP request, which makes things easier and clear for me. But for a better code structure, and better execution for my application, I wanted to use services instead of controllers to use the web service....

Improve slow angular directive


javascript,angularjs,angularjs-directive
I have a page that renders table view or div/blocks view depending on window width. But the swop between views happens very slow. Maybe I am not doing things in the best way? I basically have 2 scope variables(block and table, set to true or false) defined in the controller....