Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Select2 not using my templateResults or templateSelection options

I am trying to use the select2 ajax call with templates. I am getting the ajax in just fine but it is not using my template functions.

the ajax data is:

[
   {"name":"First thing","otherData":"asdfg"},
   {"name":"Second thing","otherData":"qqerr"},
   {"name":"third thing","otherData":"yerty"},
   {"name":"fourth thing","otherData":"hgjfgh"},
   {"name":"fifth thing","otherData":"fhgkk"}
]

the select2 code (which i took a lot from here ) is:

FundSearch = {
    create: function (selector, theURL) {
      $(selector).select2({
        ajax: {
          url: theURL,
          dataType: 'json',
          delay: 250,
          data: function (params) {
            console.log(params.term);
            return {
              q: params.term, // search term
              page: params.page
            };
          },
          results: function (data, page) {
            // parse the results into the format expected by Select2.
            // since we are using custom formatting functions we do not need to
            // alter the remote JSON data
            return {
              results: data
            };
          },
          cache: true
        },
        escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
        minimumInputLength: 1,
        templateResult: formatData,
        templateSelection: formatDataSelection
      });

      function formatData (data) {
          if (data.loading) return data.name;

          markup = "<h1>" + data.name + "</h1>" + "<p>" + data.otherData + "</p>";

          return markup;
        }

        function formatDataSelection (data) {
          return data.name;
        }


    }
};

The error I am getting is Uncaught TypeError: Cannot read property 'toUpperCase' of undefined on line 356 of select2.js for Version: 3.5.2.

It seems to me that select2 is not using my templateSelection and templateResults function.

like image 277
Bwata Avatar asked Mar 19 '15 14:03

Bwata


People also ask

How do I add options in Select2?

New options can be added to a Select2 control programmatically by creating a new Javascript Option object and appending it to the control: var data = { id: 1, text: 'Barn owl' }; var newOption = new Option(data. text, data.id, false, false); $('#mySelect2'). append(newOption).

How do you add select all in Select2?

Add Select All Option to jQuery Select2: First create the markup for the multi-value select box and a check box for selecting all option. Now add this java script to the page. The above script will be executed by onclick() event of the check box.

What is data Select2 ID?

Select2 requires that the id property is used to uniquely identify the options that are displayed in the results list. If you use a property other than id (like pk ) to uniquely identify an option, you need to map your old property to id before passing it to Select2.


Video Answer


1 Answers

You are looking at the 4.0.0 documentation but are using 3.5.2. You can still access the 3.5.2 documentation.

Specifically, the templateSelection and templateResult options only exist in 4.0.0. They were called formatSelection and formatResult in 3.5.2.

like image 137
Kevin Brown-Silva Avatar answered Sep 28 '22 04:09

Kevin Brown-Silva