11523 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous,

Je suis devant un grosse problèmatique. Je mets le contexte en place :
Je souhaite afficher un pop (via bPopup c'est un script javascript qui fonctionne) lors du clic sur le bouton envoyer de mon formulaire. Mais, pour cela il faut cliquer sur une variable qui va déclencher le script javascript.

Voici les codes :

<a id='message_comment' style='color:black;'> test </a> // Variable sur laquelle je dois cliquer pour afficher le popup
<div id='message_comment_elements'> // Éléments dans le popup 
<a class='b-close'> X </a> // Lettre qui me permet de ferme la fenetre popup
Message envoyé ! // Texte
</div>


Pour afficher le popup je dois donc cliquer sur "test" qui appelle le javascript :
<script src='js/jquery.bpopup.min.js'></script>
ainsi que du CSS.

J'ai donc mis dans ma close else un echo qui devrait simuler un clic sur "test" mais cela ne fonctionne pas
echo "
<link rel='stylesheet' type='text/css' href='css/style.css' />
<script src='js/jquery.bpopup.min.js'></script>
<script src='js/jquery.easing.1.3.js'></script>					
<a id='message_comment' style='color:black;'> test </a>
<div id='message_comment_elements'> 
<a class='b-close'> X </a>
Message envoyé !
</div>
<script language=\"javascript\">
document.getElementById('message_comment').click()
</script>";


J'espère que je me suis bien fait comprendre. Et merci de votre aide
Hello!

Pour les popups, jquery ui les gère nativement Smiley cligne Inutile donc de surcharger ta page. Voici ce que j'aurais fait:

Dans le <head> de ta page:

<!-- Chargement du CSS de JQuery UI. Tu peux évidemment changer de thème [cligne] -->
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css" />


Ensuite, juste avant la fermeture de ton body, tu charges JQuery et JQuery UI

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>


Pour que ton bouton ouvre une popup, rien de plus simple!

Tu places ce petit bout de code toujours juste après avoir chargé JQuery et JQuery UI


$(function(){

  $("#monIdFormulaire").submit(function(){

  	$("<div>Le contenu de ma boite de dialogue</div>").dialog({
  		modal: true,
  		title: "Le titre de ma boite de dialogue",
  		buttons: {
  			"Valider":function(){
  				return true;
  			}
  			"Retour": function(){
  				return false;
  			}
  		}
  	});

  });
});


Si tu veux que ta boite de dialogue n'ai pas de boutons, et qu'a sa fermeture, ton formulaire soit validé, il te suffit de supprimer le paramètre "buttons" de la fonction "dialog()" et de mettre un return true; à la fin de ta fonction.

N'oublie pas de vérifier tes infos après soumission en PHP! Il serait bête de valider un formulaire à la va-vite si jamais je désactive le JS Smiley cligne

Bye,
Yokii
Tout d'abord merci de ta réponse.

Ensuite la je vois que tu me propose une autre manière de faire un popup. Hors je peux déjà faire des popup et j'utilise ce popup pour d'autre éléments alors je ne surcharge rien mais merci de t'en soucier Smiley ravi .

Par ailleurs est ce que si je met ton javascript dans un echo en php cela fonctionnerais ?

Je crois que je me suis mal exprimé dans mon premier topic. J'ai un programme qui gère les popup mais pour l'activer il faut cliquer sur l'élément avec l'ID message_content. Et j'aimerais que ce popup s'ouvre sans que l'utilisateur clique dessus ...

Mais merci
Hello,

Effectivement, je te proposais une manière différente, après tu fais "as you want" Smiley cligne

a écrit :
Par ailleurs est ce que si je met ton javascript dans un echo en php cela fonctionnerais ?


Oui, tu peux insérer du code JS dans un echo. On passera sur la propreté du code qui sera du coup bien relative ...

Le problème restera le même : Tu veux déclencher une action nécessitant un clic, sans cliquer. Pourquoi ne pas changer l'événement et mettre un "onLoad()" ou un "onSubmit()" ?
Parce que ma fonction qui déclenche le popup n'est pas nommée et certains éléments sont incompréhensible pour moi.

 ;(function($) {

         // DOM Ready
        $(function() {

            // Binding a click event
            // From jQuery v.1.7.0 use .on() instead of .bind()
            $('#message_comment').bind('click', function(e) {

                // Prevents the default action to be triggered. 
                e.preventDefault();

                // Triggering bPopup when click event is fired
                $('#message_comment_elements').bPopup({
					easing: 'easeOutBack',
					speed: 450,
					transition: 'slideDown'
				});
            });
      });

    })(jQuery); 


Puis la fonction qui gère tout (trop longue à mettre ici)
Il faut "sortir" la fonction de l'événement et la placer dans un événement plus adapté Smiley cligne


$("#mapage").load(function(){

$('#message_comment_elements').bPopup({
					easing: 'easeOutBack',
					speed: 450,
					transition: 'slideDown'
				});

});
Yokii a écrit :
Il faut &quot;sortir&quot; la fonction de l'événement et la placer dans un événement plus adapté Smiley cligne


$(&quot;#mapage&quot;).load(function(){

$('#message_comment_elements').bPopup({
					easing: 'easeOutBack',
					speed: 450,
					transition: 'slideDown'
				});

});


A tester je reviens vers toi plus tard merci
J'ai réussi sa fonctionne.
		echo"
			<script>
			function monPop() {
				$('#about_elements').bPopup({
					easing: 'easeOutBack',
					speed: 450,
					transition: 'slideDown'
				});
			};
			</script>";
		echo" <script> $(function(){ monPop(); }); </script>";
		echo '<div id="about_elements" style="text-align:center;"> Commentaire envoyé !</div>';


Et en haut du fichier :
	<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
	<script>
		(function(b){b.fn.bPopup=function(z,F){function K(){a.contentContainer=b(a.contentContainer||c);switch(a.content){case "iframe":var h=b('<iframe class="b-iframe" '+a.iframeAttr+"></iframe>");h.appendTo(a.contentContainer);r=c.outerHeight(!0);s=c.outerWidth(!0);A();h.attr("src",a.loadUrl);k(a.loadCallback);break;case "image":A();b("<img />").load(function(){k(a.loadCallback);G(b(this))}).attr("src",a.loadUrl).hide().appendTo(a.contentContainer);break;default:A(),b('<div class="b-ajax-wrapper"></div>').load(a.loadUrl,a.loadData,function(){k(a.loadCallback);G(b(this))}).hide().appendTo(a.contentContainer)}}function A(){a.modal&&b('<div class="b-modal '+e+'"></div>').css({backgroundColor:a.modalColor,position:"fixed",top:0,right:0,bottom:0,left:0,opacity:0,zIndex:a.zIndex+t}).appendTo(a.appendTo).fadeTo(a.speed,a.opacity);D();c.data("bPopup",a).data("id",e).css({left:"slideIn"==a.transition||"slideBack"==a.transition?"slideBack"==a.transition?g.scrollLeft()+u:-1*(v+s):l(!(!a.follow[0]&&m||f)),position:a.positionStyle||"absolute",top:"slideDown"==a.transition||"slideUp"==a.transition?"slideUp"==a.transition?g.scrollTop()+w:x+-1*r:n(!(!a.follow[1]&&p||f)),"z-index":a.zIndex+t+1}).each(function(){a.appending&&b(this).appendTo(a.appendTo)});H(!0)}function q(){a.modal&&b(".b-modal."+c.data("id")).fadeTo(a.speed,0,function(){b(this).remove()});a.scrollBar||b("html").css("overflow","auto");b(".b-modal."+e).unbind("click");g.unbind("keydown."+e);d.unbind("."+e).data("bPopup",0<d.data("bPopup")-1?d.data("bPopup")-1:null);c.undelegate(".bClose, ."+a.closeClass,"click."+e,q).data("bPopup",null);H();return!1}function G(h){var b=h.width(),e=h.height(),d={};a.contentContainer.css({height:e,width:b});e>=c.height()&&(d.height=c.height());b>=c.width()&&(d.width=c.width());r=c.outerHeight(!0);s=c.outerWidth(!0);D();a.contentContainer.css({height:"auto",width:"auto"});d.left=l(!(!a.follow[0]&&m||f));d.top=n(!(!a.follow[1]&&p||f));c.animate(d,250,function(){h.show();B=E()})}function L(){d.data("bPopup",t);c.delegate(".bClose, ."+a.closeClass,"click."+e,q);a.modalClose&&b(".b-modal."+e).css("cursor","pointer").bind("click",q);M||!a.follow[0]&&!a.follow[1]||d.bind("scroll."+e,function(){B&&c.dequeue().animate({left:a.follow[0]?l(!f):"auto",top:a.follow[1]?n(!f):"auto"},a.followSpeed,a.followEasing)}).bind("resize."+e,function(){w=y.innerHeight||d.height();u=y.innerWidth||d.width();if(B=E())clearTimeout(I),I=setTimeout(function(){D();c.dequeue().each(function(){f?b(this).css({left:v,top:x}):b(this).animate({left:a.follow[0]?l(!0):"auto",top:a.follow[1]?n(!0):"auto"},a.followSpeed,a.followEasing)})},50)});a.escClose&&g.bind("keydown."+e,function(a){27==a.which&&q()})}function H(b){function d(e){c.css({display:"block",opacity:1}).animate(e,a.speed,a.easing,function(){J(b)})}switch(b?a.transition:a.transitionClose||a.transition){case "slideIn":d({left:b?l(!(!a.follow[0]&&m||f)):g.scrollLeft()-(s||c.outerWidth(!0))-C});break;case "slideBack":d({left:b?l(!(!a.follow[0]&&m||f)):g.scrollLeft()+u+C});break;case "slideDown":d({top:b?n(!(!a.follow[1]&&p||f)):g.scrollTop()-(r||c.outerHeight(!0))-C});break;case "slideUp":d({top:b?n(!(!a.follow[1]&&p||f)):g.scrollTop()+w+C});break;default:c.stop().fadeTo(a.speed,b?1:0,function(){J(b)})}}function J(b){b?(L(),k(F),a.autoClose&&setTimeout(q,a.autoClose)) [decu]c.hide(),k(a.onClose),a.loadUrl&&(a.contentContainer.empty(),c.css({height:"auto",width:"auto"})))}function l(a){return a?v+g.scrollLeft():v}function n(a){return a?x+g.scrollTop():x}function k(a){b.isFunction(a)&&a.call(c)}function D(){x=p?a.position[1]:Math.max(0,(w-c.outerHeight(!0))/2-a.amsl);v=m?a.position[0] [decu]u-c.outerWidth(!0))/2;B=E()}function E(){return w>c.outerHeight(!0)&&u>c.outerWidth(!0)}b.isFunction(z)&&(F=z,z=null);var a=b.extend({},b.fn.bPopup.defaults,z);a.scrollBar||b("html").css("overflow","hidden");var c=this,g=b(document),y=window,d=b(y),w=y.innerHeight||d.height(),u=y.innerWidth||d.width(),M=/OS 6(_\d)+/i.test(navigator.userAgent),C=200,t=0,e,B,p,m,f,x,v,r,s,I;c.close=function(){a=this.data("bPopup");e="__b-popup"+d.data("bPopup")+"__";q()};return c.each(function(){b(this).data("bPopup")||(k(a.onOpen),t=(d.data("bPopup")||0)+1,e="__b-popup"+t+"__",p="auto"!==a.position[1],m="auto"!==a.position[0],f="fixed"===a.positionStyle,r=c.outerHeight(!0),s=c.outerWidth(!0),a.loadUrl?K():A())})};b.fn.bPopup.defaults={amsl:50,appending:!0,appendTo:"body",autoClose:!1,closeClass:"b-close",content:"ajax",contentContainer:!1,easing:"swing",escClose:!0,follow:[!0,!0],followEasing:"swing",followSpeed:500,iframeAttr:'scrolling="no" frameborder="0"',loadCallback:!1,loadData:!1,loadUrl:!1,modal:!0,modalClose:!0,modalColor:"#000",onClose:!1,onOpen:!1,opacity:0.7,position:["auto","auto"],positionStyle:"absolute",scrollBar:!0,speed:250,transition:"fadeIn",transitionClose:!1,zIndex:9997}})(jQuery);
	</script>