JavaScript Javascript und jQuery zusammenfügen

[basti9422]

Moin Leute,

ich erklär erstmal kurz die Funktionsweise des Skripts:

Das funktioniert:

Es soll prüfen, ob Burger (Ersatz zu Sternen) vergeben wurden und ob im Textfeld auch eine Rezension geschrieben wurde.
Je nachdem wie viele Burger vergeben wurden, die Anzahl in ein hidden input Feld eingeben, um es später übergeben zu können.


Das buggt rum:

Mit jQuery will ich jetzt, dass wenn man einen Burger + Rezension schreibt und dann auf "Bewerten" klickt, ein kurzer Ladebildschirm mit dem busy.gif erscheint und man nichts anderes anklicken kann (blockUI). Dieser verschwindet dann nach 3s.
Das Problem ist, der Ladebildschirm kommt auch, wenn man noch nichts eingegeben hat.
Also: Nichts eingegeben - Fehlermeldung kommt- man klickt auf OK - Ladebildschirm geht auf

Wie implementier ich das richtig, dass der Ladebildschirm auch erst kommt, wenn man alles ordnungsmäßig eingegeben hat?

        <script type="text/javascript">
            function chkFormular() 
            {
              if (document.Formular.bwtext.value == "") 
              {
                alert("Sie können keine leere Rezension abschicken!");
                document.Formular.bwtext.focus();
                return false;
              }
              if (document.Formular.vrate.value == "") {
                alert("Bitte bewerten Sie mit 1-5 Burgern!");
                return false;
                }                
            }
            function secret(el)
            {    
                var wert = el.value;
                document.Formular.vrate.value = wert;
                return;
            }    
        
            //jQuery: start block with message 
            $(document).ready(function() { 
                $('#postbw').click(function() { 
                    $.blockUI({ 
                        message: '<h4><img src="../pics/busy.gif" /> Ihre Bewertung wird gepostet!</h4>', 
                        timeout: 3000
                    }); 
                }); 
            }); 
            //end block with message
        </script>

 

[apnotix]

Da du nicht den kompletten Code gepostet hast, gehe ich jetzt mal davon aus, dass die Funktion "chkFormular" beim Submit des Forms aufgerufen wird.

An dieser Stelle (unterhalb der 2 IF Abfragen) machst du einfach dein Block UI aufruf.

<script type="text/javascript">
function chkFormular() {
     if (document.Formular.bwtext.value == "")  {
           alert("Sie können keine leere Rezension abschicken!");
           document.Formular.bwtext.focus();
           return false;
     }

     if (document.Formular.vrate.value == "") {
            alert("Bitte bewerten Sie mit 1-5 Burgern!");
            return false;
     }    

     $.blockUI({ 
             message: '<h4><img src="../pics/busy.gif" /> Ihre Bewertung wird gepostet!</h4>', 
             timeout: 3000
      }); 
}

function secret(el)
{    
   var wert = el.value;
   document.Formular.vrate.value = wert;
   return;
}    
</script>

 

[Speedy.]

Zunächst eine Grundsatzfrage: warum willst du dem Benutzer einen 3 sekündigen Ladebalken aufbrummen, wenn das auch in wenigen Millisekunden gespeichert werden könnte? Aus UX-Sicht ist das wenig sinnvoll.

Zu der technischen Frage: ohne das HTML-Markup zu kennen würde ich mal schätzen, dass du zwar per if-Bedingung prüfst, ob die Felder leer sind, dass Skript aber dennoch weiter rennt und am Ende auf dein jQuery-Code trifft. Und dann macht das Skript genau das Richtige: es führt bei Klick auf den Button den Ladebalken aus. Ich denke, es macht mehr Sinn, eine If-Else-Struktur zu verwenden, sprich:

if (value == '')
return false
else
ladebalken

 

[basti9422]

Vielen Dank! Hat geklappt!

Aber warum wird das Bild (budy.gif 32x32) nicht angezeigt?
Es hat vorher nur geklappt, wenn man nichts eingegeben hatte und dann auf Submit. Dann kam das gif.

Aber wenn man alles ordnungsgemäß eintippt kommt halt keim img.?!

Zunächst eine Grundsatzfrage: warum willst du dem Benutzer einen 3 sekündigen Ladebalken aufbrummen, wenn das auch in wenigen Millisekunden gespeichert werden könnte? Aus UX-Sicht ist das wenig sinnvoll.

Ich baue eine Homepage nur aus Übungszwecken. Also im Prinzip hast du Recht, aber zum Üben hab ich das jetzt so gelassen.

 

[[ChAoZ]]

Versucht mal mit vorladen.

<script type="text/javascript">
$(document).ready(function() { 
   imageBusy = $.jQuery('<img>', {
     'src' : '../pics/busy.gif',
     'alt' : 'Text'
  });
});

function chkFormular() {
     if (document.Formular.bwtext.value == "")  {
           alert("Sie können keine leere Rezension abschicken!");
           document.Formular.bwtext.focus();
           return false;
     }
 
     if (document.Formular.vrate.value == "") {
            alert("Bitte bewerten Sie mit 1-5 Burgern!");
            return false;
     }    
 
     showMessage();
}
 
function secret(el)
{    
   var wert = el.value;
   document.Formular.vrate.value = wert;
   return;
}

function showMessage () {
     $.blockUI({ 
             message: '<h4>' + imageBusy + ' Ihre Bewertung wird gepostet!</h4>', 
             timeout: 3000
      }); 
}
</script>

 

[basti9422]

Mit deiner Version erscheint gar kein Ladebildschirm mehr

Mit der anderen normalen Version, also die ich jetzt hatte, geht es im Firefox aber nicht im Chrome. ^^

 

[[ChAoZ]]

Und wie lautet die Fehlermeldung?
Ich wollte dir nur verdeutlichen wie ein Bild vorgeladen werden kann.