IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Récupérer valeurs tableau codeigniter et ajax [AJAX]


Sujet :

jQuery

  1. #1
    Membre averti
    Homme Profil pro
    Étudiant
    Inscrit en
    Septembre 2019
    Messages
    24
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Septembre 2019
    Messages : 24
    Par défaut Récupérer valeurs tableau codeigniter et ajax
    Bonjour à tous,

    Je suis débutant en ajax, et j'essaye de créer un formulaire en ajax qui me sortirait un tableau par rapport aux choix fait par l'utilisateur dans des dropdown ainsi que dans des input. Je travaille avec codeigniter pour le framework.

    Avec un seul input 'search_text', le tableau se met bien à jour, mais je sèche un peu pour réussir à passer plusieurs variables d'un coup.

    Voici le fichier de ma vue
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
     <html>
     <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Autoccasion</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <!--  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />-->
     </head> 
     <body>
     <div class="container">
       <br />
       <br />
       <br />
       <h2 align="center">Recherche d'un véhicule</h2><br />
       <div class="form-group">
        <div class="input-group">
         <span class="input-group-addon">Recherche</span>
         <input type="text" name="search_text" id="search_text" placeholder="Recherche d'un véhicule" class="form-control" />
         <div class="col-md-8">
    			<select name="mark" id="markt" class="form-control">
    				<option value="">select</option>
    				<?php 
                                    $mark_values = array(
                                            'Volkswagen'=>'Volkswagen',
                                            'Toyota'=>'Toyota',
                                            'Audi'=>'Audi',
                                            'BMW'=>'BMW',
                                            'Ford'=>'Ford',
                                            'Peugeot'=>'Peugeot',
                                            'Citroen'=>'Citroen',
                                            'Dacia'=>'Dacia',
                                            'Kia'=>'Kia',
                                    );
     
                                    foreach($mark_values as $value => $display_text)
                                    {
                                            $selected = ($value == $this->input->post('mark')) ? ' selected="selected"' : "";
     
                                            echo '<option value="'.$value.'" '.$selected.'>'.$display_text.'</option>';
                                    } 
                                    ?>
    			</select>
    			<span class="text-danger"><?php echo form_error('mark');?></span>
    		</div>
         <div class="form-group">
    		<label for="type" class="col-md-4 control-label">Type</label>
    		<div class="col-md-8">
    			<select name="type" id="type" class="form-control">
    				<option value="">select</option>
    				<?php 
                                    $type_values = array(
                                            'Citadine'=>'Citadine',
                                            'Cabriolet'=>'Cabriolet',
                                            'Berline'=>'Berline',
                                            'Break'=>'Break',
                                            'Utilitaire'=>'Utilitaire',
                                            'Monospace'=>'Monospace',
                                            'Autre'=>'Autre',
                                    );
     
                                    foreach($type_values as $value => $display_text)
                                    {
                                            $selected = ($value == $this->input->post('type')) ? ' selected="selected"' : "";
     
                                            echo '<option value="'.$value.'" '.$selected.'>'.$display_text.'</option>';
                                    } 
                                    ?>
    			</select>
    		</div>
    	</div>
         <div class="form-group">
    		<label for="color" class="col-md-4 control-label">Color</label>
    		<div class="col-md-8">
    			<select name="color" id="color" class="form-control">
    				<option value="">select</option>
    				<?php 
                                    $color_values = array(
                                            'gris'=>'Gris',
                                            'noir'=>'Noir',
                                            'beige'=>'Beige',
                                            'rouge'=>'Rouge',
                                            'bleu'=>'Bleu',
                                            'blanc'=>'Blanc',
                                            'argent'=>'Argent',
                                            'jaune'=>'Jaune',
                                            'vert'=>'Vert',
                                            'or'=>'Or',
                                            'marron'=>'Marron',
                                            'orange'=>'Orange',
                                            'bronze'=>'Bronze',
                                            'violet'=>'Violet',
                                    );
     
                                    foreach($color_values as $value => $display_text)
                                    {
                                            $selected = ($value == $this->input->post('color')) ? ' selected="selected"' : "";
     
                                            echo '<option value="'.$value.'" '.$selected.'>'.$display_text.'</option>';
                                    } 
                                    ?>
    			</select>
    		</div>
    	</div>
           <div class="col-md-8">
    			<select name="carburant" id="carburant" class="form-control">
    				<option value="">select</option>
    				<?php 
                                    $carburant_values = array(
                                            'diesel'=>'Diesel',
                                            'essence'=>'Essence',
                                            'hybride'=>'Hybride',
                                            'cng'=>'CNG',
                                            'lpg'=>'LPG',
                                    );
     
                                    foreach($carburant_values as $value => $display_text)
                                    {
                                            $selected = ($value == $this->input->post('carburant')) ? ' selected="selected"' : "";
     
                                            echo '<option value="'.$value.'" '.$selected.'>'.$display_text.'</option>';
                                    } 
                                    ?>
    			</select>
    			<span class="text-danger"><?php echo form_error('carburant');?></span>
    		</div>
    	</div>
        </div>
       </div>
       <br />
       <div id="result"></div>
      </div>
      <div style="clear:both"></div>
      <br />
      <br />
      <br />
      <br />
      </body>
     
    <script>
    $(document).ready(function(){
     
     load_data();
     
     function load_data(query)
     {
         var carburant = $('#carburant option:selected').val(); 
         var type = $('#type option:selected').val();
         var color = $('#color option:selected').val(); 
         var markt = $('#markt option:selected').val(); 
      $.ajax({
       url:"<?php echo base_url();?>index.php/moncontrolleur/fetch",
       method:"POST",
       data:{query:query, carburant:carburant, type:type, color:color, markt:markt},
       success:function(data){
        $('#result').html(data);
       }
      });
     }
     
     $('#search_text').keyup(function(){
      var search = $(this).val();
      if(search != '')
      {
       load_data(search);
      }
      else
      {
       load_data();
      }
     });
    });
    </script>

    Le controlleur
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    function fetch()
     {
     
      $output = '';
      $query = '';
      $this->load->model('ajaxsearch_model');
     
      if($this->input->post('query'))
      {
       $query = $this->input->post('query');
      }
     
     
      $data = $this->ajaxsearch_model->fetch_data($query);
     
      $output .= '
      <div class="table-responsive">
         <table class="table table-bordered table-striped">
          <tr>
           <th>Photo</th>
           <th>ID</th>
           <th>Marque</th>
           <th>Modèle</th>
           <th>Type</th>
           <th>Mois const.</th>
           <th>Année const.</th>
           <th>Carburant</th>
           <th>N° chassis</th>
           <th>KM</th>
           <th>Prix</th>
           <th>Couleur</th>
           <th>Cylindrée</th>
           <th>Visible</th>
           <th>Remarque</th>
          </tr>
      ';
      if($data->num_rows() > 0)
      {
       foreach($data->result() as $row)
       {
        $output .= '
          <tr>
           <td>'.$row->photo.'</td>
           <td>'.$row->id.'</td>
           <td>'.$row->mark.'</td>
           <td>'.$row->model.'</td>
           <td>'.$row->type.'</td>
           <td>'.$row->constructionMonth.'</td>
           <td>'.$row->constructionYear.'</td>
           <td>'.$row->carburant.'</td>
           <td>'.$row->chassis.'</td>
           <td>'.$row->km.'</td>
           <td>'.$row->price.'</td>
           <td>'.$row->color.'</td>
           <td>'.$row->cylindree.'</td>
           <td>'.$row->visible.'</td>
           <td>'.$row->remark.'</td>
     
     
          </tr>
        ';
       }
      }
      else
      {
       $output .= '<tr>
           <td colspan="5">Pas de véhicule trouvé</td>
          </tr>';
      }
      $output .= '</table>';
     
      echo $output;
     
    }
    Le modèle
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    <?php
    class Ajaxsearch_model extends CI_Model
    {
     function fetch_data($query)
     {
     
     
      $this->db->select("*");
      $this->db->from("cars");
     
      $this->db->like('visible', 1);
     
      if($query != '')
      {
       $this->db->group_start();   
       $this->db->like('id', $query);
       $this->db->like('chassis', $query);
       $this->db->like('mark', $query);
       $this->db->like('model', $query);
       $this->db->like('type', $query);
       $this->db->like('km', $query);
       $this->db->like('price', $query);
       $this->db->like('color', $query);
       $this->db->like('constructionMonth', $query);
       $this->db->like('constructionYear', $query);
       $this->db->like('carburant', $query);
       $this->db->like('cylindree', $query);
       $this->db->like('remark', $query);
       $this->db->like('photo', $query);
       $this->db->like('visible', $query);
       $this->db->group_end();   
     
      }
      return $this->db->get();
     }
    }
    Je galère un peu pour récupérer et passer les valeurs du tableau de la vue au modèle, si jamais une âme charitable pourrait m'aiguiller un peu, je l'en remercie d'avance.

    PS: Je ne suis pas sûr d'avoir posté au bon endroit, vu que ça mélange de l'ajax et du php :s

  2. #2
    Membre chevronné Avatar de ma5t3r
    Homme Profil pro
    Développeur freelance
    Inscrit en
    Mai 2015
    Messages
    320
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur freelance
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mai 2015
    Messages : 320
    Par défaut
    Salut,
    Avec un seul input 'search_text', le tableau se met bien à jour
    Montre ton code JS

  3. #3
    Membre averti
    Homme Profil pro
    Étudiant
    Inscrit en
    Septembre 2019
    Messages
    24
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Septembre 2019
    Messages : 24
    Par défaut
    Bonjour,

    Voici le code en question

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    <script>
    $(document).ready(function(){
     
     load_data();
     
     function load_data(query)
     {
         var carburant = $('#carburant option:selected').val(); 
         var type = $('#type option:selected').val();
         var color = $('#color option:selected').val(); 
         var markt = $('#markt option:selected').val(); 
      $.ajax({
       url:"<?php echo base_url();?>index.php/moncontrolleur/fetch",
       method:"POST",
       data:{query:query, carburant:carburant, type:type, color:color, markt:markt},
       success:function(data){
        $('#result').html(data);
       }
      });
     }
     
     $('#search_text').keyup(function(){
      var search = $(this).val();
      if(search != '')
      {
       load_data(search);
      }
      else
      {
       load_data();
      }
     });
    });
    </script>
    Avec le search_text cela fonctionne bien, mais dans le load data, j'essaie de passer le tout dans un tableau pour l'amener jusqu'au contrôleur par après.

    Merci déjà pour ta réponse 😉

  4. #4
    Membre chevronné Avatar de ma5t3r
    Homme Profil pro
    Développeur freelance
    Inscrit en
    Mai 2015
    Messages
    320
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur freelance
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mai 2015
    Messages : 320
    Par défaut
    Il faut revoir ton code jQuery.

    Il faudrait construire un form avec une syntaxe correcte dans ton cas, il serait plus facile de serializer les data.
    Pas obligatoire pour de l'Ajax mais je te le conseille pour faciliter la maintenance côté JS.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <form id="myForm" action="<?= base_url("controller/methode")?> method="post">
    Tu peux récupérer l'URL de la méthode via
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    var url = $('#myForm').attr('action');
    Et voici le code JS
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
     
    $(document).ready(function(){
            var url = $('#myform').attr('action');
            $('#search_text').keyup(function(e){
                /** ici tester le nombre de caracteres saisis avant de lancer le script */
                var query = $(this).val();
                var carburant = $('#carburant option:selected').val();
                var type = $('#type option:selected').val();
                var color = $('#color option:selected').val();
                var markt = $('#markt option:selected').val();
                $.ajax({
                    url : url,
                    type : 'POST',
                    data:{
                        query : query,
                        carburant : carburant,
                        type : type,
                        color : color,
                        markt : markt
                    },
                    success : function(response){
                        var result = JSON.parse(response);
                        /** $('#result').html(result);*/
                        console.log(result);
                    }
                });
            });
        });

  5. #5
    Membre averti
    Homme Profil pro
    Étudiant
    Inscrit en
    Septembre 2019
    Messages
    24
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Septembre 2019
    Messages : 24
    Par défaut
    Je te remercie, j'essaye ça vers 18h, car actuellement je ne suis pas chez moi.

    Mais dans le cas ou je serialize les données, pour les récupérer dans le contrôleur, ce n'est pas plus compliqué qu'un tableau ?

  6. #6
    Membre chevronné Avatar de ma5t3r
    Homme Profil pro
    Développeur freelance
    Inscrit en
    Mai 2015
    Messages
    320
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur freelance
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mai 2015
    Messages : 320
    Par défaut
    :-)
    Tu récupères les données comme d'hab
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
     
    $myData1 = $this->input->post('myData1');
    $myData2 = $this->input->post('myData2');

  7. #7
    Membre averti
    Homme Profil pro
    Étudiant
    Inscrit en
    Septembre 2019
    Messages
    24
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Septembre 2019
    Messages : 24
    Par défaut
    Bonsoir,

    Je viens de tester, et je dois m'être planté quelque part à mon avis, car la vue ne contacte même plus le controlleur

    Voici le code de la vue modifiée sous les conseils de ma5T3r
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
     <html>
     <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Autoccasion</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <!--  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />-->
     </head> 
     <body>
     <form id="recherche_ajax" action="<?= base_url("index.php/moncontrolleur/fetch")?> method="post">
           <div class="container">
       <br />
       <br />
       <br />
       <h2 align="center">Recherche d'un véhicule</h2><br />
       <div class="form-group">
        <div class="input-group">
         <span class="input-group-addon">Recherche</span>
         <input type="text" name="search_text" id="search_text" placeholder="Recherche d'un véhicule" class="form-control" />
         <div class="col-md-8">
    			<select name="mark" id="markt" class="form-control">
    				<option value="">select</option>
    				<?php 
    				$mark_values = array(
    					'Volkswagen'=>'Volkswagen',
    					'Toyota'=>'Toyota',
    					'Audi'=>'Audi',
    					'BMW'=>'BMW',
    					'Ford'=>'Ford',
    					'Peugeot'=>'Peugeot',
    					'Citroen'=>'Citroen',
    					'Dacia'=>'Dacia',
    					'Kia'=>'Kia',
    				);
     
    				foreach($mark_values as $value => $display_text)
    				{
    					$selected = ($value == $this->input->post('mark')) ? ' selected="selected"' : "";
     
    					echo '<option value="'.$value.'" '.$selected.'>'.$display_text.'</option>';
    				} 
    				?>
    			</select>
    			<span class="text-danger"><?php echo form_error('mark');?></span>
    		</div>
         <div class="form-group">
    		<label for="type" class="col-md-4 control-label">Type</label>
    		<div class="col-md-8">
    			<select name="type" id="type" class="form-control">
    				<option value="">select</option>
    				<?php 
    				$type_values = array(
    					'Citadine'=>'Citadine',
    					'Cabriolet'=>'Cabriolet',
    					'Berline'=>'Berline',
    					'Break'=>'Break',
    					'Utilitaire'=>'Utilitaire',
    					'Monospace'=>'Monospace',
    					'Autre'=>'Autre',
    				);
     
    				foreach($type_values as $value => $display_text)
    				{
    					$selected = ($value == $this->input->post('type')) ? ' selected="selected"' : "";
     
    					echo '<option value="'.$value.'" '.$selected.'>'.$display_text.'</option>';
    				} 
    				?>
    			</select>
    		</div>
    	</div>
         <div class="form-group">
    		<label for="color" class="col-md-4 control-label">Color</label>
    		<div class="col-md-8">
    			<select name="color" id="color" class="form-control">
    				<option value="">select</option>
    				<?php 
    				$color_values = array(
    					'gris'=>'Gris',
    					'noir'=>'Noir',
    					'beige'=>'Beige',
    					'rouge'=>'Rouge',
    					'bleu'=>'Bleu',
    					'blanc'=>'Blanc',
    					'argent'=>'Argent',
    					'jaune'=>'Jaune',
    					'vert'=>'Vert',
    					'or'=>'Or',
    					'marron'=>'Marron',
    					'orange'=>'Orange',
    					'bronze'=>'Bronze',
    					'violet'=>'Violet',
    				);
     
    				foreach($color_values as $value => $display_text)
    				{
    					$selected = ($value == $this->input->post('color')) ? ' selected="selected"' : "";
     
    					echo '<option value="'.$value.'" '.$selected.'>'.$display_text.'</option>';
    				} 
    				?>
    			</select>
    		</div>
    	</div>
           <div class="col-md-8">
    			<select name="carburant" id="carburant" class="form-control">
    				<option value="">select</option>
    				<?php 
    				$carburant_values = array(
    					'diesel'=>'Diesel',
    					'essence'=>'Essence',
    					'hybride'=>'Hybride',
    					'cng'=>'CNG',
    					'lpg'=>'LPG',
    				);
     
    				foreach($carburant_values as $value => $display_text)
    				{
    					$selected = ($value == $this->input->post('carburant')) ? ' selected="selected"' : "";
     
    					echo '<option value="'.$value.'" '.$selected.'>'.$display_text.'</option>';
    				} 
    				?>
    			</select>
    			<span class="text-danger"><?php echo form_error('carburant');?></span>
    		</div>
    	</div>
        </div>
       </div>
       <br />
       <div id="result"></div>
      </div>
      <div style="clear:both"></div>
      <br />
      <br />
      <br />
      <br />
     </form>
      </body>
     
    <script>
    $(document).ready(function(){
            var url = $('#recherche_ajax').attr('action');
            $('#search_text').keyup(function(1){
                /** ici tester le nombre de caracteres saisis avant de lancer le script */
                var query = $(this).val();
                var carburant = $('#carburant option:selected').val();
                var type = $('#type option:selected').val();
                var color = $('#color option:selected').val();
                var markt = $('#markt option:selected').val();
                $.ajax({
                    url : url,
                    type : 'POST',
                    data:{
                        query : query,
                        carburant : carburant,
                        type : type,
                        color : color,
                        markt : markt
                    },
                    success : function(response){
                        var result = JSON.parse(response);
                        /** $('#result').html(result);*/
                        console.log(result);
                    }
                });
            });
        });
    </script>
    Le controlleur
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    <?php
    defined('BASEPATH') OR exit('No direct script access allowed');
     
    class Moncontrolleur extends CI_Controller {
     
    	public function __construct() {
            parent::__construct();
            session_start();
        }
     
            public function index()
    	{
            $data['_view'] = 'index';
            $this->load->view('layouts/main',$data);
    	}
     
            public function insertVendor(){
                $sdo = new Vendor_model();
                $sdo->insert($_REQUEST);
                $data['vendors'] = $this->Vendor_model->get_all_vendors();
                $data['_view'] = 'vendor/index';
                $this->load->view('layouts/main',$data);
            }
     
         function index_ajaxsearch()
     {
            $data['_view'] = 'car/ajaxsearch';
            $this->load->view('layouts/main',$data);
     }
     
     function fetch()
     {
     
      $output = '';
      $query = '';
      $carburant = '';
      $type = '';
      $color = '';
      $markt = '';
      $this->load->model('ajaxsearch_model');
     
      if($this->input->post('query'))
      {
       $query = $this->input->post('query');
      }
     
      if($this->input->post('carburant'))
      {
       $carburant = $this->input->post('carburant');
      }
     
      if($this->input->post('type'))
      {
       $type = $this->input->post('type');
      }
     
      if($this->input->post('color'))
      {
       $color = $this->input->post('color');
      }
     
      if($this->input->post('markt'))
      {
       $markt = $this->input->post('markt');
      }
     
     
      $data1 = $this->ajaxsearch_model->fetch_data($query);
      $data2 = $this->ajaxsearch_model->fetch_data($carburant);
      $data3 = $this->ajaxsearch_model->fetch_data($type);
      $data4 = $this->ajaxsearch_model->fetch_data($color);
      $data5 = $this->ajaxsearch_model->fetch_data($markt);
     
      $output .= '
      <div class="table-responsive">
         <table class="table table-bordered table-striped">
          <tr>
           <th>Photo</th>
           <th>ID</th>
           <th>Marque</th>
           <th>Modèle</th>
           <th>Type</th>
           <th>Mois const.</th>
           <th>Année const.</th>
           <th>Carburant</th>
           <th>N° chassis</th>
           <th>KM</th>
           <th>Prix</th>
           <th>Couleur</th>
           <th>Cylindrée</th>
           <th>Visible</th>
           <th>Remarque</th>
          </tr>
      ';
      if(($data1->num_rows() > 0) and ($data2->num_rows() > 0) and ($data3->nums_rows() > 0) and ($data4->nums_rows() > 0) and ($data5->num_rows() > 0))
      {
       foreach(($data1->result() and $data2->result() and $data3->result() and $data4->result() and $data5->result()) as $row)
       {
        $output .= '
          <tr>
           <td>'.$row->photo.'</td>
           <td>'.$row->id.'</td>
           <td>'.$row->mark.'</td>
           <td>'.$row->model.'</td>
           <td>'.$row->type.'</td>
           <td>'.$row->constructionMonth.'</td>
           <td>'.$row->constructionYear.'</td>
           <td>'.$row->carburant.'</td>
           <td>'.$row->chassis.'</td>
           <td>'.$row->km.'</td>
           <td>'.$row->price.'</td>
           <td>'.$row->color.'</td>
           <td>'.$row->cylindree.'</td>
           <td>'.$row->visible.'</td>
           <td>'.$row->remark.'</td>
     
     
          </tr>
        ';
       }
      }
      else
      {
       $output .= '<tr>
           <td colspan="5">Pas de véhicule trouvé</td>
          </tr>';
      }
      $output .= '</table>';
     
      echo $output;
     
    }
     
    }
    Le modèle
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    <?php
    class Ajaxsearch_model extends CI_Model
    {
     function fetch_data($query, $type, $carburant, $color, $markt)
     {
     
     
      $this->db->select("*");
      $this->db->from("cars");
     
      $this->db->like('visible', 1);
     
      if(($query != '') or ($type != '') or ($carburant != '') or ($color != '') or ($markt != ''))
      {
    //   $this->db->group_start();   
    //   $this->db->like('id', $query);
    //   $this->db->like('chassis', $query);
       $this->db->like('mark', $markt);
    //   $this->db->like('model', $query);
       $this->db->like('type', $type);
       $this->db->like('km', $query);
    //   $this->db->like('price', $query);
       $this->db->like('color', $olor);
    //   $this->db->like('constructionMonth', $query);
    //   $this->db->like('constructionYear', $query);
       $this->db->like('carburant', $carburant);
    //   $this->db->like('cylindree', $query);
    //   $this->db->like('remark', $query);
    //   $this->db->like('photo', $query);
    //   $this->db->like('visible', $query);
    //   $this->db->group_end();   
     
      }
      return $this->db->get();
     }
    }
    Dans la vue, pour cette ligne
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    var url = $('#recherche_ajax').attr('action');
    juste pour être bien sûr, le "action" fait référence au action du formulaire directement?

  8. #8
    Membre averti
    Homme Profil pro
    Étudiant
    Inscrit en
    Septembre 2019
    Messages
    24
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Septembre 2019
    Messages : 24
    Par défaut
    Bonjour à tous,

    J'avance petit à petit (du moins j'espère ), j'avais remarqué que quand je mettais à jour les dropdowns, il ne prenait pas en compte la mise à jour de celui-ci, j'ai donc rajouté
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    $("#carburant").on("change", function() {
        var carburant = $('#carburant option:selected').val();
      if(carburant != '')
      {
       load_data(carburant);
      }
      else
      {
       load_data();
      }
    });
    pour chacune des 4 dropdowns, mais je bloquais encore, car il ne prenait en compte que la première variable, et c'est celle-là qu'il mettait à jour à chaque fois, je me retrouvais donc avec ce qui n'était pas correct, vu que ça aurait dû être , j'ai donc changé suite à pas mal de recherche le "data"
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    data:{
           carburant:'carburant',
           km:'km',  
           type:'type', (le km est l'ancien query)
           color:'color', 
           markt:'markt'
       },
    donc maintenant je vois bien mes différentes variables, par contre j'ai un soucis, quoique je sélectionne dans les dropdowns, et même dans le input, elle reste vierge, elle ne prenne pas la valeur rentrée, quelqu'un aurait une idée?

  9. #9
    Membre chevronné Avatar de ma5t3r
    Homme Profil pro
    Développeur freelance
    Inscrit en
    Mai 2015
    Messages
    320
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur freelance
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mai 2015
    Messages : 320
    Par défaut
    Je commence à ne plus rien y comprendre.
    Tu utilises à nouveau ta fonction load_data ?
    Je croyais que tu lançais la requête ajax lors du keyUp.

    Debug étape par étape.
    En dév, on coupe les problèmes pour les solutionner plus facilement.

    Quel est ton objectif ?
    Que doit faire ton code ?

  10. #10
    Membre averti
    Homme Profil pro
    Étudiant
    Inscrit en
    Septembre 2019
    Messages
    24
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Septembre 2019
    Messages : 24
    Par défaut
    Citation Envoyé par ma5t3r Voir le message
    Je commence à ne plus rien y comprendre.
    Tu utilises à nouveau ta fonction load_data ?
    J'étais repassé dessus cette nuit car je n'arrivais plus dans le fetch avec ta méthode

    Je croyais que tu lançais la requête ajax lors du keyUp.
    Au début oui, c'était effectivement comme cela que la requête se lançait.

    Debug étape par étape.
    En dév, on coupe les problèmes pour les solutionner plus facilement.

    Quel est ton objectif ?
    Que doit faire ton code ?
    En fait, j'ai un tableau de voiture dont les infos se trouvent dans la table "Cars", et lorsque l'utilisateur arrive sur la page, il voit un tableau avec toutes les voitures.

    Au départ, j'avais un champ (le search_text qui était lancé par le keyUp) qui permettait lorsque l'utilisateur tapait ce qu'il cherchait de mettre à jour les lignes du tableau correspondant à ce qu'il avait tapé, mais le search_text recherchait dans toutes les lignes d'un coup.

    Je voudrai donc mettre en place plusieurs champ de recherche plus précis, à savoir permettre à l'utilisateur de pouvoir trouver les voiture "beige" et "cabriolet" par exemple.(avec les dropdowns)

  11. #11
    Membre chevronné Avatar de ma5t3r
    Homme Profil pro
    Développeur freelance
    Inscrit en
    Mai 2015
    Messages
    320
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur freelance
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mai 2015
    Messages : 320
    Par défaut
    Tu mets les variables entre guillemets
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
     
    data:{
           carburant:'carburant',
           km:'km',  
           type:'type', (le km est l'ancien query)
           color:'color', 
           markt:'markt'
       },
    Ca n'a aucun sens.


    Bon !
    Il faut :
    - Construire ton formulaire avec toutes les options
    - Serializer ton form avant le post ajax et éventuellement gérer les messages clients pré-post.
    - Traiter les options choisies dans la méthode de ton controller pour créer la requête SQL
    - Recevoir le résultat de la requête au format JSON dans ta response jQuery et afficher le résultat.

    C'est tout simple.
    Essaie de faire fonctionner ton code sans ajax pour commencer et ensuite tu y implémentes la partie JS lorsque tout fonctionne.

  12. #12
    Membre averti
    Homme Profil pro
    Étudiant
    Inscrit en
    Septembre 2019
    Messages
    24
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Septembre 2019
    Messages : 24
    Par défaut
    Citation Envoyé par ma5t3r Voir le message
    Tu mets les variables entre guillemets
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
     
    data:{
           carburant:'carburant',
           km:'km',  
           type:'type', (le km est l'ancien query)
           color:'color', 
           markt:'markt'
       },
    Ca n'a aucun sens.
    Oui je viens de voir ça
    Pas eu beaucoup d'heures de sommeil


    Bon !
    Il faut :
    - Construire ton formulaire avec toutes les options
    - Serializer ton form avant le post ajax et éventuellement gérer les messages clients pré-post.
    - Traiter les options choisies dans la méthode de ton controller pour créer la requête SQL
    - Recevoir le résultat de la requête au format JSON dans ta response jQuery et afficher le résultat.
    Je vais essayer tout ça maintenant et faire quelques recherches en même temps, car comme je l'ai dit dans mon 1er post, je débute vraiment en ajax

  13. #13
    Membre chevronné Avatar de ma5t3r
    Homme Profil pro
    Développeur freelance
    Inscrit en
    Mai 2015
    Messages
    320
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur freelance
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mai 2015
    Messages : 320
    Par défaut
    Petite rectification
    Il vaut mieux prévoir un bouton recherche plutôt que lancer une recherche sur l'événement onchange de chaque SELECT

  14. #14
    Membre averti
    Homme Profil pro
    Étudiant
    Inscrit en
    Septembre 2019
    Messages
    24
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Septembre 2019
    Messages : 24
    Par défaut
    Me revoici, je viens de le serializer, et ça marche tout de suite mieux pour obtenir mes valeurs
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    search_km	45
    mark	Kia
    type	Monospace
    color	orange
    carburant	hybride
    submit	Envoyer
    Par contre j'ai un soucis, je n'arrive pas à atteindre le fetch de moncontrolleur
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <script> 
        $("#recherche_ajax").submit(function(e){ // On sélectionne le formulaire par son identifiant
        e.preventDefault(); // Le navigateur ne peut pas envoyer le formulaire
     
        var datas = $(this).serialize(); // On créer une variable content le formulaire sérialisé
        $(document).ready(function(){
     
        load_data();
     
        $.ajax({
        url:"<?php echo base_url();?>index.php/moncontrolleur/fetch",
        method:"POST",
        data : datas,
     
        success:function(data){
            $('#result').html(data);
       }
      });
     }
    })};
    J'ai une erreur 400 comme retour du navigateur
    Ce que je trouve bizarre, c'est que bien que ma requête devrait passer en POST, j'ai les paramètres dans l'url
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    http://localhost/autoccasion/index.php/moncontrolleur/fetch%20method=?search_km=12&mark=Volkswagen&type=Citadine&color=gris&carburant=diesel&submit=Envoyer
    J'aurais manqué quelque chose?

  15. #15
    Membre chevronné Avatar de ma5t3r
    Homme Profil pro
    Développeur freelance
    Inscrit en
    Mai 2015
    Messages
    320
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur freelance
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mai 2015
    Messages : 320
    Par défaut
    J'ai une erreur 400 comme retour du navigateur
    Ce que je trouve bizarre, c'est que bien que ma requête devrait passer en POST, j'ai les paramètres dans l'url
    Une erreur dans ton script javascript lance le formulaire normalement, sans passer par la fonction JS
    Voici le bon code
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
     
        $(document).ready(function(){
            $("#recherche_ajax").submit(function(e){ // Lors du submit du form
                alert('test'); //passe t-on dans la fonction ?
     
                var url = $(this).attr('action');
                e.preventDefault(); // suppression du traitement par défaut lors du submit
                var data = $(this).serialize(); // On créer une variable content le formulaire sérialisé
     
                //load_data(); //qu'est-ce que c'est ce truc ici ?
     
                $.ajax({
                    url:url,
                    method:"POST",
                    data : data,
                    success:function(response){
                        //ici, response et le retour de /controller/methode via echo json_encode(...)
                        alert(response);
                        $('#result').html(response);
                    }
                });
            }
        });

  16. #16
    Membre averti
    Homme Profil pro
    Étudiant
    Inscrit en
    Septembre 2019
    Messages
    24
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Septembre 2019
    Messages : 24
    Par défaut
    J'arrive bien dans la fonction jusqu'à l'alerte 'Test', et j'obtiens bien une réponse avec le code suivant

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    $(document).ready(function(){
            $("#recherche_ajax").submit(function(e){ // Lors du submit du form
                alert('test'); //passe t-on dans la fonction ?
     
                var url = $(this).attr('action');
                e.preventDefault(); // suppression du traitement par défaut lors du submit
                var data = $(this).serialize(); // On créer une variable content le formulaire sérialisé
     
                $.ajax({
                    url:url,
                    method:"POST",
                    data : data,
                    success:function(response){
                        //ici, response et le retour de /controller/methode via echo json_encode(...)
                        alert(response);
                        $('#result').html(response);
                    }
                });
            }
        )});
    Il manquait une " dans ma déclaration du formulaire
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <form id="recherche_ajax" action="<?= base_url("index.php/moncontrolleur/fetch")?>" method="post">

    Je n'ai plus d'erreur 400, il passe bien en 200, et me renvoi la requête du fetch dans la 2nd alerte testpass
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
      <div class="table-responsive">
         <table class="table table-bordered table-striped">
          <tr>
           <th>Photo</th>
           <th>ID</th>
           <th>Marque</th>
           <th>Modèle</th>
           <th>Type</th>
           <th>Mois const.</th>
           <th>Année const.</th>
           <th>Carburant</th>
           <th>N° chassis</th>
           <th>KM</th>
           <th>Prix</th>
           <th>Couleur</th>
           <th>Cylindrée</th>
           <th>Visible</th>
           <th>Remarque</th>
          </tr>
      <tr>
           <td colspan="5">Pas de véhicule trouvé</td>
          </tr></table>

    Je vais essayer en enlevant les alertes pour voir ce que cela donne, et j'éditerai mon message.

    Edit: J'ai bien mon tableau qui s'affiche après le 2nd alerte, mais il ne fait pas de tri, je vais regarder du côté du contrôleur où je me suis planté.

    En ce qui concerne l'ajax, je crois que le sujet est clos. Pour ce qui est de la suite, si je rencontre un problème avec le contrôleur, je suppose que je devrai plutôt poster dans la partie PHP non?

    J'aurai juste encore une petite question par rapport à l'affichage du tableau, en fait avant lorsque j'arrivais sur la page, le tableau s'affichait dans son entièreté (donc sans tri), grâce à la fonction load_data() qui passait une première fois dans le contrôleur et le modèle, aurais-tu une idée de comment je pourrais faire pour que le tableau s'affiche par défaut comme avant?

    Je te remercie déjà de toute l'aide que tu m'as apporté

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Récupérer valeur select en javascript ajax
    Par zen'it dans le forum Général JavaScript
    Réponses: 0
    Dernier message: 20/06/2016, 09h58
  2. Réponses: 1
    Dernier message: 07/10/2013, 01h33
  3. Récupérer valeur tableau crée par vba
    Par Pago dans le forum VBA Access
    Réponses: 4
    Dernier message: 03/05/2010, 22h10
  4. Réponses: 14
    Dernier message: 18/08/2006, 18h54
  5. [Tableaux] récupérer un tableau de valeur
    Par PAYASS59 dans le forum Langage
    Réponses: 7
    Dernier message: 16/02/2006, 12h22

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo