AngularJS REST service doesn't work when loading page content using Ajax

Question

I have a REST service that fetch data from back end and show the notifications to user when click notification button.Initially notification div is hide and when button click it will show with REST data.As a draw back i have figured out REST call takes sometime to load and it will cause my main page loading slow. Because even without click notification button data will be loaded.As a solution i integrated ajax to load the notification div content.In ajax call i load html page into notification div using ajax.

ajax code snippet when notification button click

<script>
    $(function() {
        $("label").click(function() {

            $.ajax({
                url: "notify/notification.html",
                success: function(result) {
                    $(".ajax-notifications").html(result);
                }
            });
        });
    });
</script>

In notification.html i call the REST service.But the problem is that page successfully load but REST call doesn't execute.Even doesn't show any errors in console.I am newbie to Angularjs appreciate any help or any ideas to do this in better way.

Main Page

<div class="ajax-dropdown" style="left: 128px;">
<div class="btn-group btn-group-justified" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="activity" id="javascript:void(0)">
                Notifications (0) </label>

  </div>

    <!-- notification & tasks content -->
    <div class="ajax-notifications custom-scroll">
    <div class="alert alert-transparent">
        No Notification or Tasks available at this time.
    </div>
    </div>
        </span>
        </div>

notification html

  <!DOCTYPE html>
    <html ng-app="postExample">

        <head>
            <script src="js/jquery-1.11.2.min.js"></script>
            <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
            <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular-resource.js"></script>
            <script type="text/javascript" src="js/usersController.js"></script>
            <script type="text/javascript" src="js/userRepoService.js"></script>
        </head>

        <body ng-controller="UsersController">
             <h1>Notifications</h1>

            <select id="UserSelector" style="width: 100%;">
                <option ng-repeat="user in users" value="{{user.displayName}}">{{user.displayName}}</option>
            </select>
        </body>

    </html>

You are using jQuery to load the Ajax. Look at $http or $resource services. Angular has better promises and fully integrated with angular — Shaun
– Shaun, Commented Nov 17, 2015 at 10:33
@ Shaun the same code snippet working fine when i insert into main page.so my REST service works fine but the problem is when i insert code snippet into another page my REST service doesn't execute. — gihan-maduranga
– gihan-maduranga, Commented Nov 17, 2015 at 10:38
Appreciate that @gihan. Was more a general comment you're doing it wrong. — Shaun
– Shaun, Commented Nov 17, 2015 at 10:40
Is your button click event triggered at any point of time ? $("notify").click() . Are you binding click event to appropriate component ? — ExpectoPatronum
– ExpectoPatronum, Commented Nov 17, 2015 at 10:43
May be this might help you , if you need to use jQuery instead of $http/$resource - jonathancreamer.com/using-jquery-ajax-in-an-angular-app As @shaun suggested its not the best way what you doing. Please go through angular doc docs.angularjs.org/api/ng/service/$http to get an idea — VishwaKumar
– VishwaKumar, Commented Nov 17, 2015 at 10:44

Pakorn Penboonmee · Accepted Answer · 2015-11-17 10:39:19Z

1

Did you try $http function of angular instead of use jQuery ?

On Controller :

$scope.clickcall = function () {
$http({
  method: 'GET',
  url: '/notify/notification.html'
   }).then(function successCallback(response) {
       //Do what ever you want with returned data//
       console.log(response);
   });
};

and use this $scope function for ng-click event.

answered Nov 17, 2015 at 10:39

Pakorn Penboonmee

197 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dawlatzai Ghousi · Accepted Answer · 2015-11-17 10:55:42Z

0

I think that angularJS don't know the $.ajax() request and it is not in angular context so if you want to run it with angularJS add your code inside $scope.$apply(function(){ ... }) like this:

$scope.$apply(function(){
    $.ajax({
            url: "notify/notification.html",
            success: function(result) {
                $(".ajax-notifications").html(result);
            }
        });
});

answered Nov 17, 2015 at 10:55

Dawlatzai Ghousi

3,9762 gold badges23 silver badges27 bronze badges

Collectives™ on Stack Overflow

AngularJS REST service doesn't work when loading page content using Ajax

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related