faire appel ajax dans la conception matérielle en utilisant Codeigniter

Question

Ici j'utilise la conception matérielle lite pour construire le projet après que j'ai fait mon code comme ceci mais aucun résultat ne montre sur le champ correspondant. Voici mon code, s'il vous plaît consulter

<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> 

Voici mon contrôleur

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); 
} 

Voici ma Voir la page

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


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

Le var type=$('#type').val(); est d'obtenir la valeur. Quand je console, il a obtenu le résultat que je comme ça

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

Ceci est mon ajax_vehicle, besoin d'afficher le contenu de cette après avoir sélectionné le type choosed.

<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> 

ne sais vraiment pas ce que les choses supplémentaires à ajouter à cela work.pleae me aider à résoudre

Answer 1

si data contient

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

comme vous le dites, le résultat de $('#vehicle').html(data); seront

<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> 

qui, comme vous pouvez le voir est HTML absurde et invalide. la fonction html() remplace la interne HTML de l'élément sélectionné, pas l'élément lui-même.

Vous avez deux options:

1) Changer la sortie du serveur (i.e. la vue ajax_vehicle) il retourne juste les éléments <option> - pas besoin de retourner la partie extérieure de la <select> ainsi. Par conséquent, le data résultant de retour de l'appel ajax devrait contenir seulement (par exemple):

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

Ensuite, vous pouvez continuer à utiliser $('#vehicle').html(data); comme avant.

OU

2) Utilisation replaceWith, à savoir $("#vehicle").replaceWith(data); au lieu de .html(). Mais dans ce cas vous devez encore modifier la sortie de votre serveur afin que le <select> inclue le balisage id="vehicle", sinon ce code ne fonctionnera pas une seconde fois, car un élément appelé "véhicule" n'existerait plus. Gardez également à l'esprit que si vous avez des gestionnaires d'événements, etc., définis sur l'élément "vehicle", ils doivent également être recréés, puisque vous avez remplacé l'élément entier. Voir http://api.jquery.com/replacewith/

À mon avis, l'option 1 est le meilleur choix.