jQuery div bei korrektem PW ausblenden

[[Dirk]]

Hallo

Ich bin ein Anfänger was javascript und jQuery angeht. aber nun zu meinem Problem:

Ich habe eine Login, in dem man sich per ajax, php usw. anmelden kann. Bei erfolgreicher Anmeldung soll das

<div id="divlogin">...</div>

ausgeblendet werden, sonst nicht.

wenn ich jetzt aber

$(document).ready(function(){
$("#loginButton").click(function() {
$("#divlogin").slideUp(1000);
});
});

verwende, wird das div natürlich bei jedem Click auf den Anmeldebutton ausgeblendet, was ja nicht nein soll.

Mein Versuch den Befehl

$("#loginButton").click(function() {
$("#divlogin").slideUp(1000);
});

einfach in meine HTTPREQUEST() Funktion aufzunehmen funktioniert nicht. jQuery braucht wohl immer ein Event, wie click() o.ä. Hier noch ein Auszug aus meiner HTTPRequest Funktion:

[...]
var url = "login.php";
var name = document.loginform.name.value;
var pwd = document.loginform.pwd.value;
xmlHttp.open("POST", url, false);
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.send("name="+name+"&pwd="+pwd);
var answer = xmlHttp.responseText; // IN ANSWER STEHT BEI ERFOLGREICHEM LOGIN DER USERNAME
if(answer==name) {
document.getElementById("LoginStatusText").innerHTML = "<p>Anmeldung erfolgreich <br> <a href='logout.php'>Abmelden</a></p>";
document.getElementById("ShowUsername").innerHTML = answer;
// ******* HIER ******* GEHT ABER NICHT
$("#loginButton").click(function() { $("#divlogin").slideUp(1000); });
} else {
document.getElementById("LoginStatusText").innerHTML = "<p>Anmeldung fehlgeschlagen!</p>";
}
[...]


Danke für eure Hilfe

Dirk (der hofft, dass klar ist was ich meine :) )


PS: Ich weiß, die Überprüfung, ob der Login erfolgreich war oder nicht ist auch nicht gerade schön, aber wie übergebe ich von php an javascript weiter, ob der login ok war...

Fragen über Fragen .... :)

[[Dirk]]

Sorry, mit

$(document).on("click", function() {
$("#divlogin").slideUp(1000);
});

hat es wohl funktioniert... werde morgen weiter testen...

cu

[Gohan]

Wenn du schon jQuery bentutzt, dann kannst du auch alles darauf umstellen und nicht diesen furchtbaren Mischmasch machen.



$('#id_der_form').submit(function () {
//Vielleicht noch alle Felder der Form deaktivieren? Sonst kann der benutzer die Form mehrfach abschicken!
$(this).find(':input:not(:disabled)').prop('disabled',true);
$.post('login.php', { 'name' : $('#id_username').val(), 'password' : $('#id_passwort').val()}, function (data) {
if(data = $('#id_username).val()) {
$('#divlogin').slideUp('fast');
$('#LoginStatusText').empty().html('<p>Anmeldung erfolgreich <br> <a href='logout.php'>Abmelden</a></p>');
$('#ShowUsername').empty().html(data);
} else {
$('#LoginStatusText').empty().html('<p>Anmeldung fehlgeschlagen.</p>');
$('#id_der_form').find(':input:disabled').prop('disabled',false);
}
});
return false;
});

[[Dirk]]

Ok, das sieht besser aus. Aber einiges davon verstehe ich noch nicht ganz. Werd's mir nachher mal ansehen :) danke dir

Habe jetzt noch ein weiteres Problem. Und zwar versteht anscheinend der Safari mobile nicht jquery .on . Aber evtl ist es ja dann gelöst :)

[Gohan]

;9384826']Ok, das sieht besser aus. Aber einiges davon verstehe ich noch nicht ganz. Werd's mir nachher mal ansehen :) danke dir

Habe jetzt noch ein weiteres Problem. Und zwar versteht anscheinend der Safari mobile nicht jquery .on . Aber evtl ist es ja dann gelöst :)

Um das klarzustellen, wie jQuery funktioniert.

$('irgend ein css selector').click(function () {
alert('Hilfe, ich wurde geklickt!');
});


Mit diesem Befehl, bindest die Funktion, die innerhalb von function() {} angegeben ist, an das Click-Event aller Elemente, auf welche der CSS Selector zutrifft. Zu beachten ist, das dabei nur Elemente betroffen sind, welche zur Zeit der Ausführung des Skriptes im DOM vorhanden waren (JavaScript wird bereits während des Ladens einer Seite geparsed und ausgeführt).

Daher ist es gang und gebe, $(document).ready(function() {}); zu verwenden, da der Code innerhalb von function() {} hier erst ausgeführt wird, wenn das Dokument vollständig geladen wurde.

Was du jetzt zwei mal falsch gemacht hast:

Ich vermute mal, dass du dir deinen händischen AJAX-Aufruf in einer Funktion zusammengebaut hast, ähnlich so:

