JQuery: Wie auslösen wir ein modales Fenster nur von der Existenz eines Elements

Question

Ich habe ein Formular, das das folgende Markup generiert, wenn ein oder mehr Fehler auf ist einreichen:

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

Ich mag diese Einstellung vornehmen, Element als modales Fenster, das nach dem Senden erscheint und mit einem Klick geschlossen wird. Ich habe jquery, aber ich kann das richtige Ereignis nicht finden, um das modale Fenster auszulösen. Hier ist das Skript Ich verwende, angepasst von 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> 

I Stile für #mask und .memError ziemlich identisch mit dem example gesetzt habe, aber ich kann nichts bekommen zu erscheinen, wenn ich die ul.memError laden. Ich habe versucht, andere events versuchen durchzumogeln, aber ich habe noch nicht den Zugriff von Javascript für diese benötigt.

Kann mir jemand in die richtige Richtung zeigen?

Answer 1

wenn dies ein einfaches altes Formular abgesendet hat, dann nur $ überprüfen ('memerror'). Länge> 0 auf document.ready .. wenn es wahr ist, tut dann den Rest. Sie müssen nicht einen Load-Event-Handler hinzufügen, da die UL bereits geladen ist. Wenn es ein Ajax ist, dann sollten Sie das Erfolgsereignis des jquery forms plugin

Answer 2

Ich spielte mit Live-Events und so, aber ich kann einfach nicht einen Weg finden, um es auszulösen. Sie können ein wenig Inline-Code verwenden, wenn Sie die neuen Elemente einfügen, um ein benutzerdefiniertes Ereignis auszulösen.

Nicht sicher, ob das zu Ihrer Implementierung passen würde oder nicht.

Answer 3

sind diese Fehler in "memError" mit einigen Ajax oder HTTP-Seitenlade geladen?

Werfen Sie einen Blick auf dieses Beispiel, das nicht alles beantwortet, was Sie brauchen, aber vielleicht ein paar Ideen gibt, und es ist für ein onclick-Ereignis. Aber wenn Ihre Fehler mit einigen Ajax angezeigt werden, dann können Sie es ändern, wenn die Ajax-Fehler in die Seite geladen werden. Ich werde versuchen, es später zu aktualisieren.

$(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

verwenden. Es sieht so aus, als ob Sie versuchen, das Objekt in dem von Ihnen angegebenen Beispiel falsch zu abonnieren. Versuchen Sie stattdessen, das submit() Ereignis Ihres Formulars zu verwenden. Sie sollten das Ereignis submit() anstelle eines Klickereignisses auf einer Formularschaltfläche (oder einem anderen Element) verwenden, da der Benutzer das Formular problemlos übergeben kann, ohne auf die Schaltfläche zu klicken, indem Sie beim Ausfüllen des Formulars die Eingabetaste drücken. Dies macht Ihre modale Fensteranzeige zuverlässiger.

<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> 

Das obige Beispiel abonnieren Sie den submit Ereignis auf alle Formen auf der Seite. In den meisten Fällen gibt es nur einen auf der Seite. Es sollte jedoch in keiner Weise viel bewirken.

Answer 5

Dies war der Auslöser, dass mein Problem gelöst:

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

Dank Scott! Dies war eine einfache alte Formularübergabe, mit der Fehlermeldung, die nach dem Laden der HTTP-Seite kam, und if($('.myElement').length > 0) aktivierte mich zu test for the existence of the error element.