Geek Answers Handbook

Jquery select2 (4.0) ajax with templateResult and templateSelection

My Select2 worked correctly on 3.5.

Starting from upgrading to version 4.0 (not "full" - and changing keywords / functions if necessary), I have a strange problem when additional AJAX calls arise. However, the URL is not defined, so they generate 404 Not Found errors. URL https: // localhost: 8443 / myapp / undefined

They seem to be related to the presence of templateResult and templateSelection. If I comment on them, select2 works correctly (but my data is not formatted).

If they are not commented out, I receive a mysterious / undefined AJAX call once upon initialization, then one call is made when I click on the select box, then once for each character that I type (even if I set minimumInputLength), however, even with these false AJAX calls, my “real” ajax call will start and return results (which are properly formatted using the Result / templateSelection template. I tried with and without “escapeMarkup” without any difference in behavior.

What causes these bad AJAX challenges and how to stop them? (Because otherwise it works fine)

Thanks in advance!

Edit Here is the full page showing the problem. Additional network calls are generated by the tag that I use in the formatResult function. But why does it return html when it should be in loading state?

Well, it turns out that setting "placeholder" doesn't allow you to set a boot variable, so html is returned (with its wrong tag)

So, if the placeholder is set, the Result template and templateSelection should also check for an empty id.

if (result.id == "" || result.loading) return result.text;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title></title>

<link rel="stylesheet" href="${pageContext.request.contextPath}/lib/select2/dist/css/select2.css" />
</head>
<body>

<form id="organization_lookup_form" class="form-horizontal" >
<div>
    Select2 using placeholder <select id="search1" style="width:300px"></select>
</div>
<div style="padding-top:250px">
    Select2 WITHOUT placeholder <select id="search2" style="width:300px"></select>  
</div>
</form>

<script src="${pageContext.request.contextPath}/lib/jquery/dist/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/lib/select2/dist/js/select2.min.js"></script>
<script>
$(document).ready(function () {
      function formatResult (result){
          console.log('%o', result);
          if (result.loading) return result.text;
          var html = '<div>'+
                '<img src="' + result.image + '">' +
                '<h4>'+result.label+'</h4></div>';
          return html;
      };

      $('#search1').select2({
          placeholder: "Search...",
          ajax: {
              url: '/search',
              dataType: 'json',
              data: function (params, page) {
                  return {
                      term: params.term, // search term
                      page: page
                  };
              },
              processResults: function (data, page) {
                  return {results: data.results};
              },
              cache: true
          },
          templateResult : formatResult,
          templateSelection : formatResult,
          escapeMarkup: function(m) {
              // Do not escape HTML in the select options text
              return m;
           },
          minimumInputLength: 3
      });
      $('#search2').select2({
//        placeholder: "Search...",
          ajax: {
              url: '/search',
              dataType: 'json',
              data: function (params, page) {
                  return {
                      term: params.term, // search term
                      page: page
                  };
              },
              processResults: function (data, page) {
                  return {results: data.results};
              },
              cache: true
          },
          templateResult : formatResult,
          templateSelection : formatResult,
          escapeMarkup: function(m) {
              // Do not escape HTML in the select options text
              return m;
           },
          minimumInputLength: 3
      });
});
</script>

</body>
</html>
+4
source share
2 answers

There are a few issues here that probably lead to the queries you see.

  • Select2 , text . , , .
  • , ​​ loading, , "...", , - . image, , , undefined .

,

AJAX ?

Select2 , . , , , .

html, ?

templateResult , , "...". , , . , text, , , .

+1

4.0 templateResult templateSelection "". .

, html, .

jQuery:

 function formatResult (result){
      console.log('%o', result);
      if (result.loading) return result.text;
      var html = '<div>'+
            '<img src="' + result.image + '">' +
            '<h4>'+result.label+'</h4></div>';
      //return html;
      return $(html);
  };
+1

More articles:


All Articles