Select2 addon and Combobox html

Help Requests
1

I am trying to duplicate something that is written in html that uses select2.min.js.

I have the following in my html view:

customer.html:

    <require from="./include/select2.min.css"></require>
    <script type="text/javascript" src="./include/select2.full.min.js"></script>

<select id="statusBox" name="status_code"
                                        class="select2StatusBox" style="width: 250px;"
                                        tabindex="5">
                                        <option model.bind="null"></option>
                                        <optgroup repeat.for="statcode of status_code_list" 
                                            model.bind="statcode[0]">
                                            <option repeat.for="descr of statcode[1]"
                                                    model.bind="descr.statcode_id"
                                                    value.bind="descr.statcode_id">
                                              ${descr.statcode_id} - ${descr.descr} (${statcode[0]})
                                            </option>
                                          </optgroup>
                                    </select>

All that happens is that the entire list gets output to the html as a list of items, and not as a combobox/dropdown.

Is there no way to include the javascript file from another source, and then have it load into aurelia so that it’s usable?

2

There are many ways to do this, but the easiest way would be to include select2.min.css and select2.min.js in your index.html.

Then in your customer.js (you have a js file don’t you?) inside attached() do what you need to do to initialize select2 on whichever controls you need.

3

How do I call attached()? Do I just set it in my js file, and then it will just run?

Thanks so much for the tips.

I’ve got an app.html, will that work instead of index.html?

4

May be it would of some help: Component Life cycle methods:

http://aurelia.io/docs/fundamentals/creating-components#the-component-lifecycle

5

Thank you, that helped a lot!

Here is what I am trying to duplicate from the old.html file:

<script type="text/javascript">
 $(document).ready(function() {

$('.select2StatusBox').select2({
matcher: select2_category_filter
});
$(".select2StatusBox").on('change', function (event,el) {
var selected_element = $("select2:select", el);
var selected_value  = selected_element.val();
var parent_optgroup = selected_element.closest('optgroup').attr('label');
selected_element.val(selected_value).trigger("select2:select :updated");
$('.select2StatusBox').select2('close');
});
});
</script>

Here is my customer.js file:

import {$, jquery} from 'jquery';

window.jQuery = jquery;
window.$ = jquery;

      attached() {    
        jquery(document).ready(function() {
          jquery('.select2StatusBox').select2({
            matcher: select2_category_filter
          });
          jquery('.select2StatusBox').on('change', function (event, el) {
            var selected_element = $("select2:select", el);
            var selected_value  = selected_element.val();
            var parent_optgroup = selected_element.closest('optgroup').attr('label');
            selected_element.val(selected_value).trigger("select2:select :updated");
            jquery('.select2StatusBox').select2('close');
          });
          
        });
      }

I am getting a javascript error: Object(...) is not a function at Customer.attached (customer.js?c3fd:370).

It appears to be complaining about my use of jquery, but I am not sure what else I should be doing?

6

I feel that you are trying to use Aurelia in traditional web application. Not as a SPA framework. If my understanding is right, have a look at aurelia script to use aurelia inside your web application.

7

I am trying to translate an app into Aurelia SPA framework, but this might have potential to get me around what I am trying to do in particular for this one piece of it.

Thanks, I will give it a try!