Error with Angular JS

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!
SmashAndGrabAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
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?
BigRatCommented:
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.
SmashAndGrabAuthor Commented:
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.
CompTIA Network+

Prepare for the CompTIA Network+ exam by learning how to troubleshoot, configure, and manage both wired and wireless networks.

Julian HansenCommented:
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

SmashAndGrabAuthor Commented:
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

Julian HansenCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
SmashAndGrabAuthor Commented:
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!
Julian HansenCommented:
What are you seeing in the console?
SmashAndGrabAuthor Commented:
console?
Julian HansenCommented:
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
leakim971PluritechnicianCommented:
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Angular

From novice to tech pro — start learning today.