[ajax] Logowanie

Mar · 22 Sierpnia 2008

Mam taki skrypt:

<xmp id="open_login">
				Dialog.confirm($('login').innerHTML, {className:"alphacube", width:400, 
								  okLabel: "login", cancelLabel: "cancel",
								  onOk:function(win){
									$('login_error_msg').innerHTML='Login or password inccorect';
									$('login_error_msg').show();

									Windows.focusedWindow.updateHeight();
									new Effect.Shake(Windows.focusedWindow.getId()); return false;}});
</xmp>

Pochodzący ze strony: https://prototype-window.xilinus.com/samples.html

..tylko nie wiem za bardzo jak go ugryźć, w jaki sposób przechwycić dane z formularza i podać je weryfikacji i jeśli są dobre przenieść na konkretną stronę?

Mar.

Mion · 23 Sierpnia 2008

Nie korzystam z prototype, ale IMHO ten przykład jest niekompletny i nie ma w tym obsługi AJAX.

Powinno to działać w ten sposób, że akcja z formularza skierowana jest na konkretny plik PHP, ale wywołany AJAX który sprawdza wartości pól tekstowych login, hasło jeśli zgadzają się np.z danymi z bazy rejestrujemy zmienne w sesji i wykonujemy przekierowanie usera na stronę dostępną po zalogowaniu.

Mar · 23 Sierpnia 2008

Nie powiem, ten przykład bardzo mi się spodobał, ale rzeczywiście nic z tego nie rozumiem...

Mar

garyoldman · 23 Sierpnia 2008

