Pomoć oko login forme PHP+jQuery

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

Treba mi pomoć pošto radim u Javascriptu i PHP-u.
Naime moj Javascript kod koji sam "maznuo" sa interneta izgleda ovako:

<script> $(document).ready(function() {    $("#submit").click(function() {           var action = $("#login").attr('action');       var form_data = {          username: $("#username").val(),          password: $("#password").val(),          is_ajax: 1       };       $.ajax({          type: "POST",          url: action,          data: form_data,             success: function(response)          {                if(response == 'success')                      $("#login").slideUp('slow', function() {                         $("#message").html("<div>Prijava je uspešna!</div><meta>");                      });                   else                      $("#message").html("<div>Pogrešno korisničko ime i šifra!</div>");                   }                });              return false;    });     }); </script>

PHP forma izgleda ovako:

if(isset($_REQUEST['is_ajax']) && $_REQUEST['is_ajax'])    {       $username = $_REQUEST['username'];       $password = $_REQUEST['password'];              if($username == 'demo' && $password == 'demo')       {          echo "success";          }    }

a HTML ovako:

<div>   <h1>Login Form</h1>   <form>     <p>       <label>Username: </label>       <input>     </p>     <p>       <label>Password: </label>       <input>     </p>     <p>       <input>     </p>   </form>     <div></div> </div>

A to sve zajedno izgleda ovako: http://blog.webwizo.com/demo/login_jquery_ajax/

Dodao sam malo i CSS3 pa izgleda super. Ovo koristim za ulazak u administrativni panel na jednom mom CMS-u ali ako bi mi neko od vas prijatelja hteo pomoći da dogradim u jQuery poruku i formu gde će pisati obaveštenje: "Polja nisu popunjena".

jQuery najslabije poznajem ali ako treba zauzvrat pomoć oko HTML, PHP, CSS tu sam...
Hvala!

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

<script> $(document).ready(function() {    $("#submit").click(function() {     var username = $("#username").val();     var password = $("#password").val();     if (username == "" || password = "") {     $("#message").html("<div>Morate uneti i korisničko ime i lozinku!</div>");     return;     }       var action = $("#login").attr('action');       var form_data = {          username: username,          password: password,          is_ajax: 1       };       $.ajax({          type: "POST",          url: action,          data: form_data,             success: function(response)          {                if(response == 'success')                      $("#login").slideUp('slow', function() {                         $("#message").html("<div>Prijava je uspešna!</div><meta>");                      });                   else                      $("#message").html("<div>Pogrešno korisničko ime i šifra!</div>");                   }                });               return false;    });     }); </script>

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

Ne radi na žalost. Umesto da unutar koda odradi poziv za PHP stranicu, on se prebaci na login.php

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

Promeni u HTML-u vrstu dugmeta iz "submit" u "button"

• 1Ovo se svidja korisniku: igorpan
  
  Registruj se da bi pohvalio/la poruku!

Napisano: 12 Okt 2012 15:18

igorpan ::Promeni u HTML-u vrstu dugmeta iz "submit" u "button"

Svaka čast! Radi!
Još mi je malo konfuzan jQuery, neke sitnice znam ali nisam ulazio u dublja programiranja.
Sad kako se sve više traži moraću se malo više posvetiti jQuery-u.
Hvala ti!

Dopuna: 12 Okt 2012 15:34

Na kraju evo i moje konačne forme.
Shvatio sam sintaksu i još sam malo "unapredio" kod.

<script> $(document).ready(function() {    $("#submit").click(function() {     var username = $("#username").val();     var password = $("#password").val();    if (username == "" & password == "")    {       $("#message").fadeTo(0, 0);       $("#message").fadeTo("slow", 1).html("<center><div>Morate uneti i korisničko ime i šifru!</div></center>");       return;    }    else if (username == "")    {       $("#message").fadeTo(0, 0);       $("#message").fadeTo("slow", 1).html("<center><div>Zaboravili ste uneti korisničko ime!</div></center>");       return;    }    else if(password == "")    {       $("#message").fadeTo(0, 0);       $("#message").fadeTo("slow", 1).html("<center><div>Zaboravili ste uneti šifru!</div></center>");       return;    }       var action = $("#login").attr('action');       var form_data = {          username: username,          password: password,          is_ajax: 1       };       $.ajax({          type: "POST",          url: action,          data: form_data,             success: function(response)          {           $("#message").fadeTo(0, 0);                if(response == 'success')                      $("#login").slideUp('slow', function() {                         $("#message").fadeTo("slow", 1).html("<meta><center><div>Uspešno ste se prijavili.<br>Molimo sačekajte koji tren da verifikujemo podatke.</div></center>");                      });                   else                      $("#message").fadeTo("slow", 1).html("<center><div>Vaš e-mail ili šifra nisu ispravni.<br>Unesite pravilno korisničko ime i šifru.</div></center>");                   }                });               return false;    }); }); </script>

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

