Twitter Bootstrap Question posted in

Error with AngularJS – Twitter bootstrap

I am new to AngularJS and here I am facing an issue. I have a page with submit button, when i click on submit modal has to open and the data from URL has to be present inside modal. Right now, modal opens but that is empty and not fetching data from URL.Below is the code I have:

Index.html:

<!doctype html>
<html ng-app="plunker">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3>Modal</h3>
</div>
        <div class="modal-body">
            {{items}}
        </div>
<div class="modal-footer">
  <button class="btn btn-warning" ng-click="cancel()">Close</button>
 </div>
 </script>
    <button class="btn" ng-click="open()">Submit</button>
</div>
</body>
</html>

example.js:

angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log, $http) {


 //$scope.items = ['item1', 'item2', 'item3'];

$scope.open = function () {
    debugger
    $http.get("URL")
      .success(function (response) {
          debugger
          $scope.items = response.data.Table;
          console.log(response.Table);
      });
          var modalInstance = $modal.open({
              templateUrl: 'myModalContent.html',
              controller: 'ModalInstanceCtrl',
              resolve: {
                  items: function () {
                      return $scope.items;
                  }
              }
          });        
};
};
var ModalInstanceCtrl = function ($scope, $modalInstance, items) {
$scope.items = items;

$scope.cancel = function () {
    $modalInstance.dismiss('cancel');
};
};

Errors Iam getting after clicking on submit is:

Failed to load resource: the server responded with a status of 404
(Not Found)

Failed to load resource: the server responded (url I am using for local host) with a status of 405 (Method Not Allowed)

Here is a demo plunker

Where is this going wrong? Hope anyone can help. Thanks in advance!!

Tags:

3

Answers


  1. 0

    As it is ajax call and modalInstance open method is outside of ajax call success method, it may or may not return data.

    modalInstance logic seems to be working fine. As Dev-One suggested check you rest service, if it is returning data or not.

    Please refer to this working plunkr with some sample data

    http://plnkr.co/edit/tH97V6m54P7TFZzcS8CA

    $http.get("http://jsonplaceholder.typicode.com/posts").success(function (response) {
              debugger
              $scope.items = response;
              console.log(response);
               var modalInstance = $modal.open({
                  templateUrl: 'myModalContent.html',
                  controller: 'ModalInstanceCtrl',
                  resolve: {
                      items: function () {
                          return $scope.items;
                      }
                  }

              });
          });
    Login or Signup to reply.
  2. 0

    In the call method
    $http.get(“URL”)
    I don’t see a correct url. because you have specified the url as “url”. it should be something like “localhost:8000/GetItems”

    And make sure you open the model in the success method.
    Otherwise you model won’t get the data.

    Login or Signup to reply.
  3. 0

    I updated your code little bit…
    Now its working fine 

    angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log, $http) {

    $scope.open = function () {
        $http.get("http://jsonplaceholder.typicode.com/posts")
          .success(function (response) {
              var modalInstance = $modal.open({
                  templateUrl: 'myModalContent.html',
                  controller: 'ModalInstanceCtrl',
                  resolve: {
                      items: function () {
                          return response;
                      }
                  }

              });
          });


    };
};

var ModalInstanceCtrl = function ($scope, $modalInstance, items) {
    $scope.items = items;

    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
};

    Issue was the return in the resolve function.now its fine.
    Another thing, your results are set of data in an array. so you have to loop it.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search