Forums Développement Multimédia

Aller au contenu

Non exécution du script js dans page inclue via ajax

CODE Ajax JQuery EaseJs

31 réponses à ce sujet

#1 foufounettes_1

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 59 messages

Posté 07 May 2008 - 10:01 AM

bonjour,
tout est un peu expliqué dans le titre, jai une page style_fin.php dans lequel il y a un menu flash et grace a une fonction ajax.js et notamment grâce au XMLHTTPRequest je recharge des pages dans mon style_fin.php sans recharger cette derniere.
Bref dans mes pages filles, je fais appel a des fonction js définit dans le head de style_fin.php, et ces appels de fonctions de fonctionnent pas! pourquoi?le js n'est pas effectué?

#2 foufounettes_1

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 59 messages

Posté 07 May 2008 - 10:18 AM

personne n'a une idée?

#3 Ldo

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 9921 messages

Posté 07 May 2008 - 10:48 AM

en effet js n'est pas exécuté s'il se trouve sur une page chargée avec xhr

si tu utilise un framework js généralement c'est une option à rajouter
par exemple avec prototype :
Code
new Ajax.Updater( "myDiv", "myFile.php", {evalScripts:true} );

à toi de voir la syntaxe pour ton framework (si tu en utilise un encore une fois)

#4 foufounettes_1

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 59 messages

Posté 12 May 2008 - 08:47 AM

Déja merci pour la réponse, non je n'utilise pas de framework, erf, je te poste quelque chose de plus explicité pour de l'aide:

J'ai un menu flash dans ma page principale et chaque bouton inclue des page dans une div précise de ma page principal...vous me suivez? c'est léquivalent d'un switch case include xxx.php sauf que la je ne recharge qu'une partie de page, donc je fais appel au javascript notamment avec un objet xhr, et le xmlhttprequest.

Bref dans une des pages incluses, je fais deux menu déroulants liés, et l'a j'inclue du code js entre des borne <script type="text/javascript"></script>
Sauf que la encore le code js n'est pas considéré.

SI
j'accède à la page sans passer par linclusion principal (avec le xmlhttprequest) le js de ma page incluse est pris en compte(une alert pour le test apparait)
SI
j'accède par les boutons de mon menu déroulant soit avec l'inclusion de page, le js n'est pas pris en compte, je voulais donc savoir

POURQUOI????

#5 foufounettes_1

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 59 messages

Posté 12 May 2008 - 08:56 AM

Si si par framework tu veux dire une div oui jen utilise une, mais où insérer ce code?
voila ma fonction ajax.js qui sert à inclure toute ces pages filles:

/*************************************************
Fonction de definition de l'object xhr
**************************************************/
function new_xhr(){
var xhr_object = null;
if(window.XMLHttpRequest) // Firefox et autres
xhr_object = new XMLHttpRequest();
else if(window.ActiveXObject){ // Internet Explorer
try {
xhr_object = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
}
}
else { // XMLHttpRequest non supporté par le navigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
xhr_object = false;
}
return xhr_object;
}
/*****************************************************
Fonction qui va recharger le contenu
******************************************************/
function load_page(select) {
var xhr2 = new_xhr();//On crée un nouvel objet XMLHttpRequest
xhr2.onreadystatechange = function(){
if ( xhr2.readyState == 4 ){//Actions executées une fois le chargement fini
if(xhr2.status != 200){//Message si il se preoduit une erreur
document.getElementById("corps").innerHTML ="Error code " + xhr2.status;
} else {//On met le contenu du fichier externe dans la div "content"
document.getElementById("corps").innerHTML = xhr2.responseText;
}
}
}
xhr2.open("GET", select.split('?')[1]+".php", true);//Appel du fichier externe
xhr2.send(null);
}



et le code situé dans ma page incluse:
<script type="text/javascript">
function xmlhttp()
{ var x;
try { x = new ActiveXObject("Microsoft.XMLHTTP"); }
catch (e) { try { x = new ActiveXObject("Msxml2.XMLHTTP"); }
catch (e) { try { x = new XMLHttpRequest(); }
catch (e) { x=false; }
}
}
return x;
}


function appel()
{ var xml = xmlhttp();
if(!xml)
{ alert("XmlHttpRequest non supporté"); }
else { xml.onreadystatechange = function()
{ if(xml.readyState==4)
{ var opt=xml.responseText.split("\t");
tb2.length=0;
for ( var n=1;n<opt.length;n++ )
{ tb2.length++;
tb2.options[tb2.length-1].text=opt[n];
}
}
}
alert("*"+tb1.options[tb1.selectedIndex].text+"*");
xml.open("GET", "Ajax2.php?tbl2="+tb1.options[tb1.selectedIndex].text, true);
xml.send(null);
}
}
</script>


Merci de ton aide!!!!!

#6 foufounettes_1

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 59 messages

Posté 12 May 2008 - 16:32 PM

Bon je relance ce sujet, j'aimerais savoir si il y aurait des exemples avec eval() qui pourrait m'aider car je suis bien perdue....merci bcp

