all html : Le portail des webmaster

liste des forums liste des discussions Participer à la discussion

Message publié le jeudi 19 janvier 2012 - 15h16 par lafouinasse.

Bonjour,

je me heurte à une difficulté et je suis sur que vous allez pouvoir m'aider.

je travail sur un site essentiellement développé avec jquery et method ajax.. jusque là tout va bien.

+ j'utilise jquery 1.7.1 et colorbox 1.3.18

+ pour les besoin de la GUI je refresh des zones de menus quand il y a ajout ou modification du contenu.

+ chaque bouton de ce menu est défini par une class qui permet d'ouvrir un popup modale (colorbox) défini avec jquery comme suit :

$(".MACLASSE").live("click", function () { $(".MACLASSE").colorbox({iframe:true, width:"80%", height:"80%"}); return false; });

+ le bouton est défini en lui même par :

<div class="MACLASSE AUTRECLASSE" href="URL_PHP"> <img src="/images/help.png" /> </div>

mon problème est qu'il faut que je click deux fois sur les boutons pour que les modales s'ouvrent. Une fois fait, un simple click suffit à les ouvrir. Le problème se répète quand la zone est rafraichi par ajax. Il faut encore deux clic pour "réinitialiser" le comportement.

Au début je pensais à un pb de rafraichissement du DOM (premier click permet de rafraichir)

le problème est identique sur safari, firefox, chrome et IE

Avez vous une idée de comment rétablir un comportement normal (1 seul click dans tous les cas)?


En vous remerciant par avance

• participer

Message publié le jeudi 19 janvier 2012 - 16h24 par jules.

Salut,

Le plugin "colorbox" initialise lui même le click sur les éléments.

En utilisant le code
$(".MACLASSE").colorbox({iframe:true, width:"80%", height:"80%"}); tu indiques déjà que les liens de classes .MACLASSE doivent utiliser "colorbox".

Donc, avec le code $(".MACLASSE").live("click", function () { $(".MACLASSE").colorbox({iframe:true, width:"80%", height:"80%"}); return false; });tu fais une sorte de double initialisation :
- au premier click sur le lien c'est la fonction définie par "live" qui est exécutée : hop, tu associes tous les liens .MACLASSE avec colorbox ;
- au second click, c'est bien l'action définie par colorbox qui s'exécute (ton code doit d'ailleurs associer de nouveaux tous les liens .MACLASSE avec colorbox... ce n'est pas très optimisé).

Moi, je te proposerais plus quelque chose qui ressemble à :
$(".MACLASSE").live("click", function () { $.colorbox({href:$(this).attr('href'), open:true, iframe:true, width:"80%", height:"80%"}); return false; } ); Cela permettrait, au premier click, d'executer directement le plugin colorbox en lui passant le lien à ouvrir (c'est l'attribut href du lien cliqué : $(this).attr('href') et le paramètre "open" qui permet à colorbox de s’exécuter immédiatement (Documentation du plugin ColorBox pour jQuery).

• participer

Message publié le vendredi 20 janvier 2012 - 10h54 par lafouinasse.

Bonjour Jules,

je te remercie pour ta réponse très précise
j'essai et feed back

• participer

Message publié le vendredi 20 janvier 2012 - 11h05 par lafouinasse.

nickel, je t'en doit une ;)

un Grand Merci

• participer

liste des forums liste des discussions Participer à la discussion

Vous devez obligatoirement vous identifier en tant que membre pour participer à cette discussion.