function meineFUnktion() {
//Super toller code für Ajax Aufruf

$('irgend ein css selector').click(function () {
alert('Hilfe, ich wurde geklickt!');
});
}

Hier liegt nun das Problem, dass das Click-Event auf deinen Button erst NACH einem Click gebunden wird. Richtig wäre hier gewesen einfach nur die FadeOut()-Funktion an dem Element aufzurufen.

$('irgend ein css selector').fadeOut();


Deine zweite Korrektur hat es nur verschlimmbessert, warum das überhaupt funktioniert hat weiß ich nicht. Mit $(document).on('click', function() {}); musst du nur irgendwo ins Dokument klicken, und deine Box verschwindet. Da du das aber auch innerhalb deiner Funktion zum Zusammenbauen des AJAX Aufrufes platziert hast, vermute ich mal einen Bug in jQuery. Eigentlich hätte das ganze nicht funktionieren sollen.

[[Dirk]]

Gohan, ich danke dir vielmals für deine sehr ausführliche Antwort. Super!!!

Aber leider ist mir das ganze noch nicht ganz klar. An welche Stelle müsste ich jetzt deine

$('#loginform').submit(function () {...}

Funktion schreiben? In die $(document).ready(function(){...} ??

Weil irgendwie will das Ganze nicht funktionieren. Und durch welches Event wird deine Funktion aufgerufen? Muss ich in der Form den Input auf type="submit" setzen? Wenn ich jetzt auf den Button Klicke, erscheint eine weiße Seite mit dem Benutzernamen bei erfolgreicher Anmeldung :(

Und wie läuft das jetzt mit dem ajax Aufruf? Das erledigt jetzt wohl deine Funktion.

Bitte nochmal kurz um Antwort :) Aber bis ich ganz durchsteige wird wohl noch einige Zeit vergehen :)


<input id="loginButton" type="submit" value="Anmelden">

[Gohan]

;9385211']Gohan, ich danke dir vielmals für deine sehr ausführliche Antwort. Super!!!

Aber leider ist mir das ganze noch nicht ganz klar. An welche Stelle müsste ich jetzt deine

$('#loginform').submit(function () {...}

Funktion schreiben? In die $(document).ready(function(){...} ??

Weil irgendwie will das Ganze nicht funktionieren. Und durch welches Event wird deine Funktion aufgerufen? Muss ich in der Form den Input auf type="submit" setzen? Wenn ich jetzt auf den Button Klicke, erscheint eine weiße Seite mit dem Benutzernamen bei erfolgreicher Anmeldung :(

Und wie läuft das jetzt mit dem ajax Aufruf? Das erledigt jetzt wohl deine Funktion.

Bitte nochmal kurz um Antwort :) Aber bis ich ganz durchsteige wird wohl noch einige Zeit vergehen :)


<input id="loginButton" type="submit" value="Anmelden">

Genau, die kommt in die $(document).ready(function() {});

Wenn du auf die Login-Seite kommst, dann funktioniert das Skript noch nicht richtig. Aus der Entfernung ist das immer schwer zu sagen, was dann aber genau nicht stimmt. Kann ein Fehler von mir sein (hab das nur aus dem Kopf heruntergetipt, ohne zu testen), oder du hast was an der falschen stelle ersetzt.

Genau, die $.post-Funktion ersetzt deinen AJAX Aufruf. Das gute an jQuery ist die super ausführliche Doku auf jquery.com. Dort einfach einlesen, damit werden so ziemlich alle Fragen geklärt.

EDIT:

Und am besten Tools wie Firebug benutzen, die dann auch JavaScript-Fehler in der Konsole ausgeben können.

[[Dirk]]

Ok, ich hatte heute leider keine Zeit. Ich werd's mir morgen mal anschauen. Auch jquery.com. Aber falls ich noch fragen hab, komm ich auf dich zurück, wenns recht ist :)


Nochmals Danke :) Es funktioniert alles. Und es ist auch alles klarer strukturiert und kürzer :)

[[Dirk]]

Ich hab da noch mal ne Frage und hoffe, dass sie hier noch gesehen wird!!

Wenn ich eine Anmeldescript habe und Benutzer mit verschiedenen Rechten, die in einer DB abgespeichert sind, wie sicher ist das dann, wenn ich mir die USER_RECHTE (zb 100, 200, 1000,...) als response mittels ajax zurückgeben lasse und sie dann per javascript analysiere??

Weil je nachdem was USER_RECHTE beinhaltet, wird die Seite anders angezeigt. Bzw. es werden bestimmte DIVS sichtbar.

Bisher gebe ich von meiner login.php die USER_RECHTE per echo ... zurück.

d.h. 0 = Nicht angemeldet, 100 = Admin, 1000=gast usw

und werte diese dann per javascript aus. Diese Lösung erscheint mir nicht sehr schön und irgendwie auch nicht sehr sicher !!! :(

Und wie kann ich per php an javascript mehrere Variablen übergeben?

Danke :)