#7 Ldo

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 9921 messages

Posté 13 May 2008 - 10:21 AM

heu
dans la page incluse il y a juste ces deux fonctions ?

elles sont construite dynamiquement ?
pourquoi tu ne les inclue pas dans la page mère tout simplement ?

#8 foufounettes_1

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 59 messages

Posté 13 May 2008 - 10:39 AM

C'est mieu de rester dans ce Topic, non dans ma page incluses il y a des select, du code html car je relie dynamiquement deux listes déroulantes...donc mettre me fonction directement dans la fonction mère doit pas trop marcher...

#9 foufounettes_1

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 59 messages

Posté 13 May 2008 - 10:39 AM

C'est mieu de rester dans ce Topic, non dans ma page incluses il y a des select, du code html car je relie dynamiquement deux listes déroulantes...donc mettre me fonction directement dans la fonction mère doit pas trop marcher...

#10 foufounettes_1

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 59 messages

Posté 13 May 2008 - 10:52 AM

Je te remontre le code dans ma page incluse:



<?php
// Déclaration des paramètres de connexion
$host = "xxxxxxxxxxxx";

// Généralement la machine est localhost
// c'est-a-dire la machine sur laquelle le script est hébergé

$user = "xxxxxxxxxxxxxx";

$bdd = "xxxxxxxxxx";

$passwd = "lAexnvxh";

// Connexion au serveur
$co=mysql_connect($host, $user,$passwd) or die("erreur de connexion au serveur");

$db=mysql_select_db($bdd,$co) or die("erreur de connexion a la base de donnees");


?>

<div id="partieCentrale" style="position:absolute; witdh:200px; top:305px; left:10px;">
<div id="texte2" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 18px; color: #000066;">Le Home Cin&eacute;ma Bose</div>
<br>
<div id="text" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:14px;color: #333333; ">
S&eacute;lectionnez une gamme:
<br><br>
<?php

$res=mysql_query("SELECT * from Gamme ORDER BY nom_gamme",$co);
$max=@mysql_num_rows($res);
?>
<script type="text/javascript">
function xmlhttp()
{
var x;
try { x = new ActiveXObject("Microsoft.XMLHTTP"); }
catch (e) { try { x = new ActiveXObject("Msxml2.XMLHTTP"); }
catch (e) { try { x = new XMLHttpRequest(); }
catch (e) { x=false; }
}
}
return x;
}


function appel()
{

var xml = xmlhttp();
if(!xml)
{ alert("XmlHttpRequest non supporté"); }
else { xml.onreadystatechange = function()
{ if(xml.readyState==4)
{ var opt=xml.responseText.split("\t");
tb2.length=0;
for ( var n=1;n<opt.length;n++ )
{ tb2.length++;
tb2.options[tb2.length-1].text=opt[n];
}
}
}
alert("*"+tb1.options[tb1.selectedIndex].text+"*");
xml.open("GET", "Ajax2.php?tbl2="+tb1.options[tb1.selectedIndex].text, true);
xml.send(null);
}
}
</script>

<select name="tb1" id="tb1"
onchange='appel();'>
<option>Selectionnez une gamme...</option>
<?php
for ($nb=0;$nb<$max;$nb++)
{ $i=mysql_result($res,$nb,"nom_gamme");
echo '<option>'.$i.'</option>';
}
?>

</select>
<br>
S&eacute;lectionnez un produit:
<br><br>
<select name="tb2" id="tb2">
</select>
<?php
mysql_close($co);
?>

Impossible à déplacer ces fonctions non???

#11 Ldo

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 9921 messages

Posté 13 May 2008 - 10:59 AM

la page est construite dynamiquement, mais le code javascript lui est figé
tu peut donc le mettre sans problème dans la page mère

#12 foufounettes_1

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 59 messages

Posté 13 May 2008 - 11:14 AM

Donc voila ce que j'ai fais, j'ai rajouter dans le head de ma page principale mon code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>ExcelSon</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="MSSmartTagsPreventParsing" content="TRUE" />
<meta name="description" content="Naviguer sans rechargement gràce à AJAX" />
<meta name="keywords" content="ajax, javascript, reload, navigation" />
<link rel="stylesheet" href="css3/style.css" type="text/css" media="screen"/>
<script type="text/javascript" src="temp/swfobject.js"></script>
<script type="text/javascript" src="ajax.js"></script>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
function xmlhttp()
{
var x;
try { x = new ActiveXObject("Microsoft.XMLHTTP"); }
catch (e) { try { x = new ActiveXObject("Msxml2.XMLHTTP"); }
catch (e) { try { x = new XMLHttpRequest(); }
catch (e) { x=false; }
}
}
return x;
}


