Lien avec Ajax

Version imprimable

Lien avec Ajax

bonjour a tous et a toutes

j'ai un souci au niveau de l'affichage d'une résultat requête prévenante d'un fichier.php qui fait le traitement en utilisant mon variable transmis via url

voila le code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 $(function(){ $('a.lnk').live("click",function(){ var url= $(this).attr("href"); // get the href value $.ajax({ type: "POST", url: "Appartement.php", data: "url="+url, success: function(data){ $('div#affichage').load(url, function(){ $(this).hide().slideDown(400); // je sais pas quoi mettre ici }); alert("valeur de lien " +url); } }); return false; }); });
et pour le html voila mon lien :

Code:

<a class="lnk" href="1" style="color:#3366FF">Appartements<?php echo ...?></a>

dans mon fichier php je met
Code:

1 2 3 4 5 <?php .... $appart=$_POST["url"]; .... ?>
qu'est ce que je dois faire pour que le résultat envoyé par le fichier Php sera affiché dans la div id="affichage" depuis un click sur le lien? Merci

01/07/2013, 03h52
omdafer

Bonjours,
c'est normal le .hide().slideDown(); ?

Ce serait peut-être mieux un .append() qu'un .load(), sinon tu appels une page qui est dans ton lien.

En plus, c'est pile-poil ce que tu as besoin pour écrire à la suite dans ton div.
01/07/2013, 05h58
ToufBen

Probléme d'importation de jquery dans mon site
bonjour,
j'ai une question, est ce qu'on peux appeler deux version de Jquery dans le même projet ??
c'est a dire faire ça :
Code:

1 2 <script src="jquery-1.10.0.js" type="text/javascript"></script> <script src="Jquery/jquery-1.4.1.js" type="text/javascript"></script>
01/07/2013, 08h40
SpaceFrog
Une seule version de jquery suffit; la plus récente de préférence, seul de rares cas avec noConflict() jsutifient l'utilisation de versions différentes.

tu as également oublié d'inhiber le lien href.
Le href envoie sur une autre page, js ne survit pas au changement de pages
Code:

1 2 3 4 $('a.lnk').live("click",function(e){ e.preventDefault(); ...
le preventDefault empeche l'evenement par defaut de ta balise a qui est de lancer un changement de page ?.

bonsoir,
merci homdafer pour la réponse mais le lien avec jquery fonctionne bien maintenant j'ai dépassé ce stade, maintenant je veux savoir si on a des éléments qui utilisent la bibliothèque Jquery-1.4.1 et d'autres éléments qui utilisent Jquery-1.10.0 dans la même page, est-ce-qu'on doit éviter ça ou non?
voila la fonction jquery qui permet de créer mon menu et qu'elle ne fonctionne qu'avec la version JQuery1.4.1 :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
$(document).ready( function () {
        // On cache les sous-menus
        // sauf celui qui porte la classe "open_at_load" :
        $("ul.subMenu:not('.open_at_load')").hide();
 
		// On selectionne tous les items de liste portant la classe "toggleSubMenu"   
        // et on remplace l'element span qu'ils contiennent par un lien :
        $("li.toggleSubMenu span").each( function () {
            // On stocke le contenu du span :
            var TexteSpan = $(this).text();
            $(this).replaceWith('<a href="#" title="Afficher le sous-menu">'+TexteSpan+'</a>') ;
        } ) ;
        // On modifie l'evenement "click" sur les liens dans les items de liste
        // qui portent la classe "toggleSubMenu" :
        $("li.toggleSubMenu>a").click(function () {
            // Si le sous-menu etait deja ouvert, on le referme :
            if ($(this).next("ul.subMenu:visible").length != 0) {
 
                $(this).next("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") } );
 
            }
            // Si le sous-menu est cache, on ferme les autres et on l'affiche :
            else {
                $("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") } );
                $(this).next("ul.subMenu").slideDown("normal", function () { $(this).parent().addClass("open") } );
 
            } 
            // On empêche le navigateur de suivre le lien :
            return false;
        });

puis j'utilise une DIV scroller dans la même page qui utilise la bibliothèque Jquery-1.10.1 et (Jquery.SimplyScroller.min.js) voila son code :

Code:

1
2
3
4
5
6
7
$(function() {
$("#scroller").simplyScroll({
backButtonElement: "#goBack", // Option ajoutée par rapport à la version officielle
forwardButtonElement: "#goFwd", // Option ajoutée par rapport à la version officielle
pauseButtonElement: "#pause" // Option ajoutée par rapport à la version officielle
});
});

02/07/2013, 15h08
omdafer

Salut,
ton 1er code devrait fonctionner sous les deux versions de jQuery, il n'y a pas de raison.
Il y a peut-être une différence de syntaxe qui n'est pas supportée par la version 1.10

Dans la doc de jQuery, ils ne mettent pas de quote ' ' à l’intérieur du :not()
02/07/2013, 15h10
SpaceFrog

au risque de me répéter : il faut inhiber le href ...
02/07/2013, 15h23
omdafer

Citation:

Envoyé par SpaceFrog

au risque de me répéter : il faut inhiber le href ...

event.preventDefault(); et return false; ça fait pas double emploi?
03/07/2013, 19h30
ToufBen

plus d'explication

merci homdafer et spaceFrog pour vos réponses
concernant votre réponse SpaceFrog je crois que inhiber ça veux dire désactiver le href et empecher le navigateur de suivre le lien, c ca?

ben je l'ai mis depuis le debut en mettant Return false; dans la fin du fonction jquery.

j'ai trouvé quelques discussion a propos de noConflict() mais ça n'a pas marché, pour l'instant mon programme fonctionne mais le menu utilise toujours Jquery1.4.1 pour fonctionner...
03/07/2013, 19h37
ToufBen

merci bien homdafer ta remarque été très précise concernant les '' dans not() je les ai enlevé et ça fonctionne avec Jquery-1.10 :ccool:

SpaceFrog oui mon navigateur ne suit pas les liens du menu.