Select2 not working after jquery load

Question

I'm having this problem that i cannot fix. Everything i do just doesn't work. I work with a lot of forms so i've decided to make a php file for every form and then call the form with ajax load.

Js file:

$('#firstForm').on('submit', function(e) {
    e.preventDefault();
    $.ajax({
        url : "includes/firstform.inc.php",
        type: "POST",
        data: $(this).serialize(),
        success: function (data) {
        $('.content-container').load('forms/zipscreens-form.php');

        },
        error: function (jXHR, textStatus, errorThrown) {

        }
    });
});

HTML Container:

<div class="content-container">
// in this div the form will be stored.
</div>

Select Form:

<select class="js-example-basic-single" name="selectWidth">
  <?php 
   for ($row = 1; $row <= $lastRow; $row++) {
    echo "<option value='AL'>"; echo $worksheet->getCell('A'.$row)->getValue(); echo "</option>'";
   }
  ?>
</select>

Why isn't this working?

Answer 1

You need to initialise select2(). You can do this after the load call has been completed. So, instead of:

$('.content-container').load('forms/zipscreens-form.php');

Use ..

$( ".content-container" ).load( "forms/zipscreens-form.php", function() {
    $(".js-example-basic-single").select2();
});