Forums Développement Multimédia

Aller au contenu

Accès fonctions déclarées dans page chargée par Ajax

CODE Ajax JQuery EaseJs

9 réponses à ce sujet

#1 yagrasdemonde

    Ceinture Marron

  • Members
  • PipPipPipPipPipPip
  • 101 messages

Posté 05 February 2008 - 21:47 PM

Bonjour à tous,

Je rencontre un problème sous IE 7 et sous Firefox cela focntionne.

Je m'explique
Sur ma page j'ai un bouton sur lequel j'exécute une requete Ajax. Le résultat m'est retourné dans un div.

Sur la page chargée j'ai un formulaire, et au clic sur un élément du formulaire je souhaite executer une fonction que je déclare dans cette même page.

Cela fonctionne sous Firefox mais non sur IE ?
Ou est le problème d'après vous?

Page 1
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
 
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>testAjax</title>
 
 
&lt;script type='text/javascript'>
 function getXMLHTTP(){
      var xhr=null;
      if(window.XMLHttpRequest) // Firefox et autres
      xhr = new XMLHttpRequest();
      else if(window.ActiveXObject){ // Internet Explorer
        try {
          xhr = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
          try {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
          } catch (e1) {
            xhr = null;
          }
        }
      }
      else { // XMLHttpRequest non supporté par le navigateur
        alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
      }
      return xhr;
    }
    
    function callUpadeScripts() {
      var _xmlHttp = getXMLHTTP();
      _xmlHttp.open("GET","requete.php");
      _xmlHttp.onreadystatechange=function() {
        if(_xmlHttp.readyState==4&&_xmlHttp.responseText) {
          
          document.getElementById('contenu').innerHTML=_xmlHttp.responseText;
          evalueScripts('contenu');
        }
      };
      // envoi de la requête
      _xmlHttp.send(null)
    }
    
    function callUpadeNoScripts() {
      var _xmlHttp = getXMLHTTP();
      _xmlHttp.open("GET","requete.php");
      _xmlHttp.onreadystatechange=function() {
        if(_xmlHttp.readyState==4&&_xmlHttp.responseText) {
          document.getElementById('contenu').innerHTML=_xmlHttp.responseText;
        }
      };
      // envoi de la requête
      _xmlHttp.send(null)
    }
 
    function evalueScripts(targetId) {
      var mesScripts = document.getElementById(targetId).getElementsByTagName("script");
      for (var i=0; i<mesScripts.length; i++) {
              window.eval(mesScripts[i].innerHTML);
      }
    }
  </script>
</head>
<body>
<div id="bouton">
Div Déclencheur
 <br />
 <label>
    <input type="button" name="appel" value="Appel Sans Interpretation JS" id="appel" onclick="callUpadeNoScripts();"/>
 </label>
 <br />
 <label>
    <input type="button" name="appel2" value="Appel Avec Interpretation JS" id="appel" onclick="callUpadeScripts();"/>
 </label>
</div>
<br />
<div id="contenu">Div Récepteur</div>
 
</body>
</html>

Page chargée par Ajax
&lt;script type='text/javascript'>
    variable =  function dateJour(valeur){
         alert(valeur);
     }
 
</script>
 
<form action="#" name="formulaire">
  <label>
    <input type="radio" name="radiobutton" value="radiobutton" onclick="variable(this.value);" /> Case Radio
  </label>
  <br />
  <label>
    <input type="checkbox" name="transport" value="voiture" id="voiture" onclick="variable(this.value);"/>Case Voiture
  </label>
</form>






#2 Matthieu!

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 4003 messages

Posté 06 February 2008 - 08:15 AM

Salut,

Pourquoi ne pas appelé la fonction aussi dans la page mère ?

#3 yagrasdemonde

    Ceinture Marron

  • Members
  • PipPipPipPipPipPip
  • 101 messages

Posté 06 February 2008 - 13:35 PM

Non car la c'est un exemple mais en réalité pour mon projet j'ai déjà beaucoup de fonctions javascript sur la page mère et celle que je souhaite accéder apres mon appel ajax sont uniquement utilisé sur cette page.

#4 solo.fr

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 6314 messages

Posté 07 February 2008 - 11:37 AM

Salut,

Comme le dis Matthieu, je serais toi, je ferais en sorte de charger toute ta librairie une fois. Si des comportements doivent être affectés aux éléments ajoutés au DOM, en ce cas, tu utiliseras la partie callback de ta requête AJAX.

Tu penseras que charger un gros JS va contre la performance, mais c'est le contraire. Tu as juste à gérer correctement le cache lié à tes fichiers JS et ils ne seront pas téléchargés à chaque fois.

++

#5 foufounettes_1

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 59 messages

Posté 12 May 2008 - 10:34 AM

Bon moi j'ai le même type de problème sauf que je n'y connait rien sur les DOM, on peut m'expliquer?
J'ai une page principal dans laquelle il y a un menu deroulant flash qui est relié a une fonction ajax.js qui s'occupe de charger des parties dans un div id="corps" de ma page principal, voici le code de ajax.js:
// 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
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);
}



J'ai ensuite ma page fille dans laquelle il y a deux menu déroulant liée donc je fais appel a du javascript et il faudrait que celuici soit interprété,pourrait savoir comment? auriez vous des liens vers des Tutos? merci

#6 t-servi.com

  • Members
  • PipPipPipPipPipPipPipPip
  • 765 messages

Posté 13 May 2008 - 07:55 AM

Salut,
Pour information : DOM = Document Object Modell.
En français : c'est une contruction abstraite qui représente les objets contenus dans la page HTML. On peut extraire des informations de ce modèle, et si on agit au niveau de ce modèle par javascript, la page est repeinte.
Meilleures salutations.
Jean Tinguely Awais.

#7 foufounettes_1

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 59 messages

Posté 13 May 2008 - 08:16 AM

Niveau DOM j'ai pas trop compris mais avec eval() sa semble plus faisable,
et tu saurais comment faire?J 'ai trouvé des liens pas mal avec eval(),
http://www.xorax.info/blog/news/159-javasc...obal-scope.html
mais de là à savoir ou mettre le code devient compliqué, et le programmeur n'a pas l'air très dispo pour répondre...
Tu t'y connais un peu?
merci

#8 foufounettes_1

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 59 messages

Posté 13 May 2008 - 09:51 AM

J'ai limpression que ces un forum un peu mort...erf allez on s'entre aide please!

#9 Ldo

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 9921 messages

Posté 13 May 2008 - 10:28 AM

c'est pas juste le forum qui est mort, mais une bonne partie la France avec les nombreux jours férié qui se sont succédés
de retour d'un long week-end on se remet dans le bain doucement, un peu d'indulgence smile.gif

pour ton pbm clara, je t'ai répondu sur l'autre sujet, tes fonctions ne semblent pas construite dynamiquement, met les tout simplement dans la page mère

#10 foufounettes_1

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 59 messages

Posté 13 May 2008 - 10:36 AM

Erf j'avais oublié ces jours fériés, jsuis trop prise par ce code qui me gave...
construises dynamiquement signifie qu'elles font appel à la base de donnée, c'est le cas dans ce cas là, voila ma situation actuelle:

le code permettant de charger mes pages dans le div de ma page principale:

// 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);
}




et le code dans ma page fille reliant deux listes deroulantes:


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

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

$user = "xxxxxxxxxxxxx";

$bdd = "xxxxxxxxx";

$passwd = "xxxxxxxxxx";

// 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);
?>


trop de code tue le code je sais, mais apres de numbreux passages dans plusieurs forum jen déduit que c'est la meilleur manière pour comprendre le pbm...
Merci!!



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

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