jQuery je jako jednostavan, tj i napravljen je da pojednostavi manipulisanje HTML elementima preko javascripta. Jako ćeš se brzo navići i videti koliko su neke stvari za koje si ranije morao da pišeš cele funkcije sada jednostavnije. Da ne pominjem "chaniability" tj vezivanje stvari.

Recimo $("#elementId").fadeIn(500).animate({ left : 300 },500).animate({color : #F00},500).fadeOut(500)

Zamisli koliko bi koda morao preko "čistog" javascripta da pišeš da bi napravio ovako element koji se polako pojavi pa proleti po stranici pa polako pretopi boju u crvenu pa iščezne.

CSS3 tu pomaže, ali nije niti gotov niti podržan još svuda

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

Ma Jquery je smešan, svaka metoda sama objasni šta radi...

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

Jeste smešan i jednostavan ali mene zeza ponekad kada nešto napišem pa neće da radi a nema nikakav DEBUG da znam gde sam pogrešio. Sa PHP-om je bar lako kada pogrešiš ispiše ti i linije i gde je grešlka a jQuery prosto ne radi.

Sad opet se vraćam na ovu priču, na FireFox i IE mi ne radi refresh. Ja sam ubacio običan HTML refresh ali ne radi. Pa sam ubacio i u jQuery-u refresh opciju ali ne radi. Šaljem opet moju "dopingovanu" skriptu.

<script> $(document).ready(function() {    $("#submit").click(function() {     var username = $("#username").val();     var password = $("#password").val();    if (username == "" & password == "")    {       $("#message").fadeTo(0, 0);       $("#message").fadeTo("slow", 1).html("<center><div>Morate uneti i korisničko ime i šifru!</div></center>");       return;    }    else if (username == "")    {       $("#message").fadeTo(0, 0);       $("#message").fadeTo("slow", 1).html("<center><div>Zaboravili ste uneti korisničko ime!</div></center>");       return;    }    else if(password == "")    {       $("#message").fadeTo(0, 0);       $("#message").fadeTo("slow", 1).html("<center><div>Zaboravili ste uneti šifru!</div></center>");       return;    }       var action = $("#login").attr('action');       var form_data = {          username: username,          password: password,          is_ajax: 1       };       $.ajax({          type: "POST",          url: action,          data: form_data,             success: function(response)          {           $("#message").fadeTo(0, 0);                if(response == 'success')                      $("#login").slideUp('slow', function() {                         $("#message").fadeTo("slow", 1).html("<meta><center><div>Uspešno ste se prijavili.<br>Molimo sačekajte koji tren da verifikujemo podatke.</div></center>");                                       /* OVDE SAM UBACIO REFRESH DEO */                 $("#submit").click(function() {                 delay(4000).location.reload();             });            /* Treba da posle 4 sekunde osveži index.php */                      });                   else                      $("#message").fadeTo("slow", 1).html("<center><div>Vaš e-mail ili šifra nisu ispravni.<br>Unesite pravilno korisničko ime i šifru.</div></center>");                   }                });               return false;    }); }); </script>

Treba da posle 4 sekunde osveži index.php
Nervira me već...

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

Aj pokušaj ovako umesto:
 /* OVDE SAM UBACIO REFRESH DEO */                 $("#submit").click(function() {                 delay(4000).location.reload();             });            /* Treba da posle 4 sekunde osveži index.php */

ubaci ovo:

setTimeout(function(){location.reload();},4000);

Ovako kako si ti napisao da bi odradio relaod stranice korisnik bi ponovo morao da klikne na dugme i čudi me kako i radi u nekim browser-ima.

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

Ima debug preko "Firebug" plugina za Firefox, dok Chrome/Chromium imaju ugrađen u sebi. Ja sam nekako navikao da čak i PHP debugujem preko "echo" naredbe pa za javascript koristim "console.log" odnosno "console.debug" kada testiram na Firefoxu.

Što se tiče konkretno novog problema,jQuery vidim da nisi skontao još potpuno
Ne možeš da pozoveš "delay(4000).location.reload();" tek tako. Sve jQuery funkcije moraju biti pozvane na jQuery objektu tj na "$".

Ovo što ti je cvrle predložio je tačno ono što ti treba. Tebi je cela funkcija već event handler za klik na submit dugme, nema potrebe opet da ubacuješ '$("#submit").click'.

Da malo zakomplikujem priču, zatrebaće ti pre ili kasnije: vezivanje funkcija za evente na elementima u novijim verzijama jQuery (mislim od 1.7+) je kumulativno što bi značilo:
$("#elementId").click(function() {     alert("Prvi"); }); $("#elementId").click(function() {     alert("Drugi"); });
Pri kliku na element taj će ti se pojaviti oba alerta, dok bi se u starijim verzijama samo poslednja funkcija pokrenula. U novom ukoliko želiš da očistiš prethodno vezane funkcije moraš koristiti ".unbind".

Nije vezano za tvoj problem konkretno, ali je nešto oko čega sam se ja dugo lomio dok nisam saznao da su to promenili pa ne može da škodi