CODEWITHSUNDEEP
jqueryangularjsajaxrest
gihan-maduranga
gihan-maduranga

Reputation: 4801

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

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>

Upvotes: 0

Views: 217

Answers (2)

Dawlatzai Ghousi
Dawlatzai Ghousi

Reputation: 3978

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);
            }
        });
});

Upvotes: 0

Pakorn Penboonmee
Pakorn Penboonmee

Reputation: 19

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.

Upvotes: 1

Related Questions