select 2がAjaxレスポンスで動作しません

Question

私は次のJSコードを持っています。私のエリアをリロードするときにモーダルをリロードするのは難しいですが、select2関連のコンテンツが見えません。私は私がSelectセレクト自身のAJAXを使用していませんでしたので、私は、いくつかの1他のこのヘルプを願って、私のHTMLは、Ajaxのレスポンスの後

<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

を発生させるSelectセレクトバージョン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(); 

        } 
       }); 
      }); 

して、次のように使用しています、そこにあるほとんどの答えはそれを指していました。これに対する最も簡単な答えはselect 2を初期化することです。それは痛みの多くを保存しました。最適な解決策ではないかもしれませんが、私のために働いています。

これは私が上記のものから変更した成功方法です。

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

         ShowSvgImage(); 

        }