CODEWITHSUNDEEP
javascriptjqueryangularjs
Nurul Alam
Nurul Alam

Reputation: 352

Loading spinner (ng-show = loading) always true after form submission. Need to make it false after receiving data

I am having problem with scope variable. I initiate the loading spinner by setting ng-show property to true, as soon someone clicks the submit button on my contact form. After that, I send form data to my back end and after processing I should be able to set the loading spinners ng-show property to false. However the property is not chaging to false after receiving data from backend.

here is my code.

 $scope.submit = function(){
    $scope.loading = true; //at this point loading spinner appears
    //pass them to api that handles mail sending and
    var contact_name = $('#name').val();
    var contact_email = $('#email').val();
    //var contact_body = $('#contact_body').html();
    console.log(contact_name +" " +contact_email );

    if(contact_name != "" && contact_email != "")
     {

        $.ajaxSetup({
          headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          }
        });
        $.ajax({
            url: baseUrl+'api/mail',
            type:'POST',
            dataType:'json',
            data: $('#contactFormId').serialize(),
            success:function(data)
            {

                $scope.loading = false;
                console.log("1: Scope loading is set to "+ $scope.loading);             
                if(data)
                {

                        $('.msgHolder').css({
                            'border':'1px solid #9e9c9c',
                            'text-align':'center',
                            'padding':'8px',
                            'color':'green'
                        });

                       $('.msgHolder').html(data.message);
                        $scope.loading = false;
                        console.log("2 Scope loading is set to "+ $scope.loading);  //this is the PROBLEM, conse says $scope.loading is false but the spinner does not go away.

                }
                else
                { 

                //default bg
                        $('.msgHolder').css({
                            'border':'1px solid #9e9c9c',
                            'text-align':'center',
                            'padding':'8px',
                            'color':'red'
                        });
                       $('.msgHolder').html("Email Was not sent. There was an Error.");
                       vcRecaptchaService.reload($scope.widgetId)

                } 
            }
        });
      }
      else
      {
        $scope.loading = false;
        console.log("2: Scope loading is set to "+ $scope.loading); // this actually works. and spinner disappears
         $('.msgHolder').css({
            'border':'1px solid #9e9c9c',
            'text-align':'center',
            'padding':'8px',
            'color':'red'
        });           
        $('.msgHolder').html("Email Was not sent. Required data missing");
      }

    }

Upvotes: 0

Views: 532

Answers (1)

Frank Modica
Frank Modica

Reputation: 10516

You should use the $http service that Angular provides. Otherwise you'll have to tell Angular yourself that the data has changed:

$scope.$apply(function() {
    $scope.loading = false;
});

By the way, you seem to be doing a lot of things that are not really the Angular way (touching the DOM, for example). Is there a reason?

Upvotes: 4

Related Questions