AngularJs+Bootstrap+Typehead+Ajax is working only if i put alert box but only in chrome

Question

i am using bootsrap typehead with angularjs given at this link http://angular-ui.github.io/bootstrap/

In my controller

 $scope.getUser = function(val) {
        //alert("hi");
         return $http.get('user/getUserNames.do', {
              params: {
                userName: val,

              }
            }).then(function(response){

              return response.data;


            });


          };

my html code

<input type="text" ng-model="asyncSelected"  typeahead-wait-ms="300" typeahead="user for user in getUser($viewValue)"  class="form-control">

if remove the alert the typehead will not work

if i keep the alert the typehead will work only in chrome

if i place a break point at "return $http.get('user/getUserNames.do'" and step out using fire bug it works in firefox

i am receiving the data in this formate ['name1','name2'] from server

some one please help

thanks in advance

Answer 1

thats because the time taken to close the alert the async data is recieved. you should store the data on $scope rather then calling a function on $scope

   $scope.users= {};
   $scope.getUser = function(val) {

     return $http.get('user/getUserNames.do', {
          params: {
            userName: val,

          }
        }).then(function(response){

          $scope.users=  response.data;


        });


      };

html

  <input type="text" ng-model="asyncSelected"  ng-change="getUser($viewValue)"
  typeahead-wait-ms="300" typeahead="user for user in users"  class="form-control">

Answer 2

your cods logic is incorrect,you cant return data like that from a async function, that need time to complete,

dont return anything from this getUser function. you have 2 option :

1 - store the responce.data in a global variable to be used later

$scope.users = [];
$scope.getUser = function (val) {
    $http.get('user/getUserNames.do', {
        params: {
            userName: val
        }
    }).then(function (response) {
        $scope.users.push(response.data);
    });
};

2 - call another function when get function is complete to handle the data recived

$scope.getUser = function (val) {
    $http.get('user/getUserNames.do', {
        params: {
            userName: val
        }
    }).then(function (response) {
        $scope.userLoaded(response.data);
    });
};

Answer 3

By the simple hack in angular-ui-bootstrap i solved the problem

before..........

 var getMatchesAsync = function(inputValue) {

        var locals = {$viewValue: inputValue};
        isLoadingSetter(originalScope, true);
        $q.when(parserResult.source(originalScope, locals)).then(function(matches) {

          //it might happen that several async queries were in progress if a user were typing fast
          //but we are interested only in responses that correspond to the current view value
          var onCurrentRequest = (inputValue === modelCtrl.$viewValue);
          if (onCurrentRequest && hasFocus) {
            if (matches.length > 0) {

              scope.activeIdx = focusFirst ? 0 : -1;
              scope.matches.length = 0;

              //transform labels
              for(var i=0; i<matches.length; i++) {
                locals[parserResult.itemName] = matches[i];
                scope.matches.push({
                  id: getMatchId(i),
                  label: parserResult.viewMapper(scope, locals),
                  model: matches[i]
                });
              }

              scope.query = inputValue;
              //position pop-up with matches - we need to re-calculate its position each time we are opening a window
              //with matches as a pop-up might be absolute-positioned and position of an input might have changed on a page
              //due to other elements being rendered
              scope.position = appendToBody ? $position.offset(element) : $position.position(element);
              scope.position.top = scope.position.top + element.prop('offsetHeight');

              element.attr('aria-expanded', true);
            } else {
              resetMatches();
            }
          }
          if (onCurrentRequest) {
            isLoadingSetter(originalScope, false);
          }
        }, function(){
          resetMatches();
          isLoadingSetter(originalScope, false);
        });
      };

i just removed '&& hasFocus' this sipneet from the code

after ........

var getMatchesAsync = function(inputValue) {

            var locals = {$viewValue: inputValue};
            isLoadingSetter(originalScope, true);
            $q.when(parserResult.source(originalScope, locals)).then(function(matches) {

              //it might happen that several async queries were in progress if a user were typing fast
              //but we are interested only in responses that correspond to the current view value
              var onCurrentRequest = (inputValue === modelCtrl.$viewValue);
              if (onCurrentRequest) {
                if (matches.length > 0) {

                  scope.activeIdx = focusFirst ? 0 : -1;
                  scope.matches.length = 0;

                  //transform labels
                  for(var i=0; i<matches.length; i++) {
                    locals[parserResult.itemName] = matches[i];
                    scope.matches.push({
                      id: getMatchId(i),
                      label: parserResult.viewMapper(scope, locals),
                      model: matches[i]
                    });
                  }

                  scope.query = inputValue;
                  //position pop-up with matches - we need to re-calculate its position each time we are opening a window
                  //with matches as a pop-up might be absolute-positioned and position of an input might have changed on a page
                  //due to other elements being rendered
                  scope.position = appendToBody ? $position.offset(element) : $position.position(element);
                  scope.position.top = scope.position.top + element.prop('offsetHeight');

                  element.attr('aria-expanded', true);
                } else {
                  resetMatches();
                }
              }
              if (onCurrentRequest) {
                isLoadingSetter(originalScope, false);
              }
            }, function(){
              resetMatches();
              isLoadingSetter(originalScope, false);
            });
          };