11521 sujets

JavaScript, DOM et API Web HTML5

Recharger affichage XSL/XML avec Javascript

Bonjour,

j'utilise un page web avec un javascript pour afficher un fichier XML via XSL

ci dessous les script et codes HTML:


    function loadXMLDoc(dname)
    {
      if (window.XMLHttpRequest)
      {
        xhttp=new XMLHttpRequest();
      }
      else
      {
        xhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
      xhttp.open("GET",dname,false);
      xhttp.send("");
      return xhttp.responseXML;
    }

    function displayResult(sigle,valeur)
    {
      xmlfile="test.xml";
      xslfile="srfil.xsl";
      xml=loadXMLDoc(xmlfile);
      xsl=loadXMLDoc(xslfile);

      // code for Mozilla, Firefox, Opera, etc.
      else if (document.implementation && document.implementation.createDocument)
      {
        xsltProcessor=new XSLTProcessor();
        xsltProcessor.importStylesheet(xsl);

        if ( sigle != "" && valeur != "")
        {
            xsltProcessor.setParameter(null, "filtresigle", sigle);
            xsltProcessor.setParameter(null, "filtrevalue", valeur);
            xsltProcessor.setParameter(null, "gofiltre", 1);
        }
        else
        {
            xsltProcessor.setParameter(null, "gofiltre", 0);
        }
            
        resultDocument = xsltProcessor.transformToFragment(xml,document);
        document.getElementById("content").appendChild(resultDocument);
      }
    }
    
    function valider()
    {
      // si la valeur des champ est non vide
      if(document.filtre.sigle.value != "" && document.filtre.valeur.value != "")
      {
        // les données sont ok, on peut envoyer le formulaire
        displayResult(document.filtre.sigle.value,document.filtre.valeur.value);
      }
      else
      {
        // sinon on affiche un message
        alert("Saisissez les données");
        // et on indique de ne pas envoyer le formulaire
        return false;
      }
    }


et le code HTML


<body onload="displayResult()">
  <div id="header">
    <h1><a href='http://srfil.maxk.fr'>Décodage SRFIL</a></h1>
    <h2>Test.log</h2>
  </div>
  <div id="filtre">
    <h3>Filtre</h3>

    <form name="filtre" action="" onsubmit="return valider()" method="get">
      <p>
        <label for="sigle">Sigle :</label>
        <input type="text" name="sigle" value="" />
        <label for="valeur">Valeur :</label>
        <input type="text" name="valeur" value="" />
        <input type="submit" value="Ok" />
      </p>
    </form>

  </div>
  <div id="content" />
</body>


Au chargement initial de la page, le fichier XML est correctement affiché via l'appel au script "DisplayResult".
On n'y passe pas de paramètres (ceux-ci servent à ajouter des filtres pour l'affichages des données XML)

Le formulaire sert pour l'utilisateur pour qu'il puisse filtre l'affichage des données XML
les valeurs sont correctement récupérée par le script "valider".

Par contre la commande "displayResult(document.filtre.sigle.value,document.filtre.valeur.value);" ne semble pas être correctement appelée car dès la validation du formulaire, rien ne se produit...
Modifié par mamax (03 Dec 2010 - 10:57)
J'ai un peu avancé, mais j'ai toujours un souci.

j'ai ajouté:

document.getElementById("content").innerHTML='';


Au début de la fonction "displayResult",

cela fonction, j'ai bien mon refresh avec les données issue du formulaire, mais quelques instant plus tard, j'ai un refresh complet de la page sans les données du formulaire.
Salut,

Tu laisses apparemment le formulaire se valider (donc la page se recharger). Ton return false devrait aussi être présent lorsque ton rechargement de XML sans rechargement de page est un succès.
Précisions

Pour que la méthode fonctionne sut tous les navigateurs, il faut que les fichiers soient sur un un serveur !

Fonctionne hors serveur pour IE, FF et Safari.
Modifié par rimousky (10 May 2011 - 18:21)
Depuis les posts le script a bien changé et fonctionne nickel.
Je suis aussi passé en chargement asynchrone car les fichier XML chargé peu être relativement lourd.


voici le script complet tel qu'il est maintenant pour le chargement du fichier xml si cela peu servir à quelqu'un étant donné sa relative généricité.


function getXMLHttp()
{
	var xmlHttp
	try
	{
		//Firefox, Opera 8.0+, Safari
		xmlHttp = new XMLHttpRequest();
	}
	catch(e)
	{
		//Internet Explorer
		try
		{
			xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
		}
		catch(e)
		{
			try
			{
				xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch(e)
			{
				alert("Votre navigateur ne permet pas d'utiliser cet outil")
				return false;
			}
		}
	}
	return xmlHttp;
}

// **************************************************************
// Fonction d'affichage du fichier XML/XSLT résultant du décodage

function displayResult(file)
{
	document.getElementById("content").innerHTML='';
	wait = '<div class="wait">';
	wait += '<p class="waitimg"><img src="image/roue.gif" alt="wait" /></p>';
	wait += '</div>';
	document.getElementById("content").innerHTML=wait;

	xmlfile=file;
	xslfile="srfil.xsl";

	// Code pour Internet Explorer
	if (window.ActiveXObject)
	{
		var xslDoc;
		var xmlDoc;
		var xlt;
		var xslProc;
		
		// Chargement de la feuille XSLT
		xslDoc = new ActiveXObject("Msxml2.FreeThreadedDOMDocument.6.0");
		xslDoc.async = false;
		xslDoc.load(xslfile);

		//Chargement du document XML
		xmlDoc = new ActiveXObject("Msxml2.DOMDocument.6.0");
		xmlDoc.async = true;
		xmlDoc.onreadystatechange = function ()
		{
			if (xmlDoc.readyState == 4)
			{
				xslProc.transform();
				//Affichage du résultat
				document.getElementById("content").innerHTML='';
				document.getElementById("content").innerHTML=xslProc.output;
			}
		}

		//Transformation
		xslt = new ActiveXObject("Msxml2.XSLTemplate.6.0");
		xslt.stylesheet = xslDoc;
		xslProc = xslt.createProcessor();
		xslProc.input = xmlDoc;
		
		// chargement du fichier XML en asynchrone
		xmlDoc.load(xmlfile);
	}

	// Code pour les autres navigateurs supportant XSLTProcessor()
	else
	{
		var xslhttp = getXMLHttp();
		var xmlhttp = getXMLHttp();
		var xsl;
		var xml;

		xslhttp.onreadystatechange = function()
		{
			if(xslhttp.readyState == 4 && xslhttp.status == 200)
			{
				// On récupère le contenu du fichier xsl
				xsl = xslhttp.responseXML;
				xmlhttp.onreadystatechange = function()
				{
					if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
					{
						// Traitement de l'affichage
						// *************************

						// On récupère le contenu du fichier xml
						xml = xmlhttp.responseXML;
						xsltProcessor=new XSLTProcessor();
						xsltProcessor.importStylesheet(xsl);
						// Rendu de l'affichage
						resultDocument = xsltProcessor.transformToFragment(xml,document);
						// Affichage dans la page web
						document.getElementById("content").innerHTML='';
						document.getElementById("content").appendChild(resultDocument);
						// ********************************
						// Fin de traitement de l'affichage
					}
				}
				xmlhttp.open("GET", xmlfile, true);
				xmlhttp.send();
			}
		}

		xslhttp.open("GET", xslfile, true);
		xslhttp.send();
	}
}


Mon script "valider()" a été modifier pour effectuer un traitement plus simple sans avoir besoin de recharger le script "displayResult()"
Modifié par mamax (11 May 2011 - 14:17)
Sujet clos
Aller à