Error loading jQuery select2 when using jquery Bootstrap modal with ajax loaded content

Profile picture for Hai Truong IT
Hai Truong IT

I'm loading a Bootstrap Modal with AJAX. The result modal works perfectly, but the Select2 box that gets loaded in does not initialize.

How can I fix it?

Here's my code:

index.php (html):

<!-- language: lang-html --> 
<a href="content.php" data-target="#ajax" data-toggle="modal" class="btn green">
  Load Select
</a>

<div class="modal fade" id="ajax" role="basic" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content"></div>
   </div>
</div>

index.php (js):

<!-- language: lang-js --> 
$("#select2_content").select2({
   allowClear: true
});

content.php:

<!-- language: lang-html --> 
<select name="content" id="select2_content" class="form-control select2">
  <option value="A">A</option>
    ...
  <option value="Z">Z</option>
</select>

Problem

If you're executing $("#select2_content").select2({}) on the initial page load then #select2_content doesn't exist yet. So the jQuery expression doesn't find anything and consequently will never initialize the select box. Then it will never run again.

Solutions

You can do either of the following:

  1. When you've finished loading the modal via ajax, you need to tap into the loaded.bs.modal event and run a function to initialize select2 on any new elements.

  2. Or you can pull in the function via a <script> tag in the ajax call that will be executed when the DOM parses the code brought in over ajax. Just make sure to add the script tag at the end or wrap the javascript in a document ready function otherwise it still won't exist in the dom.

Option 1

Here's a plunker that returns the following code:

<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
    <h4 class="modal-title" id="exampleModalLabel">AJAX Modal</h4>
  </div>
  <div class="modal-body">
    <select id="select2_content" class="form-control select2">
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
    </select>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
</div>

For ajax calls, you can access a running version of it at the following url:

http://run.plnkr.co/plunks/bq15voV79PEz07TWrS8D/

Here's a plunker that consumes the AJAX call with the following code:

<!DOCTYPE html>
<html>

  <head>
    <title>Bootstrap Modal AJAX Demo</title>
    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
    <link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>
    
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script>
    <script>
      $(function(){
        $('#ajax').on('loaded.bs.modal', function (e) {
          $("#select2_content").select2({
           allowClear: true
          });
        })
        .modal({
          show: false,
          remote: 'http://run.plnkr.co/plunks/bq15voV79PEz07TWrS8D/'
        });
      });
    </script>
  </head>

  <body>
    
    <btn data-target="#ajax" data-toggle="modal" class="btn btn-primary">
      Load Select
    </btn>
    
    <div class="modal fade" id="ajax" role="basic" aria-hidden="true">
       <div class="modal-dialog">
          <div class="modal-content"></div>
       </div>
    </div>
    
  </body>

</html>

Option 2

Here's a plunker that returns the following code:

<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
    <h4 class="modal-title" id="exampleModalLabel">AJAX Modal</h4>
  </div>
  <div class="modal-body">
    <select id="select2_content" class="form-control select2">
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
    </select>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
</div>
<script>
  $("#select2_content").select2({
   allowClear: true
  });
</script>

For ajax calls, you can access a running version of it at the following url:

http://run.plnkr.co/plunks/lpyMAERThlKeNieoX8GH/

Here's a plunker that consumes the AJAX call with the following code:

<!DOCTYPE html>
<html>

  <head>
    <title>Bootstrap Modal AJAX Demo</title>
    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
    <link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>
    
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script>
  </head>

  <body>
    
    <a href="http://run.plnkr.co/plunks/lpyMAERThlKeNieoX8GH/"
       data-target="#ajax" data-toggle="modal" class="btn btn-primary">
      Load Select
    </a>
    
    <div class="modal fade" id="ajax" role="basic" aria-hidden="true">
       <div class="modal-dialog">
          <div class="modal-content"></div>
       </div>
    </div>
    
  </body>

</html>