Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Error with Angular JS

Posted on 2016-11-09
11
Medium Priority
?
75 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
11 Comments
 
LVL 59

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 to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

 
LVL 59

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 59

Accepted Solution

by:
Julian Hansen earned 2000 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 59

Expert Comment

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

Author Comment

by:SmashAndGrab
ID: 41888106
console?
0
 
LVL 59

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

Tech or Treat!

Submit an article about your scariest tech experience—and the solution—and you’ll be automatically entered to win one of 4 fantastic tech gadgets.

Question has a verified solution.

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

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…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this video, Percona Solutions Engineer Barrett Chambers discusses some of the basic syntax differences between MySQL and MongoDB. To learn more check out our webinar on MongoDB administration for MySQL DBA: https://www.percona.com/resources/we…
Screencast - Getting to Know the Pipeline

610 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