Codeigniterを使用して材料設計でajaxを呼び出します

Question

ここでは、このようなコードを実行したが、対応するフィールドに結果が表示されていないので、プロジェクトをビルドするためにmaterial design liteを使用しています。 ここに私のコードは、一見

<script> 
$('#type').change(function(){ 
    var type=$('#type').val(); 
    alert(type); 
    var url='<?php echo base_url(); ?>admin/vehicle/ajax_vehicle'; 
    alert(url); 
    $.post(url, {type:type}, function(data) 
    { 
    alert(); 
    componentHandler.upgradeDom();  
    $('#vehicle').html(data); 
    }); 
}); 
</script> 

を持ってください。ここ

public function ajax_vehicle() 
{ 
    $data['vehicle']=$this->Vehicle_model->view_available_vehicles($_POST['type']); 
    //var_dump($data['vehicle']); 
    $this->load->view('admin/vehicle/ajax_vehicle',$data); 
} 

はここに私のビューページ

<div class="input-field col s12"> 
     <select required name="vehicle_id" id="vehicle"> 
     <option value="" selected>Select</option> 


     </select> 
     <label>Select Vehicle</label> 
</div> 

var type=$('#type').val();が値を取得しているである私のコントローラです。私はこれが私のajax_vehicleあるこの

<select required name="vehicle_id"> 
    <option value="">Select</option> 
    <option value="42" >bullet</option> 
    <option value="41" >pulsar</option> 
</select> 

のような結果を得、それを慰めるとき は、選びましタイプを選択した後、この内容を表示する必要があります。あなたが国家としてdataがのその結果、

<select required name="vehicle_id"> 
    <option value="">Select</option> 
    <option value="42" >bullet</option> 
    <option value="41" >pulsar</option> 
</select> 

が含まれている場合

<select required name="vehicle_id"> 
<option value="">Select</option> 
<?php if(empty($assign_vehicle_info)){ 
     if (!empty($vehicle)) { 
     foreach ($vehicle as $veh) {?> 
<option value="<?= $veh->id ?>"<?php if (!empty($assign_vehicle_info)) { echo $assign_vehicle_info->vehicle_id == $veh->id ? 'selected' : ''; } ?>><?= $veh->name ?></option> 
<?php }}}?> 
</select> 

は実際に

Answer 1

を解決するために私を助けるwork.pleaeためにこれに追加される追加何の事か分かりません$('#vehicle').html(data);は

<select required name="vehicle_id" id="vehicle"> 
    <select required name="vehicle_id"> 
    <option value="">Select</option> 
    <option value="42" >bullet</option> 
    <option value="41" >pulsar</option> 
    </select> 
</select> 

です無意味で無効なHTML html()関数は、要素そのものではなく、選択した要素の内部 HTMLを置き換えます。

は、次の2つのオプションがあります。

1）サーバの出力（すなわちajax_vehicleビューを変更する）ので、それだけで<option>要素を返します - だけでなく<select>の外側部分を返す必要はありませんが。したがって、AJAX呼び出しから返されたdataは（たとえば）含まれている必要があるでしょう：

<option value="">Select</option> 
<option value="42" >bullet</option> 
<option value="41" >pulsar</option> 

は、その後、あなたが以前のように$('#vehicle').html(data);を継続して使用することができます。

OR

2）を使用replaceWith、すなわち$("#vehicle").replaceWith(data);代わりに.html()。しかし、この場合には<select>にid="vehicle"のマークアップが含まれるようにサーバー出力を修正する必要があります。そうしないと、「車両」という要素が存在しなくなるため、このコードはもう一度動作しません。また、 "vehicle"要素に設定されたイベントハンドラなどがある場合は、要素全体を置き換えたため、再作成する必要があることにも留意してください。 http://api.jquery.com/replacewith/

私の意見では、オプション1が良い選択です。