function appel()
{

var xml = xmlhttp();
if(!xml)
{ alert("XmlHttpRequest non supporté"); }
else { xml.onreadystatechange = function()
{ if(xml.readyState==4)
{ var opt=xml.responseText.split("\t");
tb2.length=0;
for ( var n=1;n<opt.length;n++ )
{ tb2.length++;
tb2.options[tb2.length-1].text=opt[n];
}
}
}
alert("*"+tb1.options[tb1.selectedIndex].text+"*");
xml.open("GET", "Ajax2.php?tbl2="+tb1.options[tb1.selectedIndex].text, true);
xml.send(null);
}
}
</script>
<style type="text/css">
<!--
.Style1 {font-size: small}
a{text-decoration:none}
.img {
border : none;
border : 0;
}

-->
</style>

</head>



et jai donc enlevé ces fonctions de ma page fille, mais l'alert dans la fonction appel censé me renvoyé un nom recupéré dynamiquement alert("*"+tb1.options[tb1.selectedIndex].text+"*"); ne fonctionne pas, donc le script n'est pas interpreté, donc pbm avec mes fonctions de chargement de pages, mes fonctions situés dans ajax.js, celles ci:

// JavaScript Document
/*************************************************
Fonction de definition de l'object xhr
**************************************************/
function new_xhr(){
var xhr_object = null;
if(window.XMLHttpRequest) // Firefox et autres
xhr_object = new XMLHttpRequest();
else if(window.ActiveXObject){ // Internet Explorer
try {
xhr_object = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
}
}
else { // XMLHttpRequest non supporté par le navigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
xhr_object = false;
}
return xhr_object;
}
/*****************************************************
Fonction qui va recharger le contenu
******************************************************/
function load_page(select) {
var xhr2 = new_xhr();//On crée un nouvel objet XMLHttpRequest
xhr2.onreadystatechange = function(){
if ( xhr2.readyState == 4 ){//Actions executées une fois le chargement fini
if(xhr2.status != 200){//Message si il se preoduit une erreur
var c = document.getElementById("corps");
c.innerHTML ="Error code " + xhr2.status;
} else {//On met le contenu du fichier externe dans la div "content"
var c = document.getElementById("corps");
c.innerHTML = xhr2.responseText;
}
}
}
xhr2.open("GET", select.split('?')[1]+".php", true);//Appel du fichier externe
xhr2.send(null);
}




Qu'en penses tu???



#13 Ldo

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 9921 messages

Posté 13 May 2008 - 13:14 PM

il sort d'où ce tb1 dans ta fonction ?
c'est le nom d'un champ du formulaire ?

tu dois le récupérer avec un getElementById dans ce cas

alert("*"+document.getElementById("tb1").options[document.getElementById("tb1").selectedIndex].text+"*");


autre truc bizarre dans le code le tb2.length
length est une propriété qui retourne un nombre d'élément, ici le nombre de option du select si je comprend bien
d'un point de vue logique de prog, ça me fait bizarre d'affecter manuellement une valeur et d'outrepasser la valeur réelle de la propriété.
tellement bizarre que je me demande vraiment si cela fonctionne, faudrait que je fasse des tests

#14 foufounettes_1

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 59 messages

Posté 13 May 2008 - 13:26 PM

Alors jvais essayer de répondre à toutes tes questions:

tb1 correspond à l'id du select 1 car ma page fille est composé de deux listes deroulantes liées, voila son code:
Code:
#
<div id="banniereFlash" style="position:absolute; height: 259px; width: 742px; border-bottom: 1px solid #666666; border-right:1px solid #666666; border-left:1px solid #666666; left: -1px; top: -2px;">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="742" height="259">
<param name="movie" value="banniere_pages/banniere_HomeCinema.swf">
<param name="quality" value="high">
<embed src="banniere_pages/banniere_HomeCinema.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="742" height="259"></embed></object>
</object>
</div>

<?php
// Déclaration des paramètres de connexion
$host = "x";

// Généralement la machine est localhost
// c'est-a-dire la machine sur laquelle le script est hébergé

$user = "x";

$bdd = "x";

$passwd = "x";

// Connexion au serveur
$co=mysql_connect($host, $user,$passwd) or die("erreur de connexion au serveur");

$db=mysql_select_db($bdd,$co) or die("erreur de connexion a la base de donnees");


?>

<div id="partieCentrale" style="position:absolute; witdh:200px; top:305px; left:10px;">
<div id="texte2" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 18px; color: #000066;">Le Home Cin&eacute;ma Bose</div>
<br>
<div id="text" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:14px;color: #333333; ">
S&eacute;lectionnez une gamme:
<br><br>
<?php

$res=mysql_query("SELECT * from Gamme ORDER BY nom_gamme",$co);
$max=@mysql_num_rows($res);
?>
<script type="text/javascript">
function xmlhttp()
{
var x;
try { x = new ActiveXObject("Microsoft.XMLHTTP"); }
catch (e) { try { x = new ActiveXObject("Msxml2.XMLHTTP"); }
catch (e) { try { x = new XMLHttpRequest(); }
catch (e) { x=false; }
}
}
return x;
}


