jQuery Meetups
Loader correctement en ajax une "pop-up" externe faite à la main
Je .load() une petite pop up (dont le code est dans fichier externe) que j'ai fais moi même quand je click sur un élément. Jusque là tout va bien mais je ne peux faire venir ma pop-up qu'uniquement dans une div prévu à cet effet... Hors moi je veux qu'elle apparaisse en plein milieu de la page donc je voudrais trouver une sorte de sélecteur pour le body (ou le document) ou quelque chose comme ça. Je suis encore un noob en la matière et je suis sûr que vous devez avoir la réponse.
Ciao !
Julien
Views: 507
Replies to This Discussion
-
Permalink Reply by Sébastien Doncker on -
Bonjour Julien,
Pour récupérer le body tu as 2 solutions :
La première : Tu sélectionnes tous les éléments qui ont pour tag <body>. Il n'y en a qu'un mais c'est pas grave.
$("body")
La seconde c'est de passer à jQuery l'élément body directement. En javascript, tu peux toujours accéder à l'élément body par : document.body. Tu peux donc utiliser le sélecteur suivant :
$(document.body)
Le résultat sera le même, la seconde manière est plus rapide car jQuery n'a pas besoin de parser la chaîne de caractères.
Voilà, en espérant que cela t'aide.
Seb
-
-
Permalink Reply by Nicolas Drouin on -
Bonjour,
Ton popup est un layer (calque) ? Tu veux en faite que ta div apparaisse au milieu de la page ?
-
-
Permalink Reply by Julien Knebel on -
Hello Sébastien,
Merci pour ta réponse. Non ça m'aide pas, je viens d'essayer mais en fait je dois me tromper dans ma façon de faire parce que ce qu'il se passe c'est que ça remplace le body par le bout de d'HTML que j'essaye de loader au lieu de l'ajouter au body.
Bon voilà ma page sur laquelle je travail parce que sinon on va pas s'en sortir :P
http://www.julienknebel.com/temp/popUp/index.html
Julien
Sébastien Doncker said:Bonjour Julien,
Pour récupérer le body tu as 2 solutions :
La première : Tu sélectionnes tous les éléments qui ont pour tag <body>. Il n'y en a qu'un mais c'est pas grave.
$("body")
La seconde c'est de passer à jQuery l'élément body directement. En javascript, tu peux toujours accéder à l'élément body par : document.body. Tu peux donc utiliser le sélecteur suivant :
$(document.body)
Le résultat sera le même, la seconde manière est plus rapide car jQuery n'a pas besoin de parser la chaîne de caractères.
Voilà, en espérant que cela t'aide.
Seb
-
-
Permalink Reply by Julien Knebel on
-
Oui je suppose que c'est ce que tu veux dire mais regarde ma réponse à Sébastien tu vas pouvoir comprendre ce que j'essaye de faire.
Merci pour ta réponse en tout cas.
JulienNicolas Drouin said:
Bonjour,
Ton popup est un layer (calque) ? Tu veux en faite que ta div apparaisse au milieu de la page ?
-
-
Permalink Reply by Nicolas Drouin on
-
En faite c'est une lightbox de ce type que tu veux faire http://fancybox.net/
Si c'est ça je pense que cela relève plutôt des css... en tout cas pour centrer
-
-
Permalink Reply by Julien Knebel on
-
Oui pour centrer en css c'est pas un soucis c'est surtout le js qui me pose problème, je vais jeter un coup d'oeil aux sources des différentes lightbox pour voir comment elles sont ajoutées dans le DOM mais bon je sens que ça va pas être coton. Si quelqu'un a une idée je suis preneur ! :)
Julien
Nicolas Drouin said:
En faite c'est une lightbox de ce type que tu veux faire http://fancybox.net/
Si c'est ça je pense que cela relève plutôt des css... en tout cas pour centrer
-
-
Permalink Reply by Nicolas Drouin on
-
Que veux tu faire exactement avec le js ?
-
-
Permalink Reply by Julien Knebel on
-
Bah en fait tout simplement faire aparaître la petite popup en plein milieu de la page quand on clique sur le lien "Load a popBox" donc aller chercher la petite popup qui se trouve dans un autre dossier sur le serveur et l'ajouter à la page, rien de plus. Mais là avec le js que j'ai écrit ça remplace tout ce qu'il y a dans le body au lieu de s'y ajouter.
Mais peut-être que la méthode load() n'est pas la mieux adapter pour faire ça. Peut-être avec $.ajax() marchera mieux.
Regarde le code source de ma page tu verras le js est dans le head, j'y suis presque mais je bug sur ce dernier point. D'ailleurs faudrait que j'essaye de rennomer le titre de ce post parce que c'est mal formulé maintenant.
Julien
Nicolas Drouin said:Que veux tu faire exactement avec le js ? -
-
Permalink Reply by Sébastien Doncker on
-
Ok...Donc, en regardant ton code, voyons ce qu'on peut faire.- Ce que tu veux, ca n'est pas charger ton code dans le body mais l'ajouter dans le body. La fonction load() remplace le contenu entier... Il va donc falloir te tourner vers la fonction append() plutôt.- load() est trop simple pour faire ce que tu veux, il faut que tu récupères ton html et ensuite seulement que tu l'ajoute à ton body. Il faut donc passer par la méthode $.ajax.- Et dernière petite chose, pour l'instant, quand tu cliques sur ton lien, tu exécutes ton code mais tu n'empêche pas le navigateur d'exécuter le code par défaut ce qui fait qu'après ton code, il charge l'adresse du href ce qui t'emmènes sur l'image au lieu de rester sur ta page. Pour régler çà, il faut utiliser la fonction preventDefault() sur l'événement de click pour empêcher son exécution.Bien, après ces remarques, voyons comment faire çà en modifiant ton code (c'est un exemple, je n'ai pas pris le temps de le tester donc je te laisse corriger ce qui n'ira pas ou reposer des questions) :
// ATTENTION : la fonction de click prend un paramètre qui représente l'événement de click. // On en a besoin pour la suite.
$('a[rel=popBox]').live('click', function(event) {
// première chose, j'empêche le fonctionnement normal du click
event.preventDefault();
// ensuite tu récupères l'URL, pas de soucis.
var popBoxUrl = $(this).attr('href');
console.log(popBoxUrl);
// maintenant, il faut charger ta popBox. (je ne gère as l'erreur, je fais au plus simple)
$.ajax({
url: popBoxUrl,
success: function(data, statusText, xhr) {
// quand le chargement se termine, data contient le html de ta box
// on va donc le transformer en un objet jQuery
var popBox = $(data);
// puis tu n'as plus qu'à l'ajouter au body.
$("body").append(popBox);
// puis maintenant qu'on l'a ajouté, il reste plus qu'à faire le reste de ce que tu faisais
// c'est à dire le rendre draggable
popBox.draggable();
// puis prendre en compte le bouton close.
// remarque : pas besoin de live, tu ne vas pas ajouter plusieurs bouton close)
popBox.find(".CloseBtn").click(function(event) {
event.preventDefault();
// tu as toujours accès à popBox puisque nous sommes toujours dans la fonction success.
popBox.fadeOut(600).remove();
});
}
});
});
Voilà, en espérant que cette fois-ci cela te seras plus utile.Seb -
-
Permalink Reply by Julien Knebel on
-
Super merci pour ta réponse hyper efficace !
Donc oui j'avais eu raison de penser que ça marcherait mieux avec $.ajaxJe viens de tester ça marche nickel à part le bouton close qui marchait plus mais j'ai finit par réussir à le refaire marcher en le sortant de la fonction success. J'ai pas trop compris pourquoi mais en tout cas mon problème est réglé.
Merci encore pour ta précieuse aide et tes commentaires avisésÀ une prochaine ! et merci aussi Nicolas pour ton aide !
Julien
Sébastien Doncker said:
Ok...Donc, en regardant ton code, voyons ce qu'on peut faire.- Ce que tu veux, ca n'est pas charger ton code dans le body mais l'ajouter dans le body. La fonction load() remplace le contenu entier... Il va donc falloir te tourner vers la fonction append() plutôt.- load() est trop simple pour faire ce que tu veux, il faut que tu récupères ton html et ensuite seulement que tu l'ajoute à ton body. Il faut donc passer par la méthode $.ajax.- Et dernière petite chose, pour l'instant, quand tu cliques sur ton lien, tu exécutes ton code mais tu n'empêche pas le navigateur d'exécuter le code par défaut ce qui fait qu'après ton code, il charge l'adresse du href ce qui t'emmènes sur l'image au lieu de rester sur ta page. Pour régler çà, il faut utiliser la fonction preventDefault() sur l'événement de click pour empêcher son exécution.Bien, après ces remarques, voyons comment faire çà en modifiant ton code (c'est un exemple, je n'ai pas pris le temps de le tester donc je te laisse corriger ce qui n'ira pas ou reposer des questions) :
// ATTENTION : la fonction de click prend un paramètre qui représente l'événement de click. // On en a besoin pour la suite.
$('a[rel=popBox]').live('click', function(event) {
// première chose, j'empêche le fonctionnement normal du click
event.preventDefault();
// ensuite tu récupères l'URL, pas de soucis.
var popBoxUrl = $(this).attr('href');
console.log(popBoxUrl);
// maintenant, il faut charger ta popBox. (je ne gère as l'erreur, je fais au plus simple)
$.ajax({
url: popBoxUrl,
success: function(data, statusText, xhr) {
// quand le chargement se termine, data contient le html de ta box
// on va donc le transformer en un objet jQuery
var popBox = $(data);
// puis tu n'as plus qu'à l'ajouter au body.
$("body").append(popBox);
// puis maintenant qu'on l'a ajouté, il reste plus qu'à faire le reste de ce que tu faisais
// c'est à dire le rendre draggable
popBox.draggable();
// puis prendre en compte le bouton close.
// remarque : pas besoin de live, tu ne vas pas ajouter plusieurs bouton close)
popBox.find(".CloseBtn").click(function(event) {
event.preventDefault();
// tu as toujours accès à popBox puisque nous sommes toujours dans la fonction success.
popBox.fadeOut(600).remove();
});
}
});
});Voilà, en espérant que cette fois-ci cela te seras plus utile.Seb -
© 2012 Created by jqueryadmin.
