How use $http for loaded page and post data in angularjs

Question

I have a selectbox and in that selectbox whenever the user selects one destination I load a new page inside span with the class name "airlinename"

When my function runs I load that page, but it shows the innerhtml instead of showing angularjs that I loaded in that page.

How can I loaded page and post data?

Here is my first page code:

<body  ng-app="myApp" ng-controller="myCtrl" ng-init='rcity=[{ "name" : "Moscow", "id" : 1182348.0 }, { "name" : "tehran", "id" : 1203548.0 }, { "name" : "Singapore", "id" : 1188510.0 }, { "name" : "shiraz", "id" : 1211086.0 }, { "name" : "Baku", "id" : 1168993.0 }];airline=[{ "title" : "Azerbaijan Airlines" }, { "title" : "Emirates Airlines" }, { "title" : "Mahan Air" }, { "title" : "Qatar Airways" }, { "title" : "Iran Air" }, { "title" : "Turkish Airlines" }]'>
<form action="/" method="post" class="form_send">
<div>
  <table>
    <tr>
      <td><dl class="dropdown dropdown11 left_dromdown cityname marg5">
          <dt> <a href="javascript:void(0)" onclick="slidedropdown(this)"> <span class="hida">Destination</span> </a> </dt>
          <dd>
            <ul style="display: none;" class="RouteDate routedatesearch">
              <li>
                <_input type="text" ng-model="search1" />
              </li>
              <li 
             onClick="routesearchendcity(this);" 
             class="routecode_list" 
             ng-repeat="x in rcity | filter : search1" 
             data-id="{{x.id}}" ng-click="myFunction()">{{x.name}}</li>
            </ul>
          </dd>
        </dl>
        <span class="airlinename">
        <dl class="dropdown dropdown11 left_dromdown  marg5">
          <dt> <a href="javascript:void(0)" onclick="slidedropdown(this)"> <span class="hida">airline</span> </a> </dt>
          <dd>
            <ul style="display: none;" class="RouteDate routedatesearch">
              <li >
                <_input type="text" ng-model="search2" />
              </li>
              <li 
             onClick="routesearchairline(this)" 
             class="routecode_list" 
             ng-repeat="x in airline | filter : search2">{{x.title}}</li>
            </ul>
          </dd>
        </dl></span></td>
    </tr>
  </table>
  <div class="clr"></div>
</div>
</form_>
<div class="PostCityId">
  <input type="hidden" value="1182348" class="EndCityID">
</div></body>

Please tell why the successCallback function does not work.

Here is my function:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $scope.cfdump = "";
    $scope.myFunction = function() {
    var request=$http({
       method: 'post',
       url: '/test-js.bc',
     }).then(function successCallback(response) {
             $(".airlinename").empty().html($compile(response)($scope));
                 },
                 function errorCallback(response) {});
    }
});

@HadisI am trying to run your code and find out what wrong, can you provide the slide dropdown function as well? — , Jan 01 '18 at 06:49
also if possible modify the api call function to something like this $scope.myFunction = function(){ return $http.post('/test-js.bc').then(function(success) { console.log(success.data); $(y).closest("tr").find(".airlinename").empty().html(response); }).catch(function (error) { console.log(error); }); } check for console logs whether it went into then or catch — , Jan 01 '18 at 06:55
success does not work properly!airlinename empty but html(response) does not work !how compile code that load html second page ?? — Hadis, Jan 01 '18 at 07:40
@Hadis this isn't the right way to do it, when you're modifying the DOM in angular you should be using directives (the jQuery part is modifying the DOM) read this if you haven't already https://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background — shaunhusain, Jan 01 '18 at 08:47

shaunhusain · Answer 1 · 2018-01-01T09:15:31.173

Get rid of the action on the form use ng-submit to trigger a function in the controller when the form submit button is hit or enter is hit (with a submit button present and the form focused), then you can use $http.post to send the data to the server as a regular post request.

For getting HTML into a view and compiled you'll need a directive... I don't think any of the built ones do exactly that (ng-include is close but expects a URL to load a "template" from). Will include a custom directive that does something close to what you'll need below for you to modify.

angular.module('myApp', [])
  .controller('MyCtrl', function() {
    this.model = {
      htmlLoaded: '<strong>{{foo}}</strong>'
    }
  })
  .directive('compileHtml', function($compile, $rootScope) {
    return {
      restrict:'A',
      scope: {'compileHtml':'='},
      link: function(scope, iElem, iAttr) {
        var newScope = $rootScope.$new();
        newScope.foo = 'bar';
        scope.$watch('compileHtml', function() {
          iElem.html(scope.compileHtml);
          $compile(iElem.contents())(newScope);
        });
      }
    }
  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.js"></script>


<div ng-app="myApp" ng-controller="MyCtrl as myctrl">
  {{myctrl.model|json}}
  <div compile-html="myctrl.model.htmlLoaded"></div>
</div>

How use $http for loaded page and post data in angularjs

1 Answers1