current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

I'm using the Angular select-ui module on a rails app. I'm rendering a modal that most of the time renders correctly, but occasionally, it renders and looks like the below, there is some kind of error that i don't totally understand.

Notice the angular code being displayed as though there was a problem while the page was being rendered.

http://cl.ly/image/2v2r0U2R3w3Y/Image%202015-01-01%20at%205.03.21%20PM.png

the modal normally looks like,

http://cl.ly/image/1x1S2C3g2o1L/Image%202015-01-01%20at%205.14.14%20PM.png

Oddly, closing the modal and re-accessing it, without a roundtrip to the server will fix this problem, so maybe the problem is tied to the dom needing to be completely loaded? As best as I can tell, even if the scope holding the tag data is empty, the form will still render without issue.

based on the html code,

  <div class='form-group'>
    <label for="inputEmail3" class="col-sm-3 control-label">Company</label>
    <div class="col-sm-9">
      <ui-select multiple ng-model="article.companies" ng-disabled="disabled">
        <ui-select-match placeholder="Tag with related Companies...">{{ $item.name || "something" }}</ui-select-match>
        <ui-select-choices repeat="company in allCompanies | filter: {'name': $select.search}" >
          <small>
            {{company.name}}
          </small>
        </ui-select-choices>
      </ui-select>
      </div>
  </div>

I have a specific controller controlling the showing of the modal,

controllers.controller('articleSubmitModal', ($scope, $modal) ->
  $scope.open = (size) ->
    modalInstance = $modal.open(
      templateUrl: 'ng-views/url_submit_modal.html'
      controller: 'articleSubmitCtrl'
      size: size
    )
)

And the controller populating data into the select fields,

