Solved

Error with Angular JS

Posted on 2016-11-09
11
31 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 51

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
 
LVL 51

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
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 51

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 51

Expert Comment

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

Author Comment

by:SmashAndGrab
ID: 41888106
console?
0
 
LVL 51

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 your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

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.
It is a freely distributed piece of software for such tasks as photo retouching, image composition and image authoring. It works on many operating systems, in many languages.
When you create an app prototype with Adobe XD, you can insert system screens -- sharing or Control Center, for example -- with just a few clicks. This video shows you how. You can take the full course on Experts Exchange at http://bit.ly/XDcourse.

708 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now