Solved

Error with Angular JS

Posted on 2016-11-09
11
47 Views
Last Modified: 2016-11-28
Hi,

I have a problem with a small part of my angular script.  It worked without a problem this morning but now it does not.  After 2 hours of trying to resolve I thought I would ask the experts.

The problem is where I am trying to send the email:

$scope.SendEmail = function () {
            $scope.IsLoadingEmail = true;
            $http({
                method: 'POST',
                url: '/api/values/SendEmail',
                data: JSON.stringify($scope.returnValues)
            }).
            success(function (data) {
                $scope.IsLoadingEmail = false;
                $scope.IsEmail = false;
                $('#Email_popup').popup('hide');
                //$('#my_popup').popup('show');
                $window.alert('success');
            })
            .error(function (error) {
                //$('#Email_popup').popup('hide');
                //$scope.IsLoadingEmail = false;
                //$scope.status = 'Unable to Process Request: ' + error.message;
                $window.alert('failure');
               

            });
        }

Open in new window


I cannot debug it and I cannot display the error here (//$scope.status = 'Unable to Process Request: ' + error.message;)  I have commented it at the moment as I just wanted to test the alert but I cannot even get them to show.

Hoping someone can help so I can stop pulling my hair out!
0
Comment
Question by:SmashAndGrab
11 Comments
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 41881696
What error are you getting? Can you give us something to understand what the problem is. The code snippet does not help outside the context of the rest of the code (client and server).

I am assuming you can't give us a link - can you then give us a snapshot of the console + give us a description of what you expect to happen and what is actually happening.

What is the result of the $http POST - can you show as a screen grab of the console for that?
0
 
LVL 27

Expert Comment

by:BigRat
ID: 41882049
Wel lthe first thing to check is whether the POST is actually being sent. Fiddle should do the HTTP monitoring for you.
Secondly you should'nt mix JQuery with Angular - it just leads to obscure errors and problems.

For evey action one builds, one usually has a button (or implied by the return key in an INPUT field) and next to that action there should *always*  be a field in which one displays errors or confirmation messages.

Near the button which you press to send the E-Mail you should have a span or div with an ng-show attribute linked to a variable in $scope called, say, mailingError, which gets set to true in the .error() function and false just before the HTTP call. The span or div is then linked (ng-model) to an error string in scope ($scope.errorString) which gets set by the .error() function. Thus the error pops up when something goes wrong. I dislike pop up windows, because I have to click them away all the time.

Now if you want you can forget the mailing error variable and just place the message "Mail sent OK" in the variable on the .success() function.
1
 

Author Comment

by:SmashAndGrab
ID: 41886592
Hi,

There is an example actually.

http://estimatingtool.azurewebsites.net/

If you complete the form - you will then be prompted for your details (name, email etc).  

When you click "send" is when the problem occurs.
0
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
LVL 54

Expert Comment

by:Julian Hansen
ID: 41886639
Look at your controller
myApp.controller('myController', function ($scope, $http) {
...
        $scope.SendEmail = function () {
            $scope.IsLoadingEmail = true;
            $http({
                method: 'POST',
                url: '/api/values/SendEmail',
                data: JSON.stringify($scope.returnValues)
            }).
            success(function (data) {
                $scope.IsLoadingEmail = false;
                $scope.IsEmail = false;
                $('#Email_popup').popup('hide');
                //$('#my_popup').popup('show');
                $window.alert('success');
            })
            .error(function (error) {
                //$('#Email_popup').popup('hide');
                //$scope.IsLoadingEmail = false;
                //$scope.status = 'Unable to Process Request: ' + error.message;
                $window.alert(error);
                $window.alert('failure');
               

            });
        }
}

Open in new window

Specifically look at the definition you are injecting $scope and $http but you are not injecting $window - so you will get that error
Change to
myApp.controller('myController', function ($scope, $http, $window) {

Open in new window

0
 

Author Comment

by:SmashAndGrab
ID: 41887535
Thanks Julian!  

Now the error shows.  Although it doesn't tell me a great deal..

..
 .error(function (error) {
                //$('#Email_popup').popup('hide');
                //$scope.IsLoadingEmail = false;
                //$scope.status = 'Unable to Process Request: ' + error.message;
            [b][u]    $window.alert(error.message);[/u][/b]
                $window.alert('failure');

Open in new window

0
 
LVL 54

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 41887562
Your use of $http is a bit old take a look at the docs on how to use it
https://docs.angularjs.org/api/ng/service/$http

You should be doing
$http({
  method: 'POST',
  url: '/api/values/SendEmail',
  data: JSON.stringify($scope.returnValues)
}).then(function  (data) {
  $scope.IsLoadingEmail = false;
  $scope.IsEmail = false;
  $('#Email_popup').popup('hide');
  //$('#my_popup').popup('show');
  $window.alert('success');
}, function (error) {
  //$('#Email_popup').popup('hide');
  //$scope.IsLoadingEmail = false;
  //$scope.status = 'Unable to Process Request: ' + error.message;
  $window.alert(error);
  $window.alert('failure');
});

Open in new window

0
 

Author Comment

by:SmashAndGrab
ID: 41887857
Thanks - I will update it.

Its strange actually.

It works ok on the hosted site but doesn't locally - I get the "failure" message when I run it locally and "Success" when I run it from the internet.  Weird!
It did used to work the exact same from both which is a bit strange!
0
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 41888066
What are you seeing in the console?
0
 

Author Comment

by:SmashAndGrab
ID: 41888106
console?
0
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 41888188
F12 - the console will show you errors and all traffic too and from the server. You should be able to get some information about why it is failing on your local server from there.

Click F12 you should see something like this
 ss93.jpg
0
 
LVL 82

Expert Comment

by:leakim971
ID: 41895259
It works ok on the hosted site but doesn't locally

be sure to use a web server as you're using Ajax.
Ajax don't support file protocol, only http:// and https://
Also you can't call https from http and it will fail if you call http://www.domainABC.com/someurl from http://www.domainXYZ.com

so be sure to call your own local (if http(s)) and not calling the hosted one from your locally website
0

Featured Post

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

You have this traditional web application that refreshes the whole page each time you navigate and you think it's a good time to convert it to a Single-Page approach. What should you know in advance? Read on, I'll guide you through it.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Two types of users will appreciate AOMEI Backupper Pro: 1 - Those with PCIe drives (and haven't found cloning software that works on them). 2 - Those who want a fast clone of their boot drive (no re-boots needed) and it can clone your drive wh…
Although Jacob Bernoulli (1654-1705) has been credited as the creator of "Binomial Distribution Table", Gottfried Leibniz (1646-1716) did his dissertation on the subject in 1666; Leibniz you may recall is the co-inventor of "Calculus" and beat Isaac…

776 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question