Jquery: Comment puis-je déclencher une fenêtre modale juste de l'existence d'un élément

Question

J'ai une forme qui génère le balisage suivant s'il y a une ou plusieurs erreurs lors de la soumission:

<ul class="memError"> 
    <li>Error 1.</li> 
    <li>Error 2.</li> 
</ul> 

Je veux mettre cette élément comme une fenêtre modale qui apparaît après soumettre, à fermer avec un clic. J'ai jquery, mais je ne peux pas trouver le bon événement pour déclencher la fenêtre modale. Voici le script que je utilise, adapté de an example I found here:

<script type="text/javascript"> 
//<![CDATA[ 
$(document).ready(function() { 
    $('.memError').load(function() { 
     //Get the screen height and width 
     var maskHeight = $(document).height(); 
     var maskWidth = $(window).width(); 

     //Set heigth and width to mask to fill up the whole screen 
     $('#mask').css({ 
      'width': maskWidth, 
      'height': maskHeight 
     }); 

     //transition effect 
     $('#mask').fadeIn(1000); 
     $('#mask').fadeTo("slow", 0.8); 

     //Get the window height and width 
     var winH = $(window).height(); 
     var winW = $(window).width(); 

     //Set the popup window to center 
     $(id).css('top', winH/2 - $(id).height()/2); 
     $(id).css('left', winW/2 - $(id).width()/2); 

     //transition effect 
     $(id).fadeIn(2000); 
    }); 
    //if close button is clicked 
    $('.memError').click(function(e) { 
     $('#mask').hide(); 
     $('.memError').hide(); 
    }); 
}); 
//]]> 
</script> 

J'ai styles établi pour #mask et .memError à peu près identique à la example, mais je ne peux rien apparaître quand je charge le ul.memError. Je ai essayé d'autres events en essayant de se débrouiller, mais je n'ai pas encore la portée de javascript nécessaire pour cela.

Quelqu'un peut-il me diriger dans la bonne direction?

Answer 1

si c'est une forme ancienne plaine présenter, puis il suffit de cocher $ (« memerror. ») De longueur.> 0 sur document.ready .. s'il est vrai, faire le reste. vous n'avez pas besoin d'ajouter un gestionnaire d'événements load car le ul est déjà chargé. Si c'est un ajax soumettre, alors vous devriez utiliser l'événement de succès de la jquery forms plugin

Answer 2

J'ai joué avec des événements en direct et autres, mais je n'arrive pas à trouver un moyen de le déclencher. Vous pouvez utiliser un peu de code en ligne lorsque vous insérez les nouveaux éléments pour déclencher un événement personnalisé.

Vous ne savez pas si cela correspond ou non à votre implémentation.

Answer 3

sont ces erreurs dans "memError" sont chargés en utilisant un ajax ou un chargement de page HTTP? Jetez un coup d'oeil à cet exemple, ne répondant pas à toutes vos questions mais peut vous donner quelques idées, et c'est pour un événement onclick cependant. Mais si vos erreurs sont affichées en utilisant ajax alors vous pouvez le changer lorsque les erreurs ajax sont chargées dans la page. Je vais essayer de le mettre à jour plus tard.

$(function() { 

$('#clickMe').click(function(event) { 
    var mytext = $('#myText').val(); 


    $('<div id="dialog">'+mytext+'</div>').appendTo('body');    
     event.preventDefault(); 

       $("#dialog").dialog({         
         width: 600, 
         modal: true, 
         close: function(event, ui) { 
           $("#dialog").remove(); 
           } 
         }); 
    }); //close click 
}); 


<h3 id="clickMe">Open dialog</h3> 
<textarea cols="0" rows="0" id="myText" style="display:none">Some hidden text display none</textarea> 

Answer 4

Il semble que vous essayez de vous abonner à l'objet faux dans l'exemple que vous avez donné. Essayez plutôt d'utiliser l'événement submit() de votre formulaire. Vous devez utiliser l'événement submit() au lieu d'un événement click sur un bouton de formulaire (ou tout autre élément) car l'utilisateur peut facilement soumettre le formulaire sans cliquer sur son bouton en appuyant sur Entrée lorsque vous remplissez le formulaire. Cela rend l'affichage de votre fenêtre modale plus fiable.

<script type="text/javascript"> 
$(document).ready(function() { 
    $('form').submit(function() {//<- Submit event 

     // ... 
     // Modal Window Code ommitted 
     // to make example code more clear 
     // ... 

     // From what I understand, the following line 
     // is the "magic" that makes the modal window display 
     // (I haven't tested this code) 
     $(id).fadeIn(2000); 
    }); 
}); 
</script> 

L'exemple ci-dessus souscrira à l'événement submit sur toutes les formulaires sur la page. Dans la plupart des cas, il n'y en a qu'un sur la page. Cependant, cela ne devrait pas faire beaucoup de différence.

Answer 5

Ce fut le déclencheur qui a résolu mon problème:

if ($('.memError').length > 0) { 
    $(function() { 
     // ... 
    }); 
} 

Merci Scott! Il s'agissait d'un ancien formulaire de soumission simple, avec le message d'erreur à venir après le chargement de la page HTTP, et if($('.myElement').length > 0) m'a permis de test for the existence of the error element.