controllers.controller('articleSubmitCtrl', ($scope, $modalInstance, Company, Interface, Article, Community, Cause) ->

  $scope.cancel = () ->
    $modalInstance.dismiss('cancel');

  $scope.allCompanies = []
  Company.getAll().then (allCompanies) ->
    $scope.allCompanies = JSON.parse allCompanies

  $scope.allCommunities = []
  Community.getAll().then (allCommunities) ->
    $scope.allCommunities = JSON.parse allCommunities

  $scope.allCauses = []
  Cause.getAll().then (allCauses) ->
    $scope.allCauses = JSON.parse allCauses

which is backed by services that look like,

  .factory 'Company', ($q, $http) ->
    Company = 
      getAll: () ->
        $http
          method: 'get'
          url: '/api/companies'
        .then (response) ->
          response.data.list
    return Company

  .factory 'Community', ($q, $http) ->
    Community = 
      getAll: () ->
        $http
          method: 'get'
          url: '/api/communities'
        .then (response) ->
          response.data.list
    return Community

  .factory 'Cause', ($q, $http) ->
    Cause = 
      getAll: () ->
        $http
          method: 'get'
          url: '/api/causes'
        .then (response) ->
          response.data.list
    return Cause

the chrome errors being rendered when this bug occurs are below. I'm not entirely certain how to look into this problem at a more granular level without digging into the angular select library, which i'd tend to avoid at this stage of the debugging process. How might I proceed? 

angular.js?body=1:4734 Error: [ui.select:transcluded] Expected 1 .ui-select-choices but got '0'.
    at http://localhost:3000/assets/select.js?body=1:187:14
    at http://localhost:3000/assets/select.js?body=1:1064:21
    at publicLinkFn (http://localhost:3000/assets/angular.js?body=1:2721:15)
    at boundTranscludeFn (http://localhost:3000/assets/angular.js?body=1:2799:20)
    at controllersBoundTransclude (http://localhost:3000/assets/angular.js?body=1:3218:22)
    at link (http://localhost:3000/assets/select.js?body=1:1053:11)
    at invokeLinkFn (http://localhost:3000/assets/angular.js?body=1:3503:13)
    at nodeLinkFn (http://localhost:3000/assets/angular.js?body=1:3203:15)
    at http://localhost:3000/assets/angular.js?body=1:3344:15
    at processQueue (http://localhost:3000/assets/angular.js?body=1:5829:29) <div class="ui-select-container ui-select-multiple ui-select-bootstrap dropdown form-control ng-pristine ng-untouched ng-valid ng-scope" ng-class="{open: $select.open}" multiple="multiple" ng-model="article.companies" ng-disabled="disabled">
angular.js?body=1:4734 Error: [ui.select:transcluded] Expected 1 .ui-select-choices but got '0'.
    at http://localhost:3000/assets/select.js?body=1:187:14
    at http://localhost:3000/assets/select.js?body=1:1064:21
    at publicLinkFn (http://localhost:3000/assets/angular.js?body=1:2721:15)
    at boundTranscludeFn (http://localhost:3000/assets/angular.js?body=1:2799:20)
    at controllersBoundTransclude (http://localhost:3000/assets/angular.js?body=1:3218:22)
    at link (http://localhost:3000/assets/select.js?body=1:1053:11)
    at invokeLinkFn (http://localhost:3000/assets/angular.js?body=1:3503:13)
    at nodeLinkFn (http://localhost:3000/assets/angular.js?body=1:3203:15)
    at http://localhost:3000/assets/angular.js?body=1:3344:15
    at processQueue (http://localhost:3000/assets/angular.js?body=1:5829:29) <div class="ui-select-container ui-select-multiple ui-select-bootstrap dropdown form-control ng-pristine ng-untouched ng-valid ng-scope" ng-class="{open: $select.open}" multiple="multiple" ng-model="article.communities">
angular.js?body=1:4734 Error: [ui.select:transcluded] Expected 1 .ui-select-choices but got '0'.
    at http://localhost:3000/assets/select.js?body=1:187:14
    at http://localhost:3000/assets/select.js?body=1:1064:21
    at publicLinkFn (http://localhost:3000/assets/angular.js?body=1:2721:15)
    at boundTranscludeFn (http://localhost:3000/assets/angular.js?body=1:2799:20)
    at controllersBoundTransclude (http://localhost:3000/assets/angular.js?body=1:3218:22)
    at link (http://localhost:3000/assets/select.js?body=1:1053:11)
    at invokeLinkFn (http://localhost:3000/assets/angular.js?body=1:3503:13)
    at nodeLinkFn (http://localhost:3000/assets/angular.js?body=1:3203:15)
    at http://localhost:3000/assets/angular.js?body=1:3344:15
    at processQueue (http://localhost:3000/assets/angular.js?body=1:5829:29) <div class="ui-select-container ui-select-multiple ui-select-bootstrap dropdown form-control ng-pristine ng-untouched ng-valid ng-scope" ng-class="{open: $select.open}" multiple="multiple" ng-model="article.causes">
angular.js?body=1:4734 TypeError: Cannot read property 'source' of undefined
    at Array.<anonymous> (http://localhost:3000/assets/select.js?body=1:857:44)
    at Object.ngModelWatch (http://localhost:3000/assets/angular.js?body=1:8391:42)
    at Scope.$digest (http://localhost:3000/assets/angular.js?body=1:6290:46)
    at Scope.$apply (http://localhost:3000/assets/angular.js?body=1:6389:28)
    at done (http://localhost:3000/assets/angular.js?body=1:3889:28)
    at completeRequest (http://localhost:3000/assets/angular.js?body=1:4016:9)
    at XMLHttpRequest.requestLoaded (http://localhost:3000/assets/angular.js?body=1:3981:11)
angular.js?body=1:4734 TypeError: Cannot read property 'length' of undefined
    at ctrl.getPlaceholder (http://localhost:3000/assets/select.js?body=1:500:43)
    at $parseFunctionCall (http://localhost:3000/assets/angular.js?body=1:5365:31)
    at Object.expressionInputWatch (http://localhost:3000/assets/angular.js?body=1:5640:35)
    at Scope.$digest (http://localhost:3000/assets/angular.js?body=1:6290:46)
    at Scope.$apply (http://localhost:3000/assets/angular.js?body=1:6389:28)
    at done (http://localhost:3000/assets/angular.js?body=1:3889:28)
    at completeRequest (http://localhost:3000/assets/angular.js?body=1:4016:9)
    at XMLHttpRequest.requestLoaded (http://localhost:3000/assets/angular.js?body=1:3981:11)
angular.js?body=1:4734 TypeError: Cannot read property 'source' of undefined
    at Array.<anonymous> (http://localhost:3000/assets/select.js?body=1:857:44)
    at Object.ngModelWatch (http://localhost:3000/assets/angular.js?body=1:8391:42)
    at Scope.$digest (http://localhost:3000/assets/angular.js?body=1:6290:46)
    at Scope.$apply (http://localhost:3000/assets/angular.js?body=1:6389:28)
    at done (http://localhost:3000/assets/angular.js?body=1:3889:28)
    at completeRequest (http://localhost:3000/assets/angular.js?body=1:4016:9)
    at XMLHttpRequest.requestLoaded (http://localhost:3000/assets/angular.js?body=1:3981:11)
angular.js?body=1:4734 TypeError: Cannot read property 'length' of undefined
    at ctrl.getPlaceholder (http://localhost:3000/assets/select.js?body=1:500:43)
    at $parseFunctionCall (http://localhost:3000/assets/angular.js?body=1:5365:31)
    at Object.expressionInputWatch (http://localhost:3000/assets/angular.js?body=1:5640:35)
    at Scope.$digest (http://localhost:3000/assets/angular.js?body=1:6290:46)
    at Scope.$apply (http://localhost:3000/assets/angular.js?body=1:6389:28)
    at done (http://localhost:3000/assets/angular.js?body=1:3889:28)
    at completeRequest (http://localhost:3000/assets/angular.js?body=1:4016:9)
    at XMLHttpRequest.requestLoaded (http://localhost:3000/assets/angular.js?body=1:3981:11)
angular.js?body=1:4734 TypeError: Cannot read property 'source' of undefined
    at Array.<anonymous> (http://localhost:3000/assets/select.js?body=1:857:44)
    at Object.ngModelWatch (http://localhost:3000/assets/angular.js?body=1:8391:42)
    at Scope.$digest (http://localhost:3000/assets/angular.js?body=1:6290:46)
    at Scope.$apply (http://localhost:3000/assets/angular.js?body=1:6389:28)
    at done (http://localhost:3000/assets/angular.js?body=1:3889:28)
    at completeRequest (http://localhost:3000/assets/angular.js?body=1:4016:9)
    at XMLHttpRequest.requestLoaded (http://localhost:3000/assets/angular.js?body=1:3981:11)
9angular.js?body=1:4734 TypeError: Cannot read property 'length' of undefined
    at ctrl.getPlaceholder (http://localhost:3000/assets/select.js?body=1:500:43)
    at $parseFunctionCall (http://localhost:3000/assets/angular.js?body=1:5365:31)
    at Object.expressionInputWatch (http://localhost:3000/assets/angular.js?body=1:5640:35)
    at Scope.$digest (http://localhost:3000/assets/angular.js?body=1:6290:46)
    at Scope.$apply (http://localhost:3000/assets/angular.js?body=1:6389:28)
    at done (http://localhost:3000/assets/angular.js?body=1:3889:28)
    at completeRequest (http://localhost:3000/assets/angular.js?body=1:4016:9)
    at XMLHttpRequest.requestLoaded (http://localhost:3000/assets/angular.js?body=1:3981:11)
6angular.js?body=1:4734 TypeError: Cannot read property 'length' of undefined
    at ctrl.getPlaceholder (http://localhost:3000/assets/select.js?body=1:500:43)
    at $parseFunctionCall (http://localhost:3000/assets/angular.js?body=1:5365:31)
    at Object.expressionInputWatch (http://localhost:3000/assets/angular.js?body=1:5640:35)
    at Scope.$digest (http://localhost:3000/assets/angular.js?body=1:6290:46)
    at Scope.$apply (http://localhost:3000/assets/angular.js?body=1:6389:28)
    at HTMLDivElement.<anonymous> (http://localhost:3000/assets/angular.js?body=1:8900:25)
    at HTMLDivElement.jQuery.event.dispatch (http://localhost:3000/assets/jquery.js?body=1:2641:98)
    at HTMLDivElement.elemData.handle (http://localhost:3000/assets/jquery.js?body=1:2448:135)
share|improve this question
    
John, I wonder if you ever found a solution to this problem? I have very similar symptoms and am having a hell of a time finding out the underlying cause. –  Joshua Gevirtz Feb 27 at 9:11
    
@JoshuaGevirtz actually, I think that the problem was tied to not including the templates correctly. cl.ly/image/2u0J0n3z0q1Z i'm including an html page in my layout that has the templates, gist.github.com/jcdavison/4855896287df0a223835 because I think the select plugin is attempting to inject the html from these templates into the dom elements that have the selectui directive, and if the templates don't exist, select-ui isn't graceful about it. –  John Feb 28 at 16:30
    
looks like we got to very similar places. –  Joshua Gevirtz Feb 28 at 16:35

1 Answer 1

up vote 0 down vote

I had a very similar issue, except the problematic ui-select was not on a modal, but rather in a partial rendered by ui-router. After a day of investigating, I found the cause of my problem. I have no idea if it is at all related to the issue you had, but I thought I would post my findings here anyway, in case someone could benefit.

I was under the impression that I had to have the ui-select template files (*.tpl.html) served by my machine so that they could be accessed by ui-select XHRs. To make sure ui-select knew the path from which I was serving the templates, I configured ui-select to point it in the right direction:

myModule.config(['uiSelectConfig', function(uiSelectConfig) {
    uiSelectConfig.theme = '/static/application/js/bootstrap';
}]);

I don't know if this was ever necessary. What I do know, though, is that at some point I moved to the most recent ui-select version available (0.10.0), which, it turns out, includes its default templates at the bottom of select.js itself. All I need is the default Bootstrap template, so I don't need to host any of the templates myself.

By setting the theme as I did above (and not removing this configuration when I changed ui-select versions), I must have created a race condition due to which, about 50% of the time, ui-select tried to proceed without actually having the templates in hand (i.e. the requests were pending).

Once I made the realization that 0.10.0 contains the appropriate templates, the fix was very simple: I just removed the single line of configuration for ui-select shown above. Everything seems to be working swimmingly now.

share|improve this answer
    
I found your situation to be relevant too though I modified the select.js file to point to the theme 'select', cl.ly/image/0v1k2m33401O but ultimately, i think the problem was the lib not being able to load necessary templates. –  John Feb 28 at 16:32

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.