Is Angular js incompatible with jquery multiselect

Question

I have this jQuery selectors. Everything was working fine but just by adding and initializing angular, the multiselect stops working. You can try removing everything that is not necesary and you'll see this happens:

(I don't know why github's urls are not working here, but you can download the file if needed, as that is not the problem I'm trying to depict)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>SPIROOX - Campaigns</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type="text/css" />
  <link rel="stylesheet" href="bootstrap-multiselect/dist/css/bootstrap-multiselect.css" type="text/css" />
</head>

<body ng-app="campaign_listing">

  <div class="content" ng-controller="campaign_list_controller as ctrl">
    <h2>Campaign Administration</h2>
    <a href="" class="btn_new">+</a>

    <div class="filters">
      <select id="multiselect_status" ng-model="ctrl.filters.status" ng-change="ctrl.update_fields()" multiple="multiple">
        <option value="active">Active</option>
        <option value="suspended">Suspended</option>
        <option value="closed">Closed</option>
      </select>
    </div>

  </div>

  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>

  <script>
    $(document).ready(function() {
      $('#multiselect_status').multiselect({
        includeSelectAllOption: true,
        enableFiltering: true,
        nonSelectedText: 'Status'
      });
    });
  </script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.js"></script>
  <script>
    var my_app = angular.module("campaign_listing", []);
    var controllers = {};
    controllers.campaign_list_controller = function($http) {
      this.filters = {
        status: 'active',
        client: null
      };
      var campaigns = {};
      this.update_fields = function() {
        console.log("update!");
        console.log(this.filters);
      }
    }
    my_app.controller(controllers);
  </script>
</body>

</html>

If you are still having trouble using this multiselect plugin, I suggest that you make your own multiselect using directives - its pretty easy. Look at this multiselect github.com/akashrajkn/sf-multiselect plugin. — akashrajkn
– akashrajkn, Commented Sep 28, 2015 at 16:55
I think your title should mention that is not just a "jQuery multiselect" but the Bootstrap multiselect. Not sure if this helps, but try this: stackoverflow.com/questions/16954605/… — Mohair
– Mohair, Commented Sep 28, 2015 at 17:00
document.ready is fairly worthless in angular. jQuery plugins should be initialized in directives to assure element exists when code is run. That being said you should probably look at getting rid of bootsrap.js and using angular modules and directives that are also readily available — charlietfl
– charlietfl, Commented Sep 28, 2015 at 17:21
Don't you get an error here: "my_app.controller(controllers)" ? The "controller" method expects 2 arguments: "controller(name, constructor);" — o4ohel
– o4ohel, Commented Sep 28, 2015 at 18:23
No errors. By the way, what happens is that jquery's checkboxes don't get cheked, i don't know why — Vandervals
– Vandervals, Commented Sep 28, 2015 at 22:29

Community · Accepted Answer · 2017-05-23 12:22:27Z

As mentioned in the comments add the jQuery plugin code in a directive and remove the document.ready stuff because it's not needed in the directive. The DOM is ready when you're adding the plugin code in directive's link method.

I haven't tested the rest of your angular code because it looks too complicated and I've re-coded it to improve readability. (Maybe your code is working but I wouldn't code it like this.)

Please have a look at the demo below or in this jsfiddle.

Update 29.09.15

For a better understanding of directives please read the documentation about directives to get the basics for custom directives.

Anyway here is the explanation to the directive:

The multiselect directive is added as attribute directive (restrict: 'A') to the select tag and so element inside of link function is the select tag where you'd like to apply the jQuery plugin. (Inside of link it's safe to use jQuery functions but I'd recommend to reduce the usage to a miminimum.)

Search for link, compile, controller in google or here at SO to learn more about directives. There is a question for the difference between them here at SO.

You could also create an element directive with template then you can add the select tag into the directive and pass your selection with two-way binding. That's probably better here because it's more reusable.

angular.module('campaignListing', [])
    .controller('CampaignListController', CampaignListController)
    .directive('multiselect', MultiSelectDirective);

function CampaignListController($http) {
    this.filters = {
        status: 'active',
        client: null
    };
    var campaigns = {};
    this.update_fields = function () {
        console.log("update!");
        console.log(this.filters);
    }
}

function MultiSelectDirective() {
    return {
        restrict: 'A',
        link: function (scope, element) {
            $(element).multiselect({
                includeSelectAllOption: true,
                enableFiltering: true,
                nonSelectedText: 'Status'
            });
        }
    }
}

<link href="https://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div ng-app="campaignListing">
    <div>
        <div class="content" ng-controller="CampaignListController as ctrl">
             <h2>Campaign Administration</h2>
 <a href="" class="btn_new">+</a>

            <div class="filters">
                <select id="multiselect_status" multiselect ng-model="ctrl.filters.status" ng-change="ctrl.update_fields()" multiple="multiple">
                    <option value="active">Active</option>
                    <option value="suspended">Suspended</option>
                    <option value="closed">Closed</option>
                </select>
            </div>
        </div>
    </div>
</div>

For me in FF 41 it works (see screenshot). Do you get any error messages in the console?
can you explain me how that directive method you added works?

Collectives™ on Stack Overflow

Is Angular js incompatible with jquery multiselect

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related