CODEWITHSUNDEEP
javascriptjqueryhtmlajaxjquery-select2
user3633032
user3633032

Reputation: 31

jquery select2 after ajax not working anymore

I have a simple select2 control on my site placed in a div. When the site loads, everything works fine. However, if the html content of the div "simpleDiv", where the Select2 is placed, is loaded with Ajax, the Select2 is not showing the results anymore when triggered. That means, in this case the Select2 data is got from the Server, but never shown in the Select2. And this all happens just when the "simpleDiv" html content is loaded with Ajax. Otherwise, everything works fine.

Can anyone help, please?

<div id='simpleDiv'>

<input type="hidden" id="MedikamentID" name="MedikamentID" class="fixed-width4" />

</div>

<script>
 $('#MedikamentID').select2({
                    placeholder: "[Medikament]",
                    allowClear: true,
                    minimumInputLength: 2,
                    ajax: {
                        url: "/Medikament/List",
                        dataType: 'json',
                        data: function (term, page) {

                            return {
                                query: term
                            };
                        },
                        results: function (data, page) {

                            return { results: data };
                        }
                    }
                });

</script>

Upvotes: 2

Views: 5110

Answers (2)

mfirdaus
mfirdaus

Reputation: 4592

Whenever you change things using .html() or .innerHTML, essentially, the DOM gets reconstructed and all the javascript events and properties attached to them is lost. But the fix is simple. Just call Select 2 again after you finished inserting the new HTML. So something like:

$.ajax("example.php").done(function(data){
   $("#simpleDiv").html(data)
   $("#MedikamentID").select2(...) //rebuild select2
})

I attached a jsfiddle to illustrate this: http://jsfiddle.net/HT3rP/1/

Upvotes: 6

Joseph N.
Joseph N.

Reputation: 2457

If I got your question correct, you may be having a similar problem related to this stackoverflow problem

You could try something like this

$(document).on("ready", "#MedikamentID", function () {
    $(this).select2({
       // options go here
    });
});

Upvotes: -2

Related Questions