Probleme chargement de .js après requête ajax

Bonjour,

Voilà, je viens poster sur ce forum car je le trouve très complet au sujet de la conception web : Félicitations.

Je travaille en ce moment sur une v2 du site internet de l'agence multimédia (sans statuts juridiques) dont je suis le responsable : Lambda Comm.
J'ai décidé de me mettre doucement au Web 2.0 et donc de concevoir le site en utilisant de l'Ajax par le biais d'une librairie javascript : jQuery.

Seulement, voilà, selon les pages, il me faut différents fichiers JS et le contenu de chaque page est chargé dynamiquement à l'aide de jQuery par le code suivant :

function ajax_page_advanced(ele,msg,url){
	$(ele).slideUp("slow", function(){
		$(ele).html(msg).show("slow", function(){
			$(ele).load(url+" "+ele, null, function(){
				var tampon = $(ele).html();
				$(ele).html(msg).hide("slow",function(){
					$(ele).html(tampon);
					$(ele).slideDown("slow");
				});
			});
		});
	});
}

$(document).ready(function(){
	// Effet FadeIn boutons menu
	$("#menu li").mouseover(function(){
        if($(this).css("background-image").length <= 4) {
            if($(this).className!="current") {
				var obj = $(this).clone(true);
				obj.insertAfter(this).hide().css({"background-image":"url(images/menu_bg1.jpg)", "z-index":"2", "position":"absolute"});
	            obj.fadeIn("slow");
				}
			}
	});
	// Effet FadeOut boutons menu
	$("#menu li").mouseout(function(){
        if($(this).css("background-image").length > 4) {
			if($(this).className!="current") {
	            $(this).fadeOut("slow");
				}
			}
	});
	// Effet SlideIn / SlideOut Ajax contenu
	$("#menu li a").click(function(){
			$("#menu li").removeClass("current");
			ajax_page_advanced('#contenu','<p class="loader"><img src="images/loader.gif" alt="Chargement"/> Chargement...</p>',this.href);
			return false;
	});
});

Lorsqu'une page est chargée dynamiquement, il m'est impossible de charger le fichier JS se situant dans le head...

Pour ceux qui ne voient pas trop de quoi je parle, voici l'url de test de la v2 en question : http://www.lambda-comm.fr/test .

Lorsque vous cliquez sur un lien du menu, seule le contenu de la page en question est chargée. Si par exemple je vais sur la page contact, et que je veux rajouter un plugin de validation de formulaire, celui-ci ne marche pas...

J'espère avoir été suffisamment clair , merci pour vos réponses.

Salut,

il existe un excellent module qui permet de conserver les fonctionnements javascripts mis en place, même après avoir rafraichi le code HTML (et donc le DOM).
Il s'agit de Livequery.

Je l'utilise pour le moment avec succès .

En effet, j'en ai déjà entendu parler, seulement je ne vois pas comment avec ce plugin faire interpréter du code js sur la page chargée en Ajax...

Je sais que celui-ci permet aux écouteurs de se tenir à jour vis à vis du DOM mais c'est tout !

Pourrais tu m'expliquer, si cela ne te dérange point, comment l'implémenter et où le faire pour faire ce que je souhaite, à savoir : Executer du js dans une page chargée dynamiquement en Ajax ?

J'ai entendu parler de la methode getScript de jQuery mais mes essais avec celle-ci n'ont pas été très fructueux. Si quelqu'un savait comment l'utiliser dans mon cas, je lui serai reconnaissant de bien vouloir m'expliquer .

Merci pour vos réponses

coenonympha a écrit :

Seulement, voilà, selon les pages, il me faut différents fichiers JS et le contenu de chaque page est chargé dynamiquement à l'aide de jQuery.

Je crois que c'est ça que j'ai pas bien compris et qui me fait répondre à côté .

En toute logique, il faudrait charger tout le javascript une fois pour toute et pour toute une application donnée (site, back office ...). Ainsi, tu évites à l'internaute de recharger des fichiers pour rien à chaque fois.

Mais bref, dans ton cas, concrètement, c'est quoi le JS qui change ? Pas vu dans les sources...

C'est un plugin de validation de formulaire et selon les pages, il y aura la présence d'un éditeur de texte WYSIWYG : Tiny MCE...

J'ai pensé à tout charger une fois pour toute comme tu viens de le préciser seulement, je n'ai pas envie de surcharger ma page dès l'arrivée de l'internaute sur la page d'accueil pour des raisons d'accessibilité et d'économie de bande passante.

De plus, pour charger Tiny MCE correctement, il faut que le code JS soit interprété sur la page affichant l'éditeur sinon cela ne marche pas, du moins je n'ai pas réussi .

Help me please

Je reprends. Tu charges un bout de code dynamiquement, et tu dois lui faire appliquer un traitement javascript après chargement.
Si c'est ça, et en prenant l'exemple de TinyMCE + jQuery
(via le plugin TinyMCE pour jQuery) :

$('#textarea1', '#textarea2').tinymce();

Si les 2 textarea sont chargés après coup (via ajax), tu peux utiliser liveQuery :

$('#textarea1', '#textarea2').livequery(function(){
     $(this).tinymce();
 });

Ainsi, si le textarea est sur la page, il est traité mais s'il est n'est pas présent, livequery permet de garder cette info, pour le "cas où il soit chargé". je sais c'est très imagé, mais je suis pas un super technicien qui manipule toujours les bons termes

En revanche, il faut absolument que ceci apparaisse sur toutes les pages, typiquement, en bas de page (avant le "</body>"), histoire de bien charger les javascripts après avoir généré le HTML c'est surtout pour les perfs) :

<html>
   <head>
   </head>
   <body>
    ...
 
      <script type="text/javascript" src="jquery.js"></script>
      <script type="text/javascript" src="jquery.tinymce.js"></script>
      <script type="text/javascript">
       $(document).ready(function(){
           $('#textarea1', '#textarea2').livequery(function(){
              $(this).tinymce();
            });
        });
      </script>
   </body>
</html>

Ok merci, j'essaye de suite sauf que je ne pense pas utiliser livequery car j'ai lu que la dernière version de jquery (la 1.3) proposait une fonction intégrée "live" bien plus performante.

Je te tiens au courant

Alors ?

Du coup, j'essaierai la 1.3 pour mon prochain site, si c'est plus performant ... Pourquoi se priver ?

Salut,

alors : ça ne marche pas ...

Dans la console d'erreurs, ca m'affiche des erreurs en rapport avec le DOCTYPE XHTML 1.1. Une idée là dessus ?

A tout hasards...
Tu as essayé avec le plugin et avec la 1.3 ?

Sinon, tu peux copier ton erreur ? Si c'est un message trop abscon, c'est qu'il s'agit d'une erreur d'éxécution de jQuery, auquel cas, je t'invite à repasser en 1.2.6 avant d'avoir trop mal au crâne

Non, je n'ai pas essayé...

Mais de toute manière, j'ai décidé hier de laisser tomber, je vais repasser à une navigation classique au niveau du changement de page mais je vais dynamiser le tout avec un peu d'Ajax de manière moins bourrine.

Ce sera mieux niveau accessibilité : le visiteur saura au moins sur quelle page il se trouve !

En tout cas je te remercie pour ton aide, à bientôt

En fait, j'ai encore besoin de ton aide .

J'aimerais charger dynamiquement un fragment de page via un formulaire qui envoie des données POST à ce fragment...

En gros j'aimerais appliquer la fonction ajax_page_advanced que j'ai mis plus haut à un formulaire.

Est ce que tu sais comment je dois m'y prendre ?

Peut-être via un truc du genre :

$("#fragment").load("url_formulaire #element_de_formulaire_obtenu", null, callback)

Mais pour un formulaire, il faut que tu ailles chercher les valeurs de tous les champs, puis appeler "load" avec les paramètres (là où j'ai laissé "null").
le plus simple, à mon gout, c'est encore une fois... un plugin

J'utilise Ajaxify, qui permet de gérer les formulaires "simples".
=> http://maxblog.me/ajaxify/demo.php

Salut,

J'ai essayé ton plugin ajaxify, et j'ai voulu l'appliquer à mon formulaire php de contact, mais : ça me fait un truc bizarre ...

Ça envoie bien les données mais sur la page, ça ne se passe pas comme prévu dirons nous.

Si tu veux voir : http://lambda-comm.fr/test/contact.php .

Ma page formmail.php contient ceci :

<?php
$TO="contact@lambda-comm.fr";
$h="From: ".$_POST['email'];
$message="De : ".$_POST['nom']."\n".$_POST['message'];
$sujet="Contact Client";
mail($TO, $sujet, $message, $h);
?>

Could you help me please ?

Pas de réponse ?

Salut,

bon ben déjà, ton formulaire est soumis, puisque tu obtiens un "onSuccess".
Mais ton data="accepted" tu le sors d'où ? C'est Formmail.php qui te le renvoies ?

Tu avais raison, c'est le data=accepted qui passait pas, je l'avais repiqué sur la demo de leur site car je pensais que c'était un écouteur qui vérifiait que les données en POST étaient bien passées.

Merci à toi !

Maintenant : J'ai un autre problème

Je n'ai pas réussi à faire cohabiter le plugin de validation de formulaire nommé "validate" avec "ajaxify"... J'ai donc décidé de faire une vérification de chaque champs de données en ajax comme sur le site d'ajaxify : http://maxblog.me/ajaxify/demo.php Rubrique "Pratical Examples" et "Registration form".

J'ai donc adapté leur exemple à mon fichier formmail.php :

<?php
if($_GET['action']=='regsubmit'){
	if($_POST['nom']!="")
		echo "<div class='nom'><img src='images/mini_check.png alt='Succés'/></div>";
	else {
		echo "<div class='nom'>Veuillez entrer votre nom</div>";
		$error = true;
		}
	if(strlen($_POST['message'])>20)
		echo "<div class='message'><img src='images/mini_check.png alt='Succés'/></div>";
	else {
		echo "<div class='message'>Veuillez écrire votre message</div>";
		$error = true;
		}
	if(!eregi("^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$",$_POST['email'])){
		echo '<div class="email">Veuillez entrer une adresse correcte</div>';
		$error = true;
	}
	else
		echo "<div class='email'><img src='images/mini_check.png alt='Succés'/></div>";      
	if(!$error)
		echo '<div class="script"><script type="text/javascript">
		$("[name=submit]").attr("disabled",false);
		</script></div>';
	else
		echo '<div class="script"><script type="text/javascript">
		$("[name=submit]").attr("disabled",true);
		</script></div>';
}
else if($_GET['action']=='submit'){
	$TO="contact@lambda-comm.fr";
	$h="From: ".$_POST['email'];
	$message="De : ".$_POST['nom']."\n".$_POST['message'];
	$sujet="Contact Client";
	mail($TO, $sujet, $message, $h);
}
?>

Puis à la structure de ma page contact : Voir le code source de -> http://lambda-comm.fr/test/contact.php .

Seulement, la vérification des champs ne se fait pas et donc la désactivation du bouton submit ne se fait pas non + .

Désolé encore de te le demander mais : Peux tu m'aider ? Par pitié

Merci par avance

Alors ? Dis moi que tu as une idée stp?

Le problème doit venir de là :

if(!$error)
		echo '<div class="script"><script type="text/javascript">
		$("[name=submit]").attr("disabled",false);
		</script></div>';
	else
		echo '<div class="script"><script type="text/javascript">
		$("[name=submit]").attr("disabled",true);
		</script></div>';

Dans ton formulaire, pour récupérer le bouton submit c'est pas

$("[name=submit]").attr("disabled",true);

mais

$("[type=submit]").attr("disabled",true);

Eventuellement, donne un id à ton champ submit pour faire

$("#id_du_submit").attr("disabled",true);

J'ai bon ?

Ca aurait été un problème pour la suite c'est sûr, merci .

Mais ça n'arrange pas le fait que mes champs ne soient pas vérifiés, tu ne sais pas d'où ça vient ?