Select2 acts very different with Uncaught query function not defined for Select2 <select2-id>

Question

I load values for select2 like the following way.

Declare the Type

var  AdjustmentType = Backbone.Model.extend({
            url : Hexgen.getContextPath("/referencedata/adjustmenttype")
    });

create instance for the Type

var adjustmentTypes = new AdjustmentType();

load the values to select2 box

adjustmentTypes.fetch({
                    success : function() {
                        for(var count in adjustmentTypes.attributes) {
                            $("#adjustment-type").append("<option>" + adjustmentTypes.attributes[count] + "</option>");
                        }
                    }
                });  
                $("#adjustment-type").select2({
                     placeholder: "Select Adjustment Type",
                     allowClear: true
                 });

My HTML Code

<div class="span4">
        <div>ADJUSTMENT TYPE</div>
        <select id="adjustment-type" tabindex="5" style="width:200px;">
            <option value=""></option>
        </select>
    </div>

when i load this for the first it is not giving any exception but if i Refresh or navigate to different URL i get the following exception:

Uncaught query function not defined for Select2 adjustment-type

Answer 1

"Query" refers to the list by which to check your search terms against. You need to make sure that your data property is a proper array of objects (ie. your options elements).