To jest część tylko odpowiedzialna za wyświetlenie okienka dialogowego z informacją, że 'Login or password inccorect' a logowanie użyto tutaj tylko jako przykład chyba. ustawiasz który button odpowiada za akcje ok al który za cancel oraz ustawiasz akcję na przycisk ok czyli co powinno się stać o tutaj onOk:function(win){//akcja na przycisk OK lub zaloguj}. Tam zapewne trzeba wstawić kod odpowiedzialny za wysłanie żądania do serwera AJAX'em i w zależności od odpowiedzi wykonać odpowiednią akcję.

napiszę na szybkiego. raczej nie zadziała bo nie testowałem i nie korzystałem z okien dialogowych, ale z grubsza jeżeli chodzi o sam AJAX to powinno być tak:

w ciało funkcji onOk:function(win) wpisz:

onOk:function(win){
new Ajax.Request('/login.php', {
 parameters: { login: $F('login'), pass: $F('haslo') },
 onSuccess: function(transport) {
var notice = $('login_error_msg');

if (transport.responseText == "OK") {
  notice.innerHTML='Zalogowany';
	}
else {}
  notice.innerHTML='Login or password inccorect';
	}

	notice.show();

	Windows.focusedWindow.updateHeight();
	new Effect.Shake(Windows.focusedWindow.getId()); return false;}
}

gdzie:

pole login ma id="login"

pole password ma id="haslo"

EDYTA:

aha jeszcze plik login.php powinien zwrócić np echo "OK"; jak logowanie się powiedzi lub cokolwiek jak się nie powiedzie.

Mar · 23 Sierpnia 2008

Kilka literówek było w skrypcie wyżej, poprawiłem je:

	<xmp id="open_login">
			Dialog.confirm($('login').innerHTML, {className:"alphacube", width:400, 
								  okLabel: "login", cancelLabel: "cancel",
								  onOk:function(win){
						new Ajax.Request('/login.php'), {
						parameters: { login: $F('name'), pass: $F('pass') },
						onSuccess: function(transport) {
							var notice = $('login_error_msg');

							if (transport.responseText == "OK") {

								notice.innerHTML='Zalogowany';
								notice.show(); 
								new Effect.Shake(Windows.focusedWindow.getId());
								}
							else {
								notice.innerHTML='Login or password inccorect';
								notice.show();		
								Windows.focusedWindow.updateHeight();
								new Effect.Shake(Windows.focusedWindow.getId()); return false;
								}

							notice.show();

							Windows.focusedWindow.updateHeight();
							new Effect.Shake(Windows.focusedWindow.getId()); return false;}
						}}});
	  </xmp>

.. ale niestety nie jest wcale sprawdzany warunek: if (transport.responseText == "OK")

ponieważ nic nie zwraca.

Mar.

garyoldman · 24 Sierpnia 2008

sprawdź czy:

masz w formularzy element div o id="login_error_msg"

plik login.php powinien wyglądać w skrócie tak:

<?php
$login = $_POST["login"];
$haslo = $_POST["haslo"];

if ($login=="administrator" && $haslo=="tajnehaslo")
{
 echo "OK";
}
else
{
echo "false";
}
?>

jeżeli masz tak to wpisz po każdej instrukcji jakiś alert() tak aby wiedzieć dokąd dojdzie skrypt np.

 
onSuccess: function(transport) {
 alert("1");
var notice = $('login_error_msg');
alert("2");
 if (transport.responseText == "OK") 
 {
	  alert("3");
	  .....

itd. napisz jaki błąd wypisuje firefox w Narzędzia ----> Konsola błędów

EDYTA:

pisane po paru drinkach i musiałem poprawić błędy

Mar · 24 Sierpnia 2008

Formularz:

<div class="alphacube_message">
	  <p><span id="login_error_msg" class="login_error" style="display: none;"> </span></p>
	  <div style="clear: both;"></div>
	  <p><span class="login_label">login</span> <span class="login_input"><input id="name" type="text"></span></p>
	  <div style="clear: both;"></div>
	  <p><span class="login_label">password</span> <span class="login_input"><input id="pass" type="password"></span></p>
	  <div style="clear: both;"></div>

</div>	   
<div class="alphacube_buttons">
<input value="login" onclick="Dialog.okCallback()" class="ok_button" type="button">
<input value="cancel" onclick="Dialog.cancelCallback()" class="cancel_button" type="button">	   
</div>

kod wstawiony do pliku:

 <div id="login" style="display: none;">
	  <p><span id="login_error_msg" class="login_error" style="display: none;"> </span></p>
	  <div style="clear: both;"></div>
	  <p><span class="login_label">login</span> <span class="login_input"><input type="text" id="name"></span></p>
	  <div style="clear: both;"></div>
	  <p><span class="login_label">password</span> <span class="login_input"><input type="password" id="pass"></span></p>
	  <div style="clear: both;"></div>
	</div>

	<div class="listing" style="display: none;" id="open_login_codediv">		
	  <xmp id="open_login">
			Dialog.confirm($('login').innerHTML, {className:"alphacube", width:400, 
								  okLabel: "login", cancelLabel: "cancel",
								  onOk:function(win){
						new Ajax.Request('/login.php'), {
						parameters: { login: $F('name'), pass: $F('pass') },
						onSuccess: function(transport) {
							var notice = $('login_error_msg');
								alert("1");	
							if (transport.responseText == "OK") {

								notice.innerHTML='Zalogowany';
								notice.show(); 
								new Effect.Shake(Windows.focusedWindow.getId());
								}
							else {
								notice.innerHTML='Login or password inccorect';
								notice.show();		
								Windows.focusedWindow.updateHeight();
								new Effect.Shake(Windows.focusedWindow.getId()); return false;
								}

							notice.show();

							Windows.focusedWindow.updateHeight();
							new Effect.Shake(Windows.focusedWindow.getId()); return false;}
						}}});
	  </xmp>
	</div>

..nie generuje nawet pierwszego alerta.

Mar.

garyoldman · 24 Sierpnia 2008

ok Mar zrobiłem sobie to na localu. prawie dwie godzinki zeszły bo głupie błędy robiłem

wrzucę gdzieś na serwerek niedługo i sobie zerkniesz jak działa. dam też linka do źródełek...

EDYTA:

ok wrzuciłem:

Przykład działania możesz zobaczyć tutaj: logowanie ajax

Link do spakowanego źródła: kod źródłowy

Mówię z góry, że jest to bardzo prosta wersja którą zawsze można ulepszyć, bardziej zabezpieczyć. Mam nadzieję, że pomogłem i że się przyda

Pozdrawiam!

Michał

Mar · 25 Sierpnia 2008

O to chodziło, wielkie dzięki!

Mar.

Mar · 25 Sierpnia 2008

Na wzór tego chciałem zrobić podobny formularz:

<div id="inny" style="display: none">
<p>
	<span id='login_error_msg' class="login_error" style="display:none"> </span>
</p>
<div style="clear:both">Treść</div>
<p>
	<span class="raport_input"><textarea name="tresc" rows=5 cols=40></textarea></span>
</p>	
<div style="clear:both"></div>
</div>

.. i dodałem nową funkcję:

		function raportuj() 
{

Dialog.confirm($('inny').innerHTML, { className:"alphacube", width:400, okLabel: "ok", cancelLabel: "cancel", onOk:function(win) 
{
	new Ajax.Request('/inny.php', 
	{
		parameters: { tresc: $F('tresc') },  
		onSuccess: function(transport) 
		{
			var notice = $('login_error_msg');
			alert("Bl±d w poł±czeniu z serwerem!");
			if (transport.responseText == "OK") 
			{
				return false;
			}
			else 
			{
				$('login_error_msg').innerHTML='blad!';
			}

			notice.show();

			Windows.focusedWindow.updateHeight();
			new Effect.Shake(Windows.focusedWindow.getId()); return false;
		},
		onFailure: function()
		{
			alert("Bl±d w poł±czeniu z serwerem!");
		}
	});
}});

}

.. niestety nie działa, mógłbyś jeszcze zerknąć co robię nie tak?

EDIT.

Mój błąd, w formularzu zapomniałem o ID.

Ale mam ostatnie pytanie, jak dodać ten efekt, że jak ktoś poda błędnie login, po paru sekundach okno logowania znika?

Tak jak tutaj:

Mar.

garyoldman · 25 Sierpnia 2008

Pierwsze co rzuciło mi się w oczy to to, że zamiast pola input dałeś textarea i wykrzacza się pewnie na tym

tresc: $F('tresc')

ta składnia pobiera wartość z inputów tylko a dla textarea wypróbuj coś takiego

tresc: $('tresc').innerHTML

EDYTA:

no to skoro tamto działa jednak to dobrze nie byłem tego pewny.

Co do następnego pytania to wieczorkiem coś napiszę...

garyoldman · 25 Sierpnia 2008

OK zrobiłem. Poniżej zmieniony fragment:

...
else 
{
notice.innerHTML='Login or password inccorect';
setTimeout('Windows.focusedWindow.close()', 2000);
}
...

zmianie uległ fragment w else gdzie doszła linijka:

setTimeout('Windows.focusedWindow.close()', 2000);

gdzie 2000 oznacza milisekundy. Zmień według uznania.

Pozdrawiam i miłego korzystania

Mar · 1 Września 2008

Wszystko ładnie śmiga, ale idąc dalej chciałem zrobić okienko, w którym ładowana jest zawartość jakiegoś pliku .html,

..wykorzystałem do tego alert:

function edytuj(id) 
		{
			Dialog.alert({url: "edytuj,"+id+".html", options: {method: 'get'}}, {className: "alphacube", width:540, okLabel: "ZAPISZ", okCancel: "Zapisz", onOk:function(win) 

			{	new Ajax.Request('/edit.php', 
			{
				parameters: { tresc: $F('tresc'), id: id },  
				onSuccess: function(transport) 
				{
					var notice = $('login_error_msg');

					if (transport.responseText == "OK") 
					{
						$('login_error_msg').innerHTML='OK!';
						notice.show();
						setTimeout ('Windows.focusedWindow.close()',600);
					}
					else 
					{
						$('login_error_msg').innerHTML='ERROR!';
						new Effect.Shake(Windows.focusedWindow.getId());
						alert('test');
					}

					Windows.focusedWindow.updateHeight();
					setTimeout ('Windows.focusedWindow.close()',600);

				},
					onFailure: function()
				{
					alert("Bl±d w poł±czeniu z serwerem!");
				}
			});
		}
	});
}

..i znów zaczęły się problemy. A mianowicie, do parametrów funkcji dodałem button Close, ale się nie wyświetla, oraz powiadomienia notice.show(); nie wyświetlają się, jak byś miał chwilę zerknij co zrobiłem nie tak.

Pozdrawiam,

Mar.

garyoldman · 1 Września 2008

Nie używałem nigdy tych bibliotek i nie bardzo teraz wiem o co chodzi gdzie do parametrów dodałeś ten "button Close" nie widzę nic w kodzie, który wkleiłeś. notice.show() powinien pokazać diva o id="login_error_msg".

Najlepiej odpal w FF konsole błędów (jakby co Narzędzia---->konsola błędów) kliknij tam wyczyść i odśwież swoją stronę i zobacz czy są jakieś błędy. Potem wykonaj to co chcesz zrobić. Jeżeli będą jakieś błędy to wklej co nie tak.

Dla zainteresowanych wcześniejsze linki z przykładem nie działają przeniosłem wszystko na bloga, który właśnie uruchomiłem Poniżej podaje nowe namiary:

- przykład logowania AJAX

- opis i źródło na moim poradniku webmastera

PS będę wdzięczy za linka do powyższego wpisu na blogu od każdej osoby, której kod się przyda

EDYTA:

literówki

Mar · 1 Września 2008

No to może inaczej, więc jak zrobić coś takiego, by zamiast okna logowania pojawiał się takie okienko, ale do niego była wczytywany byłby wczytywany jakiś plik, bo w tym przykładzie z logowaniem wstawiany jest div umieszczony na tej samej stronie.

Chcę to wykorzystać w ten sposób, otwieram takie okienko z parametrem, np ID...

coś jak to:

<center><a href="#" onclick="win1.show(1);">open window1</a></center>

<script type="text/javascript">
win1 = new Window('1', {className: "alphacube", title: "Sample1", width:200, height:150, top:70, left:100}); win1.getContent().innerHTML = "<h1>1</h1>";
</script>

Tylko wczytywać konkretną stronę do takiej tabelki, robić tam jakieś operacje na formularzu.

Mar.

Zaloguj się

[ajax] Logowanie

Rekomendowane odpowiedzi

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Zarchiwizowany

Polecamy

Współpracują z nami

Powiadomienie o plikach cookie