11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour à vous,

Une question sans doute simple, je souhaite ajouter le code :

<?php include (TEMPLATEPATH . '/soumettre_cv.php'); ?>


dans la partie :

.html()

$('.art').empty().html();


j'ai fait ceci mais cela ne fonctionne pas :

<script type="text/javascript">
            jQuery(document).ready(function(){
                $('li.article').click(function() {
                    $('li').removeClass('active');
                    $('li.article').addClass('active');
                    $('.art').empty().html('<?php include (TEMPLATEPATH . '/soumettre_cv.php'); ?>');
                })
                return false;
            });
</script>


J'ai déjà posé la question sur le forum de WP mais pas de réponses suffisante :s

Merci à vous
Bonjour,

quelques rappels sur ce qu'il se passe quand tu ouvre une url depuis ton navigateur:
1/le navigateur (le client) envoie une requête au serveur,
2/le serveur exécute le php (s'il y en a) et renvoie le code html qui en résulte au client,
3/le client interprète l'html et exécute le javascript (s'il y en a).

lorsque ton script est exécuté, tu es à l'étape 3, or ton code php ne peut être exécuté qu'à l'étape 2: c'est là que çà coince. Pour pallier le problème, kenor t'as bien orienté: en utilisant de l'ajax, tu pourras depuis la partie client renvoyer une requête au serveur pour lui demander d'exécuter ton php, et récupérer le résultat.
Merci à vous, je vient de voir mon erreur, apres avoir vue avec "firebug" mon code, comme tu le dit @tilsitt, il me faut de l'ajax, donc un chargement de page en ajax, vue que je ne suis pas développeur pour cela que j'ai mis du temps a comprendre, avec le lien que ma donné @kenor, j'ai enfin compris, mais n'arrive pas a faire le script pour que cela fonctionne.

Mon but est que quand je clique sur le lien, il ajoute a la balise li une class="active" (ok pour l'ajout), il supprime le contenu de la balise <div class="art">text</div> (ok pour la suppression), et qu'il ajoute le contenu de la page soumettre_cv.php dans la balise <div class="art"></div> sans chargement de la page. Je bug sur la 3e partie donc la partie ajax =/
La doc est assez clair mais voici un bout de code basique qui répond à ce que tu cherches :


$.ajax({
  url: 'soumettre_cv.php', // fait bien attention à l'adresse par contre
  success: function(contenu_soumettre_tv) { 
    // contenu_soumettre_tv contient tout 
    // ce que renvoit "soumettre_cv.php" si tu l'appelais en direct
    $('div.art').html(contenu_soumettre_tv); // on met le contenu dans le <div class="art">
  }
});
Merci pour le code @kenor, voici le code que j'ai mis :

<script type="text/javascript">
			jQuery(document).ready(function(){
				jQuery(document).ready(function(){
				$.ajax({
					url: '<?php bloginfo('stylesheet_directory'); ?>/soumettre_lien.php', // fait bien attention à l'adresse par contre
					success: function(soumettre_lien){ 
						// contenu_soumettre_tv contient tout 
						// ce que renvoit "soumettre_cv.php" si tu l'appelais en direct
						$('li.cv').click(function() {
							$('li').removeClass('active');
							$('li.cv').addClass('active');
							$('.art').html(soumettre_lien); // on met le contenu dans le <div class="art">
						})
					}
				})
				return false;
			});
		</script>


Cela ne fonctionne pas car après plusieurs essaies, et firebug (encore une fois), j'ai des erreurs (voir même FATAL ERRor, Warning), en faite la page php que j'appel après avoir cliqué sur le lien contient du code php et donc il y a des erreurs =/
jQuery(document).ready(function(){
	$.ajax({
		success: function(){
			$('li.cv').click(function() {

			});
		}
	});
});


avec ce code, une fois la page chargée, tu lance un appel ajax, et, en cas de succès, tu déclare l'évennement "click" sur tes éléments de liste: c'est pas dans le bon ordre Smiley cligne .

ce que tu veux, c'est, une fois la page chargée, déclarer les évennements "click" auxquels tu associes tes appels ajax, ce qui donnerait plutôt quelquechose comme çà:

jQuery(document).ready(function(){
	$('li.cv').click(function() {
		$.ajax({
			success: function(){
				// tu peux faire les traitements ici
			}
		});
	});
});


et attention, dans le code que tu donne en exemple, la ligne "jQuery(document).ready" est en double.
Modifié par tilsitt (25 Jan 2012 - 14:23)
Merci à toi @tilsitt, Pour le jQuery(document).ready(function() en double juste un mauvais copié/collé sur le forum de ma part =/

Le code que les bien mis comme tu me le conseille dans l'ordre, mais le même le résultat, sans doute que je devrais charger les pages en même temps et faire appel par la suite au click. sans doute moins compliqué Smiley smile