Récupérer valeurs tableau codeigniter et ajax

Version imprimable

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:

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:

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:

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

01/09/2019, 11h14
ma5t3r

Salut,

Citation:

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

Montre ton code JS

Bonjour,

Voici le code en question

Code:

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 😉

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:

<form id="myForm" action="<?= base_url("controller/methode")?> method="post">

Tu peux récupérer l'URL de la méthode via

Code:

var url = $('#myForm').attr('action');

Et voici le code JS

Code:

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

01/09/2019, 13h49
frederic1140

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 ?

:-)
Tu récupères les données comme d'hab
Code:

1 2 3 $myData1 = $this->input->post('myData1'); $myData2 = $this->input->post('myData2');

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:

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:

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:

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:

var url = $('#recherche_ajax').attr('action');

juste pour être bien sûr, le "action" fait référence au action du formulaire directement?

Bonjour à tous,

J'avance petit à petit (du moins j'espère :aie:), 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:

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

Code:

query:diesel

ce qui n'était pas correct, vu que ça aurait dû être

Code:

carburant:diesel

, j'ai donc changé suite à pas mal de recherche le "data"
Code:

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?

02/09/2019, 10h16
ma5t3r

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 ?
02/09/2019, 10h32
frederic1140

Citation:

Envoyé par ma5t3r

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

Citation:

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.

Citation:

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)
02/09/2019, 11h14
ma5t3r
Tu mets les variables entre guillemets
Code:

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.
02/09/2019, 11h35
frederic1140
Citation:
Envoyé par ma5t3r

Tu mets les variables entre guillemets

Code:

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 :oops::oops:
Pas eu beaucoup d'heures de sommeil :oops:

Citation:

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
02/09/2019, 11h59
ma5t3r

Petite rectification
Il vaut mieux prévoir un bouton recherche plutôt que lancer une recherche sur l'événement onchange de chaque SELECT

Me revoici, je viens de le serializer, et ça marche tout de suite mieux pour obtenir mes valeurs
Code:

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:

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:

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?

Citation:

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:

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

J'arrive bien dans la fonction jusqu'à l'alerte 'Test', et j'obtiens bien une réponse avec le code suivant
Code:

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

Code:

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

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é :zoubi::zoubi: