11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

Petite problème que je traine depuis quelques année ...

Voilà le bins, j'ai créée un script JS qui permet lors d'un clic de rafraichir plusieurs DIV en même temps, c'est un fonction php qui génère le lien.

Un exemple sera plus concret : http://202.171.65.33/120/demo_xhr/

Le principe :

La classe Php génère ce type de lien :

PHP


Pour créer le lien : 
  $url_xhr[] = "LIEN|div_destination";
  $url_xhr[] = "LIEN2|div_destination2";
  $url_xhr[] = "... |...";
  echo $demo->multiple_xhr($url_xhr,"DEMO1");


Lien en JS :


<a href="javascript:loadMulti('LIEN|div_destination;LIEN2|div_destination2')">DEMO1</a>


Après au niveau JS, une première fonction qui parse les liens pour les envoyer vers :


function fcn(url, divDest)
{
    var xhri = xhrRequest('html');
    xhr[xhri].open('GET', url, true);
    xhr[xhri].onreadystatechange = function()
    {
        if (xhr[xhri].readyState == 4 && xhr[xhri].status == 200)
        {
            document.getElementById("message").className = "tumevoispas";
            var content = document.getElementById(divDest);
            content.innerHTML = xhr[xhri].responseText;
            xi[xhri] = 1;
            xhr[xhri] = null;
        }
    } ;
    xhr[xhri].send(null);

}


Jusque là tout va bien, aucun problème (testé sur un bon nombre de site applicatif.

Problème :

Lorsqu'il ouvre le lien dans le div, je voudrais pouvoir y exécuter du code javascript pour rafraichir un autre div par exemple, mais cela ne fonctionne pas.

Je pense que cela ne fonctionne pas, car il ouvre le lien en asynchrone et du coup c'est en arrière plan.

Auriez-vous une idée ?

Exemple du problème pour être plus précis :


<a href="javascript:loadMulti('page.php|div_status')">LIEN</a>

Le contenu de page.php est un simple alerte en javascript.

Mais si je clic sur le lien il ne se passera rien, par contre si je fais un lien qui affiche de l'html aucun problème, je peux y re insérer des autres lien car c'est affiché en mode synchrone dans la navigateur du client (c'est lui qui demande la nouvelle action sur la nouvelle page généré en html via son navigateur).

De même les attributs <rel> pour utiliser les galeries photo avec jquery lightbox (par exemple) ne fonctionne pas.

Voici un site qui utilise à 100% cette méthode :

http://www.asdetrefle.nc/adtmedia/

J'ai développé cette fonction en 2008.

Connaissez-vous un moyen de faire autrement ?


Le truc pratique avec cette fonction, c'est que les liens sont générées directement via PHP, on ne touche jamais au javascript.


Merci pour votre aide, soyez critique, je demande qu'a rendre les choses au plus best practice (désolé pour le niveau d’accessibilité c'est moyen).

Bonne journée
Modifié par caledonien (29 Jul 2011 - 16:56)
lol trop fort, en cherchant des info sur jquery, j'ai trouvé la solution Smiley smile (enfin c'est à tester)

Demo sous IE uniquement (car j'ai un pb de double chargement des libs jquery entre ie & ff, sur la galerie photo, rien de bloquant pour la suit)

http://202.171.65.33/120/demo_xhr2/ajax-jquery/test.html

Le principe est le même, on parse le lien loadMulti sauf la fonction qui affiche elle change :

Avant :


function fcn(url, divDest)
{
    var xhri = xhrRequest('html');
    xhr[xhri].open('GET', url, true);
    xhr[xhri].onreadystatechange = function()
    {
        if (xhr[xhri].readyState == 4 && xhr[xhri].status == 200)
        {
            document.getElementById("message").className = "tumevoispas";
            var content = document.getElementById(divDest);
            content.innerHTML = xhr[xhri].responseText;
            xi[xhri] = 1;
            xhr[xhri] = null;
        }
    } ;
    xhr[xhri].send(null);

}


Après :


function lienXHR(page, div)
{
	$.ajax({  // ajax
		url: page,
		cache: false,
		success:function(html) { afficher(html, div);
		},
		error:function(XMLHttpRequest, textStatus, errorThrows){ // erreur durant la requete
		}
	});
}

function afficher(donnees, div)
{
	$("#"+div).empty();
	$("#"+div).append(donnees);
}



On pourrait supprimer la fct afficher pour l’intégrer à lienXHR

Vous en pensez quoi ?

Thanks
Modifié par caledonien (29 Jul 2011 - 18:24)