Récupérer valeurs tableau codeigniter et ajax

**frederic1140** · 01/09/2019, 08h13

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

**ma5t3r** · 01/09/2019, 11h14

Salut,

Avec un seul input 'search_text', le tableau se met bien à jour

Montre ton code JS

**frederic1140** · 01/09/2019, 12h33

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 😉

**ma5t3r** · 01/09/2019, 13h05

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

**frederic1140** · 01/09/2019, 13h49

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 ?

**ma5t3r** · 01/09/2019, 16h25

:-)
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');

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

jQuery

Vue hybride

Discussions similaires

Partager

Partager