Je débute avec AJAX et Jquery. Je souhaite afficher une DIV après le chargement du document.
J'arrive à activer la fonction à l'aide d'une liste déroulante en utilisant "onchange()" ou dans la balise <body> avec onload().
Mais existe-t-il une autre méthode sans faire appel au onload das le <body> . Merci d'avance.
Voici mon code :
Page .js contenant le script ajax :
function showCategoryChild() {
var xhr = getXMLHttpRequest();
// On défini ce qu'on va faire quand on aura la réponse
xhr.onreadystatechange = function(){
// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
if(xhr.readyState == 4 && xhr.status == 200){
leselect = xhr.responseText;
// On se sert de innerHTML pour rajouter les options a la liste
document.getElementById('categoryChild').innerHTML = leselect;
}
}
/* On récupère les données du formulaire */
var categoryParent = $("select[name='categoryParent'] option:selected").val() ;
// Ici on va voir comment faire du post
xhr.open("GET", "inc/tableCategoryChild.php?ID="+categoryParent, true);
xhr.send(null);
}la 1ère page php contenant la liste déroulante :
<div>
<fieldset>
<legend>Catégorie principale</legend>
<select name="categoryParent" id="categoryParent" class="categoryParent" onchange="showCategoryChild()">
<option value="0" selected>Catégorie principale</option>
<option value="0" disabled>-------------------------------------</option>';
//=========================================================================================
//Server & DB connexion
//=========================================================================================
include ("../functions/connexion.php");
//=========================================================================================
//Initialize combo box when option select is null
//=========================================================================================
if(!isset($_SESSION["idCategoryParent"]))
{
$_SESSION["idCategoryParent"] == 0;
}
//=========================================================================================
//Selection of the parent categories
//=========================================================================================
$sql_01 = $db->query("SELECT id, name FROM categoryParent ORDER BY name ASC");
while($data = $sql_01->fetch(PDO::FETCH_OBJ))
{
$idCategoryParent = $data->id;
$categoryParent = stripslashes($data->name);
//category Child records
$categoryChildRecords = $db->query("SELECT COUNT(id) FROM categoryChild WHERE id_category_parent='".$idCategoryParent."'")->fetchColumn();
//echo "<p>".$categoryChildRecords."</p><br>";
echo '<option value="'.$idCategoryParent.'"'; if(isset($_SESSION["idCategoryParent"])) { if($idCategoryParent == $_SESSION["idCategoryParent"]) { echo "selected"; }} echo'>'.$categoryParent.' ('.$categoryChildRecords.')</option>';
}
echo'</select>
</fieldset>
</div>echo'
<div class="displayTable">
<form name="tables" method="post" action="delete.php?ID=category" class="dropDownList1">
<table class="ParentCategory">
<caption>CATEGORIES SECONDAIRES</caption>
<tr>
<th width="5%">ID</th>
<th width="60%">Nom</th>
<th width="10%">Position</th>
<th width="10%">Activation</th>
<th width="15%"></th>
</tr>';
if($_SESSION["idCategoryParent"] == 0)
{
$sql_03 = $db->query("SELECT id, name, position, active FROM ".$_SESSION["table"]." ORDER BY position ASC LIMIT $firstPage, $linesPerPage");
}
if($_SESSION["idCategoryParent"] != 0)
{
$sql_03 = $db->query("SELECT id, name, position, active FROM ".$_SESSION["table"]." WHERE id_category_parent='".$_SESSION["idCategoryParent"]."'
ORDER BY position ASC LIMIT $firstPage, $linesPerPage");
}
while($data = $sql_03->fetch(PDO::FETCH_OBJ))
{
$id = $data->id;
$name = stripslashes($data->name);
$position = $data->position;
$active = $data->active;
if ($active == "0")
{
$active1 = "NON";
$backgroundColor = "#B3130E";
$activationTitle = "ACTIVER";
}
if ($active == "1")
{
$active1 = "OUI";
$backgroundColor = "#07B907";
$activationTitle = "DESACTIVER";
}
echo '<tr>
<td>'.$id.'</td>
<td>'.$name.'</td>
<td>'.$position.'</td>
<td>
<div class="activationButton" style="background-color:'.$backgroundColor.';" title="'.$activationTitle.'">
<a href="inc/activation.php?ID='.$id.'&ID1='.$active.'" class="activation">'.$active1.'</a>
</div>
</td>
<td>
<select name="categoryParent" class="dropDownList1" onChange="location = this.options[this.selectedIndex].value;">
<option value="'.$_SESSION["urlTable"].'">Sélectionner</option>
<option value="home.php?ID=2U&ID1='.$_SESSION["table"].'&IDu='.$id.'">Modifier</option>
<option value="inc/delete.php?ID='.$id.'">Supprimer</option>
</select>
</td>
</tr>';
}
echo'</table>
</div>';