Solved

Error with Angular JS

Posted on 2016-11-09
11
59 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 56

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
How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

 
LVL 56

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 56

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 56

Expert Comment

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

Author Comment

by:SmashAndGrab
ID: 41888106
console?
0
 
LVL 56

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

How our DevOps Teams Maximize Uptime

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us. Read the use case whitepaper.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
md-checkbox with angularjs 4 524
angular2 error 10 613
kendo spreadsheet data return 15 104
Could you point how to call an Angular view from inside an Angular controller? 14 85
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
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.
Exchange organizations may use the Journaling Agent of the Transport Service to archive messages going through Exchange. However, if the Transport Service is integrated with some email content management application (such as an antispam), the admini…
Attackers love to prey on accounts that have privileges. Reducing privileged accounts and protecting privileged accounts therefore is paramount. Users, groups, and service accounts need to be protected to help protect the entire Active Directory …

749 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