function appel()
{

var xml = xmlhttp();
if(!xml)
{ alert("XmlHttpRequest non supporté"); }
else { xml.onreadystatechange = function()
{ if(xml.readyState==4)
{ var opt=xml.responseText.split("\t");
tb2.length=0;
for ( var n=1;n<opt.length;n++ )
{ tb2.length++;
tb2.options[tb2.length-1].text=opt[n];
}
}
}
alert("*"+tb1.options[tb1.selectedIndex].text+"*");
xml.open("GET", "Ajax2.php?tbl2="+tb1.options[tb1.selectedIndex].text, true);
xml.send(null);
}
}
</script>

<select name="tb1" id="tb1"

onchange='appel();'>
<option>Selectionnez une gamme...</option>
<?php
for ($nb=0;$nb<$max;$nb++)
{ $i=mysql_result($res,$nb,"nom_gamme");
echo '<option>'.$i.'</option>';
}
?>

</select>
<br>
S&eacute;lectionnez un produit:
<br><br>
<select name="tb2" id="tb2">
</select>
<?php
mysql_close($co);
?>
</div>
</div><!-- fin partie centrale-->

#

Donc le nom et l'ID sont identiques, donc pas besoin d'utiliser getElementById()

le tb2 a une propriété length je vois sa comme si il y a un produit en produit, il y a une ligne en plus dans le select, comme dans un tableau je dirais, mais si c'est sa qui coince explique moi davantage car je ne comprends pas bien

Sinon il y a la fonction située dans ajax2.php et qui gère le remplissage de select tb2:

code :
#<?php
header('Content-type:text/html;charset=ISO-8859-1');
// Déclaration des paramètres de connexion
$host = "passepo2_uqiq";

// Généralement la machine est localhost
// c'est-a-dire la machine sur laquelle le script est hébergé

$user = "x";

$bdd = "x";

$passwd = "x";

// Connexion au serveur
$co=mysql_connect($host, $user,$passwd) or die("erreur de connexion au serveur");

$db=mysql_select_db($bdd,$co) or die("erreur de connexion a la base de donnees");
//debut requete

$rch="WHERE 'nom_gamme'='".$_GET["tbl2"]."'";
$res=mysql_query("SELECT * FROM Bose ".$rch,$co);
$max=@mysql_num_rows($res);
$t="";
for ($nb=0;$nb<$max;$nb++)
{ $i=mysql_result($res,$nb,"nom_produit");
$t.="\t".$i;
}
echo $t;
mysql_close($co);
?>

#

Voila j'espere avoir répondu pour que tu puisse m'expliquer si tu vois le problème... merci bcp

#15 foufounettes_1

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 59 messages

Posté 13 May 2008 - 14:14 PM

Pas d'idée Ldo?

#16 Ldo

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 9921 messages

Posté 13 May 2008 - 14:30 PM

Citation (clara1 @ May 13 2008, 02:26 PM) Voir le message
Donc le nom et l'ID sont identiques, donc pas besoin d'utiliser getElementById()


pour accéder à un nœud je pense c'est quand même "mieux" d'utiliser les méthodes getElement[ById, TagName...]
ça reste plus lisible que d'avoir une variable qui sort d'on ne sait où par magie.

Citation (clara1 @ May 13 2008, 02:26 PM) Voir le message
le tb2 a une propriété length je vois sa comme si il y a un produit en produit, il y a une ligne en plus dans le select, comme dans un tableau je dirais, mais si c'est sa qui coince explique moi davantage car je ne comprends pas bien

ce n'est pas ça qui coince, mais un exemple avec une chaine de caractère devrait te faire comprendre ce qui me "choque"

x = ('azerty').length;
x vaut 6 puisqu'il y a 6 caractères dans la chaine azerty
maintenant si je fait ('azerty').length = 0 ça n'a aucun sens. ('azerty').length vaudra toujours 6, le nombre de caractère de la chaine 'azerty' n'a toujours pas changer
même en le voulant très fort on ne transformera pas un chat en chien

ton code ne m'aurait pas choqué s'il avait été :
var compteur = 0;
for ( var n=1;n<opt.length;n++ )
{
compteur++;
tb2.options[compteur-1].text=opt[n];
}

d'ailleurs niveau logique, faire tb2.length+1 puis juste en dessous tb2.length-1 ...


sinon pour en revenir au problème, je sèche, j'arrive pas à y avoir la visibilité suffisante dans le code pour t'aider au mieux.
utilise prototype, en deux coups de cuillère à pot tu aura le résultat escompter, ton code maison sera réduit de moitié et utiliser un framework t'ouvrira plein de nouvelle porte ...

#17 foufounettes_1

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 59 messages

Posté 13 May 2008 - 14:36 PM

D'accord jvais me lancer la dedans, je peux faire des listes liées avec apparition d'image en plus?

erf, des tutos des tutos?!!!

#18 foufounettes_1

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 59 messages

Posté 13 May 2008 - 15:21 PM

Bon voila je reprends mon code initial j'utilise les librairies effect scriptaculous et prototype javascript jai créé une fonction personnel qui so'ccupe de gerer les modifications en faisant appel a des fonctions définies dans ces librairies.
Ces librairies sont donc déclaré dans le head de ma page principal de la sorte:

<script type="text/javascript" src="javascript/prototype.js"></script>
<script type="text/javascript" src="javascript/scriptaculous.js?load=effects.js"></script>

Ensuite, dans ma page inclue dans un div de la page principal via ajax j'ai ce code:
2 listes deroulantes par encore liées entre elles cela sra la deuxieme partie de mon travail
la deuxieme liste deroulant qui, selon le changement fait aparaitre l'image et le descripti du produit. C'est cette deuxieme partie que j'élabore en premier.

voila donc le code de ma page:

jai viré deux, trois truc comme une bannière flash indépendante
Citation
<?php
// Déclaration des paramètres de connexion
$host = "";

// Généralement la machine est localhost
// c'est-a-dire la machine sur laquelle le script est hébergé

$user = "";

$bdd = "";

$passwd = "";

// Connexion au serveur
$co=mysql_connect($host, $user,$passwd) or die("erreur de connexion au serveur");

$db=mysql_select_db($bdd,$co) or die("erreur de connexion a la base de donnees");


?>


<script type="text/javascript">
Function GetId(id)
{
return document.getElementById(id);
}

Function disparaitre(div){
new Effect.Fade(div, {duration:1, fps:25, from:1.0, to:0.0});
}

Function apparaitre(div){
new Effect.Appear(div, {duration:1, fps:25, from:0.0, to:1.0});
}

Function retour(nombre){
disparaitre("diapo");
setTimeout("apparaitre(\"page\");",1250);
}

Function miseajour(lien,nomprod,id_gamme,type,prix,descriptif){
Element.update("menu2","<div><img src=\""+lien+"\" alt=\"produit\"/></div><br><br><div><ul><li>"+nomprod+"</li><li>"+id_gamme+"</li><li>"+type+"</li><li>"+prix+"</li><li>"+descriptif+"</li></ul></div>");
}

Function personnel(lien,nomprod,id_gamme,type,prix,descriptif){
disparaitre("menu2");
setTimeout("miseajour("+lien+","+nomprod+","+id_gamme+","+type+","+prix+","+descriptif+")",1075);
setTimeout("apparaitre(\"menu2\");",1100);
}
</script>
S&eacute;lectionnez une gamme:
<br><br>
<?php

$res=mysql_query("SELECT * from Gamme ORDER BY nom_gamme",$co);
?>
<select name="tb1" id="tb1"
onchange=''>
<option>Selectionnez une gamme...</option>
<?php
while ($donnees = mysql_fetch_array($res) )
{
$nom=addslashes($donnees['nom_gamme']);
$id=addslashes($donnees['id_gamme']);


echo '<option>'.$nom.'</option>';
}
?>
</select>
<br>
S&eacute;lectionnez un produit:
<br><br>
<?php

$res2=mysql_query("SELECT * from Bose ORDER BY nom_produit",$co);
?>
<select name="tb2" id="tb2" onchange='personnel(\''.$lien.'\',\''.$nomprod.'\',\''.$id_gamme.'\',\''.$type.'\',\''.$prix.'\',\''.$descriptif.'\')'>
<option>Selectionnez un produit...</option>
<?php
while ($donnees = mysql_fetch_array($res2) )
{
$nomprod=addslashes($donnees['nom_produit']);
$id=addslashes($donnees['id_produit']);
$lien=addslashes($donnees['lien']);
$id_gamme=addslashes($donnees['id_gamme']);
$type=addslashes($donnees['type_produit']);
$prix=addslashes($donnees['prix']);
$descriptif=addslashes($donnees['descriptif']);
echo '<option>'.$nomprod.'</option>';
}
?>
</select>

<div id="menu2" style="position:absolute; left: 1px; top: 173px; width: 717px; height: 600px;" >


</div>


<?php
mysql_close($co);
?>


Sa ne marche pas evidemment!
Donc plusieurs questions:
comment interpréter le script js de cette page? que faut il rajouter vu que j'utilise des fonctions de la librairies prototype??
definir une taille fixe à mon menu2, est ce une erreur? est ce que sa bloque l'apparition de mon produit?
le passage des variables php/js est il correcte?

Je suis preneuse pour des tests utiles qui pourrait aider... voila merci



#19 foufounettes_1

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 59 messages

Posté 13 May 2008 - 16:29 PM

Je tenais à modifier mon post car , hé oué yen a de partout je crois presque avoir trouvé la solution à l'ancien problème, voila comment je procède(sapeu tjs servir à d'autres personnes):

dans monfichier ajax.js dans lequel j'ai ma fonction load page voila comment je men suis sortie:

Definition d'un xmlhttprequest comme dab
Code :

Citation
/*************************************************
Fonction de definition de l'object xhr
**************************************************/
function new_xhr(){
var xhr_object = null;
if(window.XMLHttpRequest) // Firefox et autres
xhr_object = new XMLHttpRequest();
else if(window.ActiveXObject){ // Internet Explorer
try {
xhr_object = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
}
}
else { // XMLHttpRequest non supporté par le navigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
xhr_object = false;
}
return xhr_object;
}





Par défaut Re : A propos de ton POST precedent
En faite je te repost vite ce ue j'ai fait au final, dans monfichier ajax.js dans lequel j'ai ma fonction load page voila comment je men suis sortie:

Definition d'un xmlhttprequest comme dab
Code :

/*************************************************
Fonction de definition de l'object xhr
**************************************************/
function new_xhr(){
var xhr_object = null;
if(window.XMLHttpRequest) // Firefox et autres
xhr_object = new XMLHttpRequest();
else if(window.ActiveXObject){ // Internet Explorer
try {
xhr_object = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
}
}
else { // XMLHttpRequest non supporté par le navigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
xhr_object = false;
}
return xhr_object;
}



Le code pour interpreter le js:

Code :

Citation
/****************************************
fonction pour interpreter js
*****************************************/

function doAjaxAction(Ele,File)
{
var myajax = new createAjaxObject();
myajax.open("POST", File, true);
myajax.onreadystatechange = function()
{
if (myajax.readyState == 4 && myajax.status == 200)
{
if ( document.getElementById(Ele) )
{
document.getElementById(Ele).innerHTML = myajax.responseText;
}
else
{
eval(myajax.responseText);
}
}
}
myajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
myajax.send(null);
}







Par défaut Re : A propos de ton POST precedent
En faite je te repost vite ce ue j'ai fait au final, dans monfichier ajax.js dans lequel j'ai ma fonction load page voila comment je men suis sortie:

Definition d'un xmlhttprequest comme dab
Code :

/*************************************************
Fonction de definition de l'object xhr
**************************************************/
function new_xhr(){
var xhr_object = null;
if(window.XMLHttpRequest) // Firefox et autres
xhr_object = new XMLHttpRequest();
else if(window.ActiveXObject){ // Internet Explorer
try {
xhr_object = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
}
}
else { // XMLHttpRequest non supporté par le navigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
xhr_object = false;
}
return xhr_object;
}



Le code pour interpreter le js:

Code :

/****************************************
fonction pour interpreter js
*****************************************/

function doAjaxAction(Ele,File)
{
var myajax = new createAjaxObject();
myajax.open("POST", File, true);
myajax.onreadystatechange = function()
{
if (myajax.readyState == 4 && myajax.status == 200)
{
if ( document.getElementById(Ele) )
{
document.getElementById(Ele).innerHTML = myajax.responseText;
}
else
{
eval(myajax.responseText);
}
}
}
myajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
myajax.send(null);
}

Seulement la il doit y avoir un problème c'est sur, comment recupéré le file? la fonction qui suit te montre mon souci lorsque japelle doAjaxAction:

code:

Citation
/*****************************************************
Fonction qui va recharger le contenu
******************************************************/
function load_page(select) {

doAjaxAction('corps','select.split('?')[1]+".php"'); // Met la ResponseText brute dans l'élément MonElement.
doAjaxAction('','select.split('?')[1]+".php"'); // Exécute mon code JS.
var xhr2 = new_xhr();//On crée un nouvel objet XMLHttpRequest
xhr2.onreadystatechange = function(){
if ( xhr2.readyState == 4 ){//Actions executées une fois le chargement fini
if(xhr2.status != 200){//Message si il se preoduit une erreur
document.getElementById("corps");
document.getElementById("corps").innerHTML ="Error code " + xhr2.status;
} else {//On met le contenu du fichier externe dans la div "content"
document.getElementById("corps");
alert("Reponse script externe:" +xhr2.responseText);
var tmp = xhr2.responseText;
document.getElementById("corps").innerHTML= tmp;
}
}
}
xhr2.open("GET", select.split('?')[1]+".php", true);//Appel du fichier externe
xhr2.send(null);
}



C'est faux sa obligatoirement!!

pour expliquer ce bout de code que j'ai recupéré du xhr2.open, il est recupéré ainsi dans lanim flash:
Code


Citation
on (press,release){
getURL ("java script:load_page('?contenu/son/home_cinema')", "_top");


Voila que mettre à la place?

#20 Ldo

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 9921 messages

Posté 13 May 2008 - 16:29 PM

-_-
avant de vouloir mettre des effets partout, contente toi de réaliser ton idée de départ simplement
une fois que tu aura compris la logique et comment fonctionne prototype, tu y rajoutera les effets

pour ce que tu souhaitais faire au départ, tu n'a besoin que de Ajax.Updater et Event.observe


à mon avis un truc du genre :
(je fait ça de tête donc pas garantit que ça marche du premier coup, mais ça te donne une base de départ)

dans la page mère
Code
&lt;script type="text/javascript">
// une fois que le document mère est chargé
document.observe('dom:loaded', function() {
// on fait un updater pour charger le document contenant le premier select
// et dans le callback onSuccess on défini un évènement change (ça revient au même que d'écrire onchange="getSelect2()" dans le document fille)
new Ajax.Updater("myDiv", "pageSelect.php", {onSuccess:function() { Event.observe("tb1", "change", getSelect2, false); } });
});  
function getSelect2(e) {
if (e.target) champSelect = e.target;
else if (e.srcElement) champSelect = e.srcElement;  var itemSelected = champSelect.options[champSelect.selectedIndex].value;
new Ajax.Updater("myDivSelect2", "pageSelect2.php?tonParametre"+itemSelected);
}
</script>

en 5 lignes de code maison c'est torché et surtout toute la partie javascript est regroupée dans le même fichier
pour le débug ou plus tard revenir sur le code c'est bien plus simple

#21 foufounettes_1

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 59 messages

Posté 13 May 2008 - 16:35 PM

Ok bon je me remet a fond dans cette idée je lache l'ancienne, c'est partie!

#22 Ldo

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 9921 messages

Posté 13 May 2008 - 16:43 PM

ha entre temps tu as trouvé une solution j'avais pas vu dsl
garde la sous le coude quand même si elle te convient

maitriser prototype n'est pas des plus aisé au début
mais après c'est vraiment un gain très appréciable ...

#23 foufounettes_1

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 59 messages

Posté 13 May 2008 - 16:48 PM

Ldo j'ai repris mon code précédent, plusieurs questions:


la tu relie mon select1 au deuxieme select ou le select au produit qui s'affichera, voila mesdeux bases de travail,
ensuite,
Le onSucess sert à relplacer le onChange de mon select1??
ensuite,
myDiv correpond a la div de la page principal ou sont injecté toutes les pages filles ou plutot à une div dans laquell il y aura mon selct2?
ensuite,
new Ajax.Updater("myDiv", "pageSelect.php", {onSuccess:function() { Event.observe("tb1", "change", getSelect2, false); } });
"pageSelect.php"----------->ma page fille intégré dés le dépar dans lauel il y a les deux select???
ensuite,
new Ajax.Updater("myDivSelect2", "pageSelect2.php?tonParametre"+itemSelected);
si j'ai bien compris je definit dans ma pageSelect.php( ie ma page fille d'origine) un div pour select 2 situé dans une autre page c'est sa?


Merci pour le code en tout cas!
je défini un div pour le select2

#24 Ldo

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 9921 messages

Posté 13 May 2008 - 17:06 PM

Citation (clara1 @ May 13 2008, 05:48 PM) Voir le message
Le onSucess sert à relplacer le onChange de mon select1??

non, onsucess est un callback, il s'exécute si le updater à réussi
c'est l'instruction dans le onsucess qui permet de définir un évènement onchange

ça c'est un des gros plus de prototype pour moi, Event.observe qui permet de s'affranchir de tous les attributs onclick, onchange onmachintruc dans la structure html.

Citation (clara1 @ May 13 2008, 05:48 PM) Voir le message
myDiv correpond a la div de la page principal ou sont injecté toutes les pages filles ou plutot à une div dans laquell il y aura mon selct2?

myDiv correspond au div ou sont injecté toutes les pages filles

Citation (clara1 @ May 13 2008, 05:48 PM) Voir le message
new Ajax.Updater("myDiv", "pageSelect.php", {onSuccess:function() { Event.observe("tb1", "change", getSelect2, false); } });
"pageSelect.php"----------->ma page fille intégré dés le dépar dans lauel il y a les deux select???

oui pageSelect.php est la première page fille, celle qui ne contient qu'un seul select et un div myDivSelect2 qui accueillera le second select

Citation (clara1 @ May 13 2008, 05:48 PM) Voir le message
new Ajax.Updater("myDivSelect2", "pageSelect2.php?tonParametre"+itemSelected);
si j'ai bien compris je definit dans ma pageSelect.php( ie ma page fille d'origine) un div pour select 2 situé dans une autre page c'est sa?
Merci pour le code en tout cas!
je défini un div pour le select2

oui c'est bien ça

#25 foufounettes_1

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 59 messages

Posté 14 May 2008 - 09:29 AM

Erf ya un petit souci, ton :
new Ajax.Updater("corps", "pageSelect.php", {onSuccess:function() { Event.observe("tb1", "change", getSelect2, false); } });


Va toujours charger la page pageSelect.php dans mon div alors que moi je gère différent chargement de page suivant la valeur récupéré par mon menu flash qui se présente de cette forme:

Citation
on (press,release){
getURL ("java script:load_page('?contenu/son/home_cinema')", "_top");
}


et cette page est recupéré par linstruction dans ma fonction load_page() de la sorte:

Citation
function load_page(select) {
....
xhr2.open("GET", select.split('?')[1]+".php", true);//Appel du fichier externe


Je vois pas du tout comment l'adapter t'aurais une idée?

OU alors,
je définie une page selct.php et une page select2.php commet template et ces pages seront utilisé pour chacune de mes pages filles chargé mais la encore certaine de mes pages n'ont pas de select...
il faudrait que j'effectue plusieurs test avant de faire le ajax.Updater, c'est à dire que je vérifie quelle page a été recupéré par le load_page non?

Comment faire???
merci bcp

#26 foufounettes_1

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 59 messages

Posté 14 May 2008 - 09:30 AM

et aussi un dernier truc à quoi correspond la fonction change??? merci

#27 foufounettes_1

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 59 messages

Posté 14 May 2008 - 10:01 AM

Ba erf sa marche pas trop, le problème c'est que le script n'est mm pas lu vu que mon script correspondant au menu flash et au load_page situé sur un fichier externe est pris en compte, jme retrouvais avec sa:
Citation
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>ExcelSon</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="MSSmartTagsPreventParsing" content="TRUE" />
<meta name="description" content="Naviguer sans rechargement gràce à AJAX" />
<meta name="keywords" content="ajax, javascript, reload, navigation" />
<link rel="stylesheet" href="css3/style.css" type="text/css" media="screen"/>
<script type="text/javascript" src="temp/swfobject.js"></script>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript" src="javascript/prototype.js"></script>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
// une fois que le document mère est chargé
document.observe('dom:loaded', function() {
// on fait un updater pour charger le document contenant le premier select
// et dans le callback onSuccess on défini un évènement change (ça revient au même que d'écrire onchange="getSelect2()" dans le document fille)
new Ajax.Updater("corps", "contenu/son/home_cinema.php", {onSuccess:function() { Event.observe("tb1", "change", getSelect2, false); } });
function getSelect2(e) {
if (e.target)
alert('on est ici');
champSelect = e.target;
else if (e.srcElement)
champSelect = e.srcElement;
var itemSelected = champSelect.options[champSelect.selectedIndex].value;
new Ajax.Updater("select2", "contenu/son/select2.php?nom_gamme"+itemSelected);
}

</script>



Ma partie home_cinema.php:

Citation
<?php

$res=mysql_query("SELECT * from Gamme ORDER BY nom_gamme",$co);
?>
<select name="tb1" id="tb1">
<option>Selectionnez une gamme...</option>
<?php
while ($donnees = mysql_fetch_array($res) )
{
$nom=addslashes($donnees['nom_gamme']);
$id=addslashes($donnees['id_gamme']);


echo '<option>'.$nom.'</option>';
}
?>
</select>
<br>


<div id="select2" style="position:absolute; left: 2px; top: 129px; ; height: 26px;" >


</div>



et ma page select2.php de la sorte...:



Citation
// Connexion au serveur
$co=mysql_connect($host, $user,$passwd) or die("erreur de connexion au serveur");

$db=mysql_select_db($bdd,$co) or die("erreur de connexion a la base de donnees");
//debut requete
?>
S&eacute;lectionnez un produit:
<br><br>
<?php
$recup="WHERE 'nom_gamme'='".$_GET["nom_gamme"]."'";
$res2=mysql_query("SELECT * from Bose ORDER BY nom_produit".$recup,$co);
$max=@mysql_num_rows($res2);
?>
<select name="tb2" id="tb2" >
<option>Selectionnez un produit...</option>
<?php
$t="";
for ($nb=0;$nb<$max;$nb++)
{ $i=mysql_result($res2,$nb,"nom_produit");
echo '<option>'.$i.'</option>';
}
?>
</select>




Donc ce que je me demande c'est faudrait pas intégré ce code dans mon load_page istué dans un document ajax.js et l'adapter???

mais aors là est ce qu'il recupérera les propriétés de l librairie prototype.js ou pas??
Je tente une adaptation du code...




#28 Ldo

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 9921 messages

Posté 14 May 2008 - 14:06 PM

dans mon code tu vire la partie document.observe('dom:loaded', function() { si elle ne te sert à rien

et dans ta fonction load_page, tu vire tout ce qui touche à XHR
d'ailleurs tu peut supprimer les fichiers, la classe XHR de Thanh ne te sert plus à rien avec prototype

function load_page(select) {
new Ajax.Updater("le div ou tous les documents sont chargés", select.split('?')[1]+".php" );
}

#29 foufounettes_1

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 59 messages

Posté 14 May 2008 - 14:39 PM

Je comprends rien, je vire quoi? toute ta fonction dom:loaded=function?? et ensuite comment j'apelle le getselect2?
ensuite ce bout de code que tu m'as filé je le place où?en dur dans le head de ma page principal avec au dessus mon load_page? jvois pas du tout comment gerer sa parce qeu la on traite le chargment de la page fille avec le select en même tps et d'une maniere bien byzarre, jvois pas du tout, faudrait que tu sois plus clair si possible..;. merci gourou.gif

#30 Ldo

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 9921 messages

Posté 14 May 2008 - 14:46 PM

tu aurais le projet en ligne sur un espace de test ?
que je puisse voir un peu mieux l'état du code
ça ira plus vite

#31 foufounettes_1

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 59 messages

Posté 14 May 2008 - 15:05 PM

Je t'ai envoyé un mess en pv, pour m'aider c'est maintenant donc répond moi please!

#32 foufounettes_1

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 59 messages

Posté 14 May 2008 - 15:08 PM

Je ne peux que te dire que c'est assez urgent donc j'aimerais si c'est faisable ou pas par ta méthode, donc répond s'il te plait



1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP