8710 sujets

Développement web côté serveur, CMS

Mon problème c'est l’affichage de sous catégorie selon le catégorie
une liste déroulante avec des option que je vais chercher dans ma bdd
lorsque je sélectionne un choix dans cette liste, :


J'ai deux tables

CREATE TABLE IF NOT EXISTS `categories` (
`id` int(11) NOT NULL auto_increment,
`Nom` varchar(255) NOT NULL,
`Menu` varchar(255) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1;

CREATE TABLE IF NOT EXISTS ` listes` (
`ids` int(11) NOT NULL auto_increment,
`Nom` varchar(255) NOT NULL,
`id` int(11) NOT NULL
PRIMARY KEY (`ids`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1;


<form name="from1" enctype="multipart/form-data" method="post" action="" id="from1">
<table width="850" border="0" cellspacing="2" cellpadding="2">
<tr>
<td bgcolor="#CCEEFF" valign="top"><div align="right">Catégorie : </div></td>
<td bgcolor="#F0FAFF"><div align="left">
<select name="CAT">


<?php
$sqlcat = mysql_query("select * from categories ORDER BY id");
while($voircat = mysql_fetch_array($sqlcat))
{
echo '<option value="'.$voircat['id'].'">'.$voircat['nom'].'</option>';
}
?>
</select>
</div></td>
</tr>



<tr>
<td bgcolor="#CCEEFF" valign="top"><div align="right">Sous Catégorie : </div></td>
<td bgcolor="#F0FAFF"><div align="left">
<select name="LISTE">

<?php

$sqlcat = mysql_query("select * from categories cat , listes lis where cat.id = lis.ids and lis.id ");
while($voircat = mysql_fetch_array($sqlcat))
{
echo '<option value="'.$voircat['id'].'">'.$voircat['nom'].'</option>';
}
?>
</select>
</div></td>
</tr>
Modifié par Progsou (02 Feb 2014 - 04:16)
Salut

Je t'explique le principe après à toi de faire le code par toi même et si t'es bloqué fais signe Smiley cligne

Le but est de faire une première requête PHP (avec mysqli ou PDO mais PAS mysql) qui va afficher toutes les catégories principales dans ton premier select.

Dans un fichier javascript avec l'aide de jQuery tu surveille l'évenement onChange sur ta liste déroulante, tu récupère l'id de l'option sélectionnée par exemple pour cette ligne

<option value="1">Cat1</option>  


tu récupère le 1 de value.

Ensuite tu fais une requête ajax qui va appeler un fichier php qui lui récupérera, grâce à une requête SQL, toutes les sous catégories en fonction de la valeur que tu as récupéré précédemment.

Dans la fonction .done de l'évenement ajax tu aura plus qu'a remplir ta seconde liste déroulante avec les résultats que tu aura obtenu à l'aide de l'ajax.

Bon courage Smiley smile
Modifié par John Wayne (02 Feb 2014 - 13:59)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Panneau d'Administration </title>
<link rel="stylesheet" href="css/colorpicker.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/colorpicker.js"></script>
<script type="text/javascript" src="js/eye.js"></script>
<script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript" src="js/layout.js?ver=1.0.2"></script>
<?php
include 'includes/Scripts.php';
?>
<!--
function request(oSelect) {
var value = oSelect.options[oSelect.selectedIndex].value;
var xhr = getXMLHttpRequest();

xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
readData(xhr.responseXML);
document.getElementById("loader").style.display = "none";
} else if (xhr.readyState < 4) {
document.getElementById("loader").style.display = "inline";
}
};

xhr.open("POST", "XMLHttpRequest_getListData.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("IdEditor=" + value);
}

function readData(oData) {
var nodes = oData.getElementsByTagName("item");
var oSelect = document.getElementById("softwaresSelect");
var oOption, oInner;

oSelect.innerHTML = "";
for (var i=0, c=nodes.length; i<c; i++) {
oOption = document.createElement("option");
oInner = document.createTextNode(nodes.getAttribute("name"));
oOption.value = nodes[i].getAttribute("id");

oOption.appendChild(oInner);
oSelect.appendChild(oOption);
}
}
//-->
</script>

</head>

<body>

<form name="from1" enctype="multipart/form-data" method="post" action="" id="from1">


<table width="850" border="0" cellspacing="2" cellpadding="2">
<tr>
<td bgcolor="#CCEEFF" valign="top"><div align="right">Catégorie : </div></td>
<td bgcolor="#F0FAFF"><div align="left">
<select name="CAT" id="editorsSelect" Onchange="request(this);">


<?php

$sqlcat = mysql_query("select * from categories ORDER BY id");

while($voircat = mysql_fetch_array($sqlcat))
{
echo '<option value="'.$voircat['id'].'">'.$voircat['nom'].'</option>';
}
?>
</select>
</div></td>
</tr>

<tr>
<td bgcolor="#CCEEFF" valign="top"><div align="right">Sous Catégorie : </div></td>
<td bgcolor="#F0FAFF"><div align="left">
<select name="LISTE" id="editorsSelect" Onchange="request(this);">

<?php

$sqlcat = mysql_query("select * from categories cat , listes lis where cat.id = lis.ids and lis.id ");
while($voircat = mysql_fetch_array($sqlcat))
{
echo '<option value="none">'.$voircat['nom'].'</option>';
}
?>
</select>
</div></td>
</tr>

<tr>
<td bgcolor="#CCEEFF" valign="top"><div align="right">Liste Sous Catégorie : </div></td>
<td bgcolor="#F0FAFF"><div align="left">
<select name="LISTES">

<?php

$sqlcat = mysql_query("select * from cat_liste ");
while($voircat = mysql_fetch_array($sqlcat))
{
echo '<option value="'.$voircat['id'].'">'.$voircat['nom'].'</option>';
}
?>
</select>
</div></td>
</tr>

</table>
</form>

</body>

[/i]
Modifié par Progsou (02 Feb 2014 - 17:35)
CREATE TABLE IF NOT EXISTS `categories` (
`id` int(11) NOT NULL auto_increment,
`Nom` varchar(255) NOT NULL,
`Menu` varchar(255) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1;

CREATE TABLE IF NOT EXISTS ` listes` (
`ids` int(11) NOT NULL auto_increment,
`Nom` varchar(255) NOT NULL,
`id` int(11) NOT NULL
PRIMARY KEY (`ids`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1;



<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head>
<!--
function request(oSelect) {
var value = oSelect.options[oSelect.selectedIndex].value;
var xhr = getXMLHttpRequest();

xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
readData(xhr.responseXML);
document.getElementById("ajax-loader-m").style.display = "none";
} else if (xhr.readyState < 4) {
document.getElementById("ajax-loader").style.display = "inline";
}
};

xhr.open("POST", "gestion.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("ids=" + value);
}

function readData(oData) {
var nodes = oData.getElementsByTagName("inline");
var oSelect = document.getElementById("softwaresSelect");
var oOption, oInner;

oSelect.innerHTML = "";
for (var i=0, c=nodes.length; i<c; i++) {
oOption = document.createElement("option");
oInner = document.createTextNode(nodes.getAttribute("none"));
oOption.value = nodes[i].getAttribute("id");

oOption.appendChild(oInner);
oSelect.appendChild(oOption);
}
}
//-->
</script>
</head>


<body>

<form name="from1" enctype="multipart/form-data" method="post" action="" id="from1">
<table width="850" border="0" cellspacing="2" cellpadding="2">
<tr>
<td bgcolor="#CCEEFF" valign="top">


<div align="right">Catégorie : </div></td>
<td bgcolor="#F0FAFF"><div align="left">
<select value = "none" name="CAT" id="editorsSelect" Onchange="request(this);">




<?php


$sqlcat = mysql_query("select * from categories ORDER BY id");

while ($voircat = mysql_fetch_assoc($sqlcat))

{

echo '<option value="'.$voircat['id'].'">'.$voircat['nom'].'</option>';
}
?>
</select>
</div></td>
</tr>

<tr>
<td bgcolor="#CCEEFF" valign="top"><div align="right">Sous Catégorie : </div></td>
<td bgcolor="#F0FAFF"><div align="left">
<select value = "none" name="LISTE" id="editorsSelect" Onchange="request(this);">

<?php

$ids = (isset($_POST["ids"])) ? htmlentities($_POST["ids"]) : NULL;


if ($ids) {
$sqlcat = mysql_query("select * from listes where WHERE ids=". mysql_real_escape_string($ids). " ORDER BY ids ");



while ($voircat = mysql_fetch_assoc($sqlcat)) {

echo '<option value="'.$voircat['id'].'">'.$voircat['nom'].'</option>';
}


}
?>



</select>





</div></td>
</tr>

</table>
</form>
</body>
</html>
[/i]
Modifié par Progsou (04 Feb 2014 - 00:20)
Bonsoir,

Stp utilise les balises du forum pour colorer ton code. Ainsi c'est très difficile à le lire.

Ensuite peut tu nous dire ce que tu as réussi à faire suite au post de John Wayne et ce qui ne fonctionne pas.
Bonjour

Progsou stp poste le code que tu as fais sur ce sujet et ne me l'envoi pas en MP de plus détail un minimum ce que tu arrives à faire ou non parce que là tu me donne juste le code ça fait un peut tiens j'te file ça et démerde toi Smiley lol
fichier cat.js



function getxhr() {

var xhr = null;
if ( window.XMLHttpRequest)

xhr = new XMLHttpRequest();

else if ( window.AvtiveObject){
try { xhr = new AvtiveObject("Microsoft.XMLHTTP"); }}

else {


alert ("Le navig ne supporte pas les object XMLHTTPRequest.......");
xhr = false;
return xhr;


}

function chargerCat(){

var xhr = getxhr();

xhr.open("GET","gestion.php",false);
xhr.send(null);
var rep = xhr.responseText;
document.getElementById("divCat").innerHTML=rep;


}


function chargeridCat(id){

var xhr = getxhr();

xhr.open("GET","gestion.php?LISTE="+id,false);
xhr.send(null);
var rep = xhr.responseText;
document.getElementById("divcats").innerHTML=rep;


}

-------------------------


fichier gestion.php

<html>
<head>

<script type="text/javascript" src="js/cat.js">


</script>
</head>
<body onload = "chargerCat()" >
<form name="from1" enctype="multipart/form-data" method="post" action="" id="from1">
<table width="850" border="0" cellspacing="2" cellpadding="2">
<tr>
<td bgcolor="#CCEEFF" valign="top">


<div align="right" id = "divCat">Catégorie : </div></td>
<td bgcolor="#F0FAFF"><div align="left">
<select name="CAT" Onchange="chargerCat(this.value)">



<?php


$sqlcat = mysql_query("select * from categories ORDER BY id");

while ($voircat = mysql_fetch_assoc($sqlcat))

{

echo '<option value="'.$voircat['id'].'">'.$voircat['nom'].'</option>';
}
?>
</select>


</div></td>
</tr>

<tr>
<td bgcolor="#CCEEFF" valign="top"><div align="right" id="divcats">Sous Catégorie : </div></td>
<td bgcolor="#F0FAFF">


<div align="left">



<select name="LISTE" Onchange="chargeridCat(this.value)" >



<?php



if ((isset($_POST["id"]))) {
$LISTE = $_POST["id"];

}else{

$LISTE = 1;

}

$sqlcat = mysql_query("select * from listes ORDER BY ids ");



while ($voircat = mysql_fetch_assoc($sqlcat)) {


echo '<option value="'.$voircat['id'].'">'.$voircat['nom'].'</option>';



}



?>



</select>




</div></td>
</tr>

</table>
</body>
</html>