L'Utilisation D'Ajax Pour Remplir Une Boîte De Sélection

Ok, c'est ma toute première tentative de l'Ajax et de sa conduite me fous que j'ai vraiment ne peux pas obtenir ma tête autour de lui. Ce que j'essaie de faire est de remplir la première case avec les clients de la base de données, puis utiliser le code client pour sélectionner tous les vehicleID à partir de la base de données à l'aide de la select.php script.
Ce qui se passe est de la zone est d'être sélectionné, mais lors de la sélection d'un client ne se passe rien.

C'est mon Test.php fichier :

<?php include 'connectmysqli.php'; ?>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Select test</title>
<script src="./js/jquery/jquery.js"></script>
<script type="text/javascript" charset="utf-8">
$$('#customer')
.on('change', function () {
$.getJSON('select.php', { customerId: $(this)
.val() }, function (data) {
var options = '';
for (var x = 0; x < data.length; x++) {
options += '<option value="' + data[x][
'id'] + '">' + data[x]['reg'] +
'</option>';
}
$('#vehicle')
.html(options);
});
});
</script>
</head>
<body>
<select id="customer">
<?php
$sql = <<<SQL
SELECT *
FROM `customers`
SQL;
if(!$result = $db->query($sql)){ die('There was an error running the query [' . $db->error . ']');}
while($row = $result->fetch_assoc()){
if ($row['bussinessname'] == ''){$name = $row['title'].' '.$name = $row['firstname'].' '.$name = $row['surname'];}else
{$name = $row['bussinessname'];}
echo '<option value="'.$row['customerID'].'">'.$name.'</option>';
}
echo '</select></p>'; ?>
</select>
<select id="vehicle">
</select>
</body>
</html>

C'est mon select.php fichier :

<?php include 'connectmysqli.php'; ?>
<?php
$id = $_GET['customerId'];
$sql = 'SELECT * FROM vehicles WHERE customerID = ' . $id;
$result = $db->query($sql);
$json = array();
while ($row = $result->fetch_assoc()) {
$json[] = array(
'id' => $row['vehicleID'],
'reg' => $row['reg'] //Don't you want the name?
);
}
echo json_encode($json);
?>

Je tente de mod ce tutoriel pour travailler avec les bases de données, mais jusqu'à présent, je suis à l'échec.
http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/

Dans le Chrome de la console j'obtiens l'erreur :

Port error: Could not establish connection. Receiving end does not exist.     miscellaneous_bindings:235
chromeHidden.Port.dispatchOnDisconnect

essayez $(document).on('change', "select#customer", function(){});
pourquoi serait-ce, ?
pouvez-vous vérifier dans la console pour voir si il y a une connexion à établir lorsque l'élément est sélectionné
J'ai bien reçu votre select#customer était dynamicly ajouté. Cela aurait fixe le bogue. Mais ce n'est pas le cas. Avez-vous une erreur dans la console ?
Peut-être que votre json syntaxe est incorrecte. Essayez d'ajouter vos données dans un tableau et ensuite faire echo json_encode($data); exit();

OriginalL'auteur Iain Simpson | 2013-06-28

19

À vos clients de sélectionner l'événement change est donné avant que la sélection est affiché dans la page. Déplacer le gestionnaire d'événement dans le document.prêt:
```
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('#customer').on('change', function (){
$.getJSON('select.php', {customerId: $(this).val()}, function(data){
var options = '';
for (var x = 0; x < data.length; x++) {
options += '<option value="' + data[x]['id'] + '">' + data[x]['reg'] + '</option>';
}
$('#vehicle').html(options);
});
});
});
</script>
```
J'ai aussi changé $$('#customer') à $('#customer'). Enfin, fixez votre vulnérabilité d'injection SQL:
```
$sql = 'SELECT * FROM vehicles WHERE customerID = ' . (int)$id;
```
Le Casting de l'ID int permettra d'éviter SQLi ici, mais vous devriez envisager d'utiliser un Déclaration Préparée À L'Avance.

L'erreur que vous avez mentionné dans la question semble sans rapport avec votre code. Il semble lié à une extension Chrome.

Pas partie du problème, mais ici est une version améliorée de votre code qui construit les options du véhicule:
```
$.getJSON('select.php', {customerId: $(this).val()}, function(data){
var vehicle = $('#vehicle');
for (var x = 0; x < data.length; x++) {
vehicle.append(new Option(data[x].reg, data[x].id));
}
});
```
Les améliorations sont:
- Le stockage de la sélectionner dans une variable, de sorte que nous n'avons pas à garder l'interrogation du DOM à chaque itération de la boucle
- À l'aide de new Option(...) et .append() pour créer les options et les ajouter au véhicule choisir. Les éléments de construction comme c'est mieux que de créer du HTML brut, parce que de cette façon, vous n'avez pas à vous soucier des caractères tels que < et > dans la base de données qui permettrait de casser votre code HTML avec le code actuel.
- Vos données sont décodés dans un tableau d'objets Javascript, l'objet de la notation est préféré (data[x].id) au lieu de data[x]['id'].
Vous êtes une légende !, merci pour ça, j'ai été demander ce que l'enfer qui se passait avec ce TOUS les week-end et ne pouvait pas s'en sortir !. MERCI !.
pas de problème 🙂 voir mon edit - ajout de quelques améliorations.

OriginalL'auteur MrCode

Semble que si vous créez un tableau d'objets JSON sur chaque itteration dans select.php.

Ci-dessous le tableau est généré en PHP et ensuite encodé en JSON, qui, à mon option est la meilleure façon de
générer des chaînes JSON.

//select.php
$id = $_GET['customerId'];
$sql = 'SELECT * FROM vehicles WHERE customerID = ' . $id;
$result = $db->query($sql);
$json = array();
while ($row = $result->fetch_assoc()) {
$json[] = array(
'id' => $row['vehicleId'],
'name' => $row['vehicleId'] //Don't you want the name?
);
}
echo json_encode($json);
//Test.php
$('#customer').on('change', function (){
$.getJSON('select.php', {customerId: $(this).val()}, function(data){
var options = '';
for (var x = 0; x < data.length; x++) {
options += '<option value="' + data[x]['id'] + '">' + data[x]['name'] + '</option>';
}
$('#vehicle').html(options);
});
});

Qui est vulnérable à l'injection SQL méfiez-vous
Merci. J'étais tout simplement, par souci de simplicité, en essayant de répondre à l'op de la question. Cependant, c'est un argument valable.
Iv édité ma question avec le nouveau code, mais sa ne fonctionne toujours pas ?.
Avez-vous changé de Test.php?
Oui, j'ai mis à jour eux comme ils sont au-dessus ^^, j'ai édité ma question avec le nouveau code

OriginalL'auteur AlexP

2

Peut-être essayer live au lieu de on. C'est déconseillé mais j'ai trouvé est plus susceptible de travailler lorsque l'élément n'est pas chargé.

$$('#client").on('change', function (){

changé à

$('#client").live('change', function (){

OriginalL'auteur rebe100x

Vous devez vous connecter pour publier un commentaire.