jQuery -> if else abfrage + neuladen problem

puur · 28.04.2010

Hi, ich hab hier ein einfaches Formular mit input feld das über jQ - ajax in die Datenbank eingetragen wird. Ich möchte nun bei success den zurückgelieferten wert prüfen und darauf hin meine Nachricht an den User anpassen (war die Eingabe erfolgreich oder nicht). Das klappt, allerdings möchte ich bei einem Fehler die Fehlernachricht anzeigen und nach ca. 10sekunden soll wieder das Formular geladen werden, das bekomm ich nicht hin.

Dazu hier mein Code:

INDEX.PHP

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Portfolio </title>
    <link rel="stylesheet" href="css/template.css" type="text/css" />
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function(){
            $("form#submitform").submit(function() {
            // we want to store the values from the form input box, then send via ajax below
            var fname     = $('#email').attr('value');

                $.ajax({
                    type: "POST",
                    url: "ajax.php",
                    data: "fname="+ fname,
                    success: function(result){
                        $('#formElemWrap').fadeOut('slow', function() {
                            if(result == '1') {
                                $('#postBack').append('Your email has been stored.');
                            }
                            if(result == '2') {
                                $('#postBack').append('Oops there was a problem storing your email.');
                            }
                            if(result == '3') {
                                $('#postBack').append('Please enter a valid email address.');
                            }
                            $('#postBack').fadeIn(1250);
                        });
                    }
                });
            return false;
            });
        });
    </script>

</head>
<body>
    <div id="container">
        <div id="header">
            <div id="logo"><img src="Bilder/logo.jpg" alt="Logo P" title="Logo P" /></div><!-- EOF logo -->
            <div id="nav">
                <div id="border-left">&nbsp;</div><!-- EOF border-left -->
                <div id="navBg">
                    <ul id="navigation">
                        <li id="home">Home</li>
                        <li id="service">Service</li>
                        <li id="aboutUs">About Us</li>
                        <li id="contact">Contact</li>
                        <li id="faq">FAQ</li>
                    </ul>
                </div><!-- EOF navBg -->
            </div><!-- EOF nav -->
        </div><!-- EOF header -->
        <div id="preview">


            <!-- LAUNCHING PAGE -->


            <div id="mainContentWrap">
                <div id="launch">
                    <div class="mainBoxLaunchingText">
                        <img src="Bilder/contBoxLaunchText.png" alt="We‘re not quite there yet - but we‘re getting there ! - and really want you to know when we‘re ready. Here‘s how to stay updated:" title="stay updated" />
                        <br />
                    </div>

                    <div id="form" style="display: block;">
                        <form id="submitform" method="post" style="display: block;" action="">
                            <div id="formElemWrap">
                                <div id="email1" style="float: left; margin-top: -4px; margin-right: 10px;"><label for="email" style="margin-top: -4px;"><img src="Bilder/email.png" alt="" /></label></div>
                                <div id="email2" style="float: left;"><input type="text" id="email" name="email" /></div>
                                <div id="sub" style="float: left; margin-top: -4px; margin-left: 10px;"><input type="image" src="Bilder/a_subscribe.png" id="submit" /></div>
                            </div>
                            <ul id="success"><li id="postBack" style="display: none">&nbsp;</li></ul>
                        </form>
                    </div>
                </div>
            </div><!-- EOF mainContentWrap -->
            <div id="sidebarWrap">
                <div class="sidebarBoxWrap">
                    <div class="sbWhiteBorder">&nbsp;</div>
                    <div class="sidebarTop">&nbsp;</div>
                    <div class="sidebarRep">&nbsp;</div>
                    <div class="sidebarFoot">&nbsp;</div>
                </div><!-- EOF sidebarBoxWrap -->
            </div><!-- EOF sidebarWrap -->

    </div><!-- EOF container -->
</body>
</html>

Ajax.php

PHP:

<?php
    include ("db/database.php");
    $database = new database();

    // CLIENT INFORMATION
    $fname        = htmlspecialchars(trim($_POST['fname']));
    $pattern = '/^[^@]+@[a-zA-Z0-9._-]+\.[a-zA-Z]+$/';

    if(preg_match($pattern, $fname)) {
        $addClient  = "INSERT INTO launch (email) VALUES ('$fname')";
        $set = $database->setQuery($addClient);
        if($set) {
            $success = 1;
            echo $success;
        } else {
            $success = 2;
            echo $success;
        }
    } else {
        $success = 3;
        echo $success;
    }
?>

Mondfrau · 28.04.2010

AW: jQuery -> if else abfrage + neuladen problem

hallöle...

hab ja nicht ganz so viel ahnung davon... aber ich würde in der index.php bei den 3 if-abfragen stattdessen ein switch case verwenden...

grüße
mondfrau

cebito · 28.04.2010

AW: jQuery -> if else abfrage + neuladen problem

Deine if-Abfragen sind wirklich nicht schön, zumal immer alle durchlaufen werden, auch wenn die erste schon true ist. Also, entweder "else", oder ne "switch-case" (break nicht vergessen) wie schon erwähnt oder gar nichts abfragen. Geht nämlich auch so, erstell ein Array mit deinen Fallantworten:

HTML:

var message = new Array('Your email has been stored.','Oops there was a problem storing your email.','Please enter a valid email address.');

und dann gibst du den jeweiligen Text aus:

HTML:

$('#postBack').append(message[result]);

musst natürlich schauen, das du dann 0,1 usw. übergibst oder result-1 schreibst.
Und zu deinem eigentlichen Problem, wie wärs mit dem naheliegenden?

HTML:

$('#postBack').fadeIn(1250,function(){/*warte 10 sek und mach dann was anderes*/});

Die function kannst dir ja jetzt selbst schreiben

Duddle · 28.04.2010

AW: jQuery -> if else abfrage + neuladen problem

Das sollte doch mit .delay() gut machbar sein. Formular ausblenden, Fehlermeldung einblenden, Delay von 10s, Fehlermeldung ausblenden, Formular einblenden.

Duddle

puur · 28.04.2010

AW: jQuery -> if else abfrage + neuladen problem

ah cool das mit dem Array gefällt mir

also ist bei jQuery der numArray index: 0,1 : 0,2 : 0,3 usw. ?

sokie · 28.04.2010

AW: jQuery -> if else abfrage + neuladen problem

warum nicht einfach

Code:

var msg = new Array(
'',
'Your email has been stored.',
'Oops there was a problem storing your email.',
'Please enter a valid email address.'
);

und

Code:

$('#postBack').append(msg[result]);

cebito · 28.04.2010

AW: jQuery -> if else abfrage + neuladen problem

puur schrieb:
ah cool das mit dem Array gefällt mir also ist bei jQuery der numArray index: 0,1 : 0,2 : 0,3 usw. ?

Nein alle Arrays (in den mir bekannten Sprachen) werden, sofern nicht anders angegeben so, beginnend mit 0 und dann 1, 2, 3, 4,............,x numeriert.

Edith sagt, hab ich mich wohl zu undeutlich ausgedrückt oben, habs grad selbst gesehn

puur · 28.04.2010

AW: jQuery -> if else abfrage + neuladen problem

ou ja okay.. da hab ich das mit dem 0,1 falsch verstanden

also ich muss jetzt aber leider zugeben das ich das mit dem delay nicht hinbekomme, habs mit delay und setTimeout probiert hat leider beides nicht geklappt. zudem ist mir noch aufgefallen das wenn ich das form nach einer fehlermeldung erneut abesende ich 2 fehlermeldungen hintereinander bekomme. (Please enter a valid email address.Please enter a valid email address.)

also ich bin noch nicht dahinter gestiegen vielleicht kann mir ja nochmal jemand unter die arme greifen

HTML:

    <script type="text/javascript">
        $(document).ready(function(){
            $("form#submitform").submit(function() {
            // we want to store the values from the form input box, then send via ajax below
            var fname     = $('#email').attr('value');
            var message      = new Array('Your email have been stored.', 'Oops there was a problem saving your email.', 'Please enter a valid email address.');
                $.ajax({
                    type: "POST",
                    url: "ajax.php",
                    data: "fname="+ fname,
                    success: function(result){
                        $('#formElemWrap').fadeOut('slow', function() {
                            $('#postBack').append(message[result-1])
                        });

                        $('#postBack').fadeIn(1250);
                        $setTimeout(function(){
                            $('#postBack').fadeOut('slow', function(){
                                $('#formElemWrap').fadeIn('slow');
                            });
                        }, 5000);
                    }
                });
            return false;
            });
        });
    </script>

*EDIT sorry war falscher code nochma den neuen reingestellt.

cebito · 28.04.2010

AW: jQuery -> if else abfrage + neuladen problem

Erstmal, wenn du statt ".append" (zu deutsch "anhängen") ".text" verwendest

Den Rest muss ich mir grad mal in Ruhe anschauen.

puur · 28.04.2010

AW: jQuery -> if else abfrage + neuladen problem

hmm cebito erstma danke für deine Hilfe, das mit dem setTimeout habe ich hinbekommen ich musste einfach nur das $ vorm setTimeout entfernen das gehört da garnicht hin

für die doppelte Fehlermeldung brauche ich aber hilfe.

HTML:

                        setTimeout(function(){
                            $('#postBack').fadeOut('slow', function(){
                                $('#formElemWrap').fadeIn('slow');
                            });
                        }, 5000);

Okay einwandfrei mit .text funktionierts. Vieelen dank für die hilfe das war ganz schön anstrengend fürs erste jquery projekt

cebito · 28.04.2010

AW: jQuery -> if else abfrage + neuladen problem

puur schrieb:
hmm cebito erstma danke für deine Hilfe, das mit dem setTimeout habe ich hinbekommen ich musste einfach nur das $ vorm setTimeout entfernen das gehört da garnicht hin

Okay einwandfrei mit .text funktionierts. Vieelen dank für die hilfe das war ganz schön anstrengend fürs erste jquery projekt

Dann ist ja alles in Butter :daumenhoch

::lol: