Vous pouvez utiliser une combinaison de jQuery et AJAX pour ce faire. Beaucoup plus simple qu'il n'y paraît. Pour voir que c'est la bonne réponse pour vous, regardez cet exemple .
Dans l'exemple ci-dessous, il y a deux fichiers .PHP :test86a.php et test86b.php.
Le premier fichier, 86A, a une simple boîte de sélection (liste déroulante) et du code jQuery qui surveille le changement de cette boîte de sélection. Pour déclencher le code jQuery, vous pouvez utiliser le jQuery .blur() pour surveiller que l'utilisateur quitte le champ de date, ou vous pouvez utiliser l'API jQueryUI :
$('#date_start').datepicker({
onSelect: function(dateText, instance) {
// Split date_finish into 3 input fields
var arrSplit = dateText.split("-");
$('#date_start-y').val(arrSplit[0]);
$('#date_start-m').val(arrSplit[1]);
$('#date_start-d').val(arrSplit[2]);
// Populate date_start field (adds 14 days and plunks result in date_finish field)
var nextDayDate = $('#date_start').datepicker('getDate', '+14d');
nextDayDate.setDate(nextDayDate.getDate() + 14);
$('#date_finish').datepicker('setDate', nextDayDate);
splitDateStart($("#date_finish").val());
},
onClose: function() {
//$("#date_finish").datepicker("show");
}
});
Quoi qu'il en soit, lorsque le jQuery est déclenché, une requête AJAX est envoyée au deuxième fichier, 86B. Ce fichier recherche automatiquement des informations dans la base de données, obtient les réponses, crée du contenu HTML formaté et echo C'est de retour au premier fichier. Tout se passe via Javascript, lancé sur le navigateur - comme vous le souhaitez.
Ces deux fichiers sont un exemple indépendant et entièrement fonctionnel. Remplacez simplement les identifiants et le contenu MYSQL par vos propres noms de champs, etc. et regardez la magie opérer.
TEST86A.PHP
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
//alert('Document is ready');
$('#stSelect').change(function() {
var sel_stud = $(this).val();
//alert('You picked: ' + sel_stud);
$.ajax({
type: "POST",
url: "test86b.php", // "another_php_file.php",
data: 'theOption=' + sel_stud,
success: function(whatigot) {
//alert('Server-side response: ' + whatigot);
$('#LaDIV').html(whatigot);
$('#theButton').click(function() {
alert('You clicked the button');
});
} //END success fn
}); //END $.ajax
}); //END dropdown change event
}); //END document.ready
</script>
</head>
<body>
<select name="students" id="stSelect">
<option value="">Please Select</option>
<option value="John">John Doe</option>
<option value="Mike">Mike Williams</option>
<option value="Chris">Chris Edwards</option>
</select>
<div id="LaDIV"></div>
</body>
</html>
TEST86B.PHP
<?php
//Login to database (usually this is stored in a separate php file and included in each file where required)
$server = 'localhost'; //localhost is the usual name of the server if apache/Linux.
$login = 'abcd1234';
$pword = 'verySecret';
$dbname = 'abcd1234_mydb';
mysql_connect($server,$login,$pword) or die($connect_error); //or die(mysql_error());
mysql_select_db($dbname) or die($connect_error);
//Get value posted in by ajax
$selStudent = $_POST['theOption'];
//die('You sent: ' . $selStudent);
//Run DB query
$query = "SELECT `user_id`, `first_name`, `last_name` FROM `users` WHERE `first_name` = '$selStudent' AND `user_type` = 'staff'";
$result = mysql_query($query) or die('Fn test86.php ERROR: ' . mysql_error());
$num_rows_returned = mysql_num_rows($result);
//die('Query returned ' . $num_rows_returned . ' rows.');
//Prepare response html markup
$r = '
<h1>Found in Database:</h1>
<ul style="list-style-type:disc;">
';
//Parse mysql results and create response string. Response can be an html table, a full page, or just a few characters
if ($num_rows_returned > 0) {
while ($row = mysql_fetch_assoc($result)) {
$r = $r . '<li> ' . $row['first_name'] . ' ' . $row['last_name'] . ' -- UserID [' .$row['user_id']. ']</li>';
}
} else {
$r = '<p>No student by that name on staff</p>';
}
//Add this extra button for fun
$r = $r . '</ul><button id="theButton">Click Me</button>';
//The response echoed below will be inserted into the
echo $r;
Voici un exemple AJAX plus simple et pourtant un autre exemple à vérifier.
Dans tous les exemples, notez comment l'utilisateur fournit le contenu HTML (que ce soit en tapant quelque chose ou en sélectionnant une nouvelle valeur de date ou en choisissant une sélection déroulante). Les données fournies par l'utilisateur sont :
1) SAISIE via jQuery :var sel_stud = $('#stSelect').val();
2) puis ENVOYÉ via AJAX au deuxième script. (Le $.ajax({}) trucs)
Le deuxième script utilise les valeurs qu'il reçoit pour rechercher la réponse, puis ECHOES qui répondent au premier script :echo $r;
Le premier script REÇOIT la réponse dans la fonction de réussite AJAX, puis (toujours à l'intérieur de la fonction de réussite) INJECTE la réponse sur la page :$('#LaDIV').html(whatigot);
Veuillez tester ces exemples simples :le premier exemple lié (le plus simple) ne nécessite pas de recherche dans la base de données, il devrait donc s'exécuter sans modification.
