select 2 not working for ajax response

Question

i have following JS code where i am tring to reload my modal, when my area reloads i cannot see the select2 related contents, tho they are in the DOM when i inspect them. I am using Select2 version 4.0.2

$("#add_meal_item").on('click', '#save_meal_item', function () {
                var meal_name = $("#add_meal_item_form").find('#meal_name').val();
                var meal_type = $("#add_meal_item_form").find('#meal_type').val();
                var logoImg = $("#add_meal_item_form").find('#meal_image').get(0).files[0];
                var formData = new FormData();
                formData.append('meal_image', logoImg);
                formData.append('meal_type', meal_type);
                formData.append('meal_name', meal_name);
                formData.append('_token', "{{ csrf_token() }}");
                console.log(formData);
                var ajax_url = baseurl + '/save_meal_item';
                $.ajax({
                    type: "POST",
                    url: ajax_url,
                    data: formData,
                    contentType: false,
                    processData: false,
                    cache: false,
                    success: function (response) {
                        $("#add_meal_item").modal('hide');
                        $("#form_meal_body").html(response);
                        ShowSvgImage();

                    }
                });
            });

and following is my HTML generated after ajax response

<div class="modal fade in" id="add-modal-rota-user" style="display: block;">
        <div class="modal-dialog routaPop" role="document">

            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
                    </button>
                    <h4 class="modal-title">Add Meal</h4>
                </div>
                <div class="modal-body inBodyForm" id="form_meal_body"><form action="" method="post" inbodyform="" form-horizontal="" id="add_assigin_meal">
    <div class="row">
        <div class="col-md-4">
            <div class="form-group">
                <label>Select Main Meal: *</label>
                <input type="hidden" name="meal_item_id" value="">
                <input type="hidden" name="meal_id" id="meal_id" value="">
                <div class="select">
                    <select id="main_meal" class="select2 select2-hidden-accessible" name="meal_item[]" multiple="">
                        <option value="">Select Meal</option>

                            <option value="1">boiled egg</option>

                            <option value="2">bread</option>

                            <option value="13">AAA</option>

                            <option value="14">123</option>

                            <option value="15">test123</option>

                            <option value="16">2231111</option>

                            <option value="17">ggggg</option>

                            <option value="18">kkkkkkkkkk</option>

                            <option value="19">test meal</option>

                            <option value="20">hello world</option>

                            <option value="21">ASDASDASD33333</option>
                                                <option value="other">Other</option>
                    </select>
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 129 129" enable-background="new 0 0 129 129" width="512px" height="512px" class="svg replaced-svg">
  <g>
    <path d="m88.6,121.3c0.8,0.8 1.8,1.2 2.9,1.2s2.1-0.4 2.9-1.2c1.6-1.6 1.6-4.2 0-5.8l-51-51 51-51c1.6-1.6 1.6-4.2 0-5.8s-4.2-1.6-5.8,0l-54,53.9c-1.6,1.6-1.6,4.2 0,5.8l54,53.9z" fill="#999999"></path>
  </g>
</svg>
                </div>

            </div>
        </div>
        <div class="col-md-4">
            <div class="form-group">
                <label>Select Drinks: *</label>
                <input type="hidden" name="meal_item_id" value="">
                <input type="hidden" name="meal_id" id="meal_id" value="">
                <div class="select">
                    <select id="drinks" class="select2 select2-hidden-accessible" name="meal_item[]" multiple="">
                        <option value="">Select Meal</option>

                            <option value="3">tea</option>

                            <option value="5">ASDASDASD</option>
                                                <option value="other">Other</option>
                    </select>
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 129 129" enable-background="new 0 0 129 129" width="512px" height="512px" class="svg replaced-svg">
  <g>
    <path d="m88.6,121.3c0.8,0.8 1.8,1.2 2.9,1.2s2.1-0.4 2.9-1.2c1.6-1.6 1.6-4.2 0-5.8l-51-51 51-51c1.6-1.6 1.6-4.2 0-5.8s-4.2-1.6-5.8,0l-54,53.9c-1.6,1.6-1.6,4.2 0,5.8l54,53.9z" fill="#999999"></path>
  </g>
</svg>
                </div>

            </div>
        </div>
        <div class="col-md-4">
            <div class="form-group">
                <label>Select Deserts: *</label>
                <input type="hidden" name="meal_item_id" value="">
                <input type="hidden" name="meal_id" id="meal_id" value="">
                <div class="select">
                    <select id="desserts" class="select2 select2-hidden-accessible" name="meal_item[]" multiple="">
                        <option value="">Select Meal</option>

                            <option value="4">cake</option>
                                                <option value="other">Other</option>
                    </select>
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 129 129" enable-background="new 0 0 129 129" width="512px" height="512px" class="svg replaced-svg">
  <g>
    <path d="m88.6,121.3c0.8,0.8 1.8,1.2 2.9,1.2s2.1-0.4 2.9-1.2c1.6-1.6 1.6-4.2 0-5.8l-51-51 51-51c1.6-1.6 1.6-4.2 0-5.8s-4.2-1.6-5.8,0l-54,53.9c-1.6,1.6-1.6,4.2 0,5.8l54,53.9z" fill="#999999"></path>
  </g>
</svg>
                </div>

            </div>
        </div>
        <div id="new_food_item_section" hidden="hidden">
            <div class="col-md-4">
                <div class="form-group">
                    <label>Add New Meal Item: *</label>
                    <div class="">
                        <input type="text" name="meal_name" id="meal_name">
                    </div>
                </div>
            </div>
            <div class="col-md-12">
                <div class="form-group">
                    <div class="form-group">
                        <label>Upload Meal Item Image: *</label>
                        <div class="file">
                            Upload
                            <input type="file" name="meal_image" id="meal_image" class="hidden">
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <input type="hidden" name="_token" value="iEfVgn5kv4ifAQmNrwOHA117nFqCHLyCIJVihmf4">
    <div class="hidden_form hidden"></div>
</form>
</div>
                <div class="modal-footer">
                    <button class="btn btn-default" href="" type="button" id="cancel_modal">Cancel
                    </button>
                    <button type="button" id="saveform" class="btn btn-primary">Save</button>
                </div>
            </div>
        </div>
    </div>

Answer 1

I hope this help some 1 else, since i was not using the Select2's own ajax, and most answers out there were referring to it. The easiest possible answer to this is to re initialize the select 2 and it saved me alot of pain, may be its not the optimal solution, but it's working for me.

This is the success method which i have changed from what i mentioned above.

   success: function (response) {
                        $("#add_meal_item").modal('hide');
                        $("#form_meal_body").html(response);
                        $(".select2").select2();
                        $(".select2_multi").select2({closeOnSelect: false});

                        ShowSvgImage();

                    }