Navigacija
Lista poslednjih: 16, 32, 64, 128 poruka.

Jquery alert pomoc ili predlog

[es] :: Javascript i AJAX :: Jquery alert pomoc ili predlog

[ Pregleda: 2488 | Odgovora: 13 ] > FB > Twit

Postavi temu Odgovori

Autor

Pretraga teme: Traži
Markiranje Štampanje RSS

jaksap

Član broj: 317595
Poruke: 9



Profil

icon Jquery alert pomoc ili predlog17.09.2013. u 00:24 - pre 129 meseci
Za upozorenje npr. da mi neko polje u formi mora biti popunjeno koristio sam
Code (php):

if(empty($ime)){
          $error = 'Polje ime mora biti popunjeno!';
          }
 


i to mi se ispisuje kad mi polje Ime ostane prazno a ja kliknem Submit preko koda
Code:

<?php echo $error; ?>

Sad sam hteo da umesto toga stavim neki Jquery plugin. Pokusao sam sa Zebra Dialog-om al nisam uspeo. Alert Zebra Dialog-a mogu da pozovem na click pomocu
Code:

<a href="javascript:void(0)" id="example1">click</a>

al ne znam kako da mi se alert pojavi npr. kad mi je prazno polje Ime.
Znam da mogu pozvati alert sa
Code (php):

if(empty($ime)){
            echo ("<script>window.alert('". $poruka ."')</script>");
       }
 

al mi se ne svidja izgled. Da li neko zna kako da postavim Zebra Dialog ili neki koji slicno izgleda
 
Odgovor na temu

deZio
Inđija

Član broj: 150608
Poruke: 345
*.dynamic.isp.telekom.rs.



+38 Profil

icon Re: Jquery alert pomoc ili predlog17.09.2013. u 07:14 - pre 129 meseci
Ukoliko koristiš jQuery, možeš koristiti $('input.obavezno').blur koji se poziva svaki put kad se napusti polje za unos teksta. Tada se proverava da li je to polje prazno. Ako jeste, prikazuje se podrazumevani alert za javascript. Kao što možeš videti stavio sam da se to odrađuje samo za input polja koja imaju klasu obavezno, kako ti se alert ne bi pojavljivao za inpute koji mogu ostati prazni. Ako ne želiš nijedan input da bude prazan, onda možeš obrisati klasu.

Code (html):

<input type="text" class="obavezno" />
 


Code (javascript):

$('input.obavezno').blur(function(){
    if($(this).val() == ''){
        $.Zebra_Dialog('Ovo polje mora biti popunjeno!');
    }
});
 


Takođe možeš na primer obojiti border inputa kada se prikaže alert. Dodaj samo klasu ovako:

Code (javascript):

$('input.obavezno').blur(function(){
    if($(this).val() == ''){
        $(this).addClass('greska-praznopolje');
        $.Zebra_Dialog('Ovo polje mora biti popunjeno!');
    }
});
 

Code:

.greska-praznopolje{
    border: 1px solid red;
}


Možeš istu proveru odraditi i kad se pokuša submit forme:
Code (javascript):

$('form').submit(function(e){
    e.preventDefault();
    $(this).find('input.obavezno').each( function(){
        if($(this).val() == ''){
            $(this).addClass('greska-praznopolje');
            $.Zebra_Dialog('Ovo polje mora biti popunjeno!');
            return false;
        }
    });
});
 


[Ovu poruku je menjao deZio dana 17.09.2013. u 08:25 GMT+1]
 
Odgovor na temu

jaksap

Član broj: 317595
Poruke: 9



Profil

icon Re: Jquery alert pomoc ili predlog17.09.2013. u 08:29 - pre 129 meseci
Dejane, hvala na detaljnom objašnjenju, al meni kao početniku ni sa ovim nije uspelo da odradim ovo. Evo koda moje stranice u kojoj sam pokušao da mi input ne može ostati prazan
Code (html):

<html>
    <head>
        <link rel="stylesheet" href="reset.css" type="text/css">
        <link rel="stylesheet" href="zebra_dialog.css" type="text/css">
        <link rel="stylesheet" href="style.css" type="text/css">
          <script type="text/javascript" src="jquery-1.9.1.js"></script>
          <script type="text/javascript" src="zebra_dialog.js"></script>
          <script type="text/javascript" src="core.js"></script>
<script>
          $('input.obavezno').blur(function(){
          if($(this).val() == ''){
        $.Zebra_Dialog('Ovo polje mora biti popunjeno!');
    }
});
</script>
 </head>
<body>
<form>
<input type="text" class="obavezno">
</form>
    </body>
</html>
 

A ovo je kod gdje sam pokušao da mi se greška ispiše posle submita
Code (html):
<html>
    <head>
        <link rel="stylesheet" href="reset.css" type="text/css">
        <link rel="stylesheet" href="zebra_dialog.css" type="text/css">
        <link rel="stylesheet" href="style.css" type="text/css">
          <script type="text/javascript" src="jquery-1.9.1.js"></script>
          <script type="text/javascript" src="zebra_dialog.js"></script>
          <script type="text/javascript" src="core.js"></script>
<script>
          $('form').submit(function(e){
    e.preventDefault();
    $(this).find('input.obavezno').each( function(){
        if($(this).val() == ''){
            $.Zebra_Dialog('Ovo polje mora biti popunjeno!');
            return false;
        }
    });
});
</script>
 </head>
<body>
<form>
<input type="text" class="obavezno">
<input type="submit">
</form>
    </body>
</html>

Gde grešim?
 
Odgovor na temu

deZio
Inđija

Član broj: 150608
Poruke: 345
*.dynamic.isp.telekom.rs.



+38 Profil

icon Re: Jquery alert pomoc ili predlog17.09.2013. u 09:07 - pre 129 meseci
Prebaci <script>...</script> ispred </body> zato što ti javascript kod mora biti posle kreiranja html inputa. Kada je pre inputa on se izvršava ali ne vidi input pa se ništa ne dešava jer se input tek posle kreira.

Ili možeš promeniti javascript da izgleda ovako:
Code (javascript):

$( document ).ready(function() {
     $('input.obavezno').blur(function(){
          if($(this).val() == ''){
               $.Zebra_Dialog('Ovo polje mora biti popunjeno!');
          }
     });
});
 


Kada je kod unutar $( document ).ready(function() {}, on se izvršava tek kada se sav HTML učita, u ovom našem slučaju HTML input.
 
Odgovor na temu

jaksap

Član broj: 317595
Poruke: 9



Profil

icon Re: Jquery alert pomoc ili predlog17.09.2013. u 10:05 - pre 129 meseci
Hvala Dejane, verovatno sam dosadan kao početnik al imam još dva pitanja... Naime, želeo bih da mi npr. u dva polja pišu različite poruke
Code (html):

<html>
    <head>
        <link rel="stylesheet" href="reset.css" type="text/css">
        <link rel="stylesheet" href="zebra_dialog.css" type="text/css">
        <link rel="stylesheet" href="style.css" type="text/css">
          <script type="text/javascript" src="jquery-1.9.1.js"></script>
          <script type="text/javascript" src="zebra_dialog.js"></script>
          <script type="text/javascript" src="core.js"></script>
 </head>
<body>
<form>
<input type="text" class="obavezno">
<input type="text" class="obavezno1">
<input type="submit">
</form>
</div>
    </body>
     <script type="text/javascript">
  $('form').submit(function(e){
    e.preventDefault();
    $(this).find('input.obavezno').each( function(){
        if($(this).val() == ''){
            $.Zebra_Dialog('Prvo polje mora biti popunjeno!');
            return false;
        }
    });
});
</script>
<script type="text/javascript">
  $('form').submit(function(e){
    e.preventDefault();
    $(this).find('input.obavezno1').each( function(){
        if($(this).val() == ''){
            $.Zebra_Dialog('Drugo polje mora biti popunjeno!');
            return false;
        }
    });
});
</html>

 

i sad ako oba polja nisu popunjena i kliknem se submit, pojave se dva upozorenja, jedno preko drugog i blokiraju stranicu. Da li je moguće da se pojavi samo jedno upozorenje npr za prvo polje koje nije popunjeno iako i drugo nije popunjeno i ono sadrži različitu poruku.
I drugo pitanje, pre nego postavim Zebra dialog i kliknem Submit podaci koji su mi unešeni u polja preoslede se, kad stavim dialog posle klika na submit podaci se ne prosleđuju, samo proverava da li su sva polja popunjena...
 
Odgovor na temu

deZio
Inđija

Član broj: 150608
Poruke: 345
*.dynamic.isp.telekom.rs.



+38 Profil

icon Re: Jquery alert pomoc ili predlog17.09.2013. u 10:57 - pre 129 meseci
Nemoj da ponavljaš isti javascript kod dva ili više puta. Uvek gledaj da postojeći kod prilagodiš svojoj želji.

Dodavaj script tag pre </body> a ne posle.

1. To što misliš možeš odraditi na primer tako što ćeš inputu dodati atribut title i onda preuzimati tu vrednost preko javascripta.
2. Falilo je u kodu submit forme ukoliko nijedno polje nije prazno. Dodao sam. Pogledaj sad:

Code (html):

<html>
    <head>
        <link rel="stylesheet" href="reset.css" type="text/css">
        <link rel="stylesheet" href="zebra_dialog.css" type="text/css">
        <link rel="stylesheet" href="style.css" type="text/css">
          <script type="text/javascript" src="jquery-1.9.1.js"></script>
          <script type="text/javascript" src="zebra_dialog.js"></script>
          <script type="text/javascript" src="core.js"></script>
 </head>
<body>
<form>
Ime: <input type="text" class="obavezno" title="ime"><br/>
Prezime: <input type="text" class="obavezno" title="prezime"><br/>
<input type="submit">
</form>
</div>
   
     <script type="text/javascript">
  $('form').submit(function(e){
    /* SPREČI SUBMIT FORME DOK NE ODRADIMO PROVERU */
    e.preventDefault();
    /* PROVERI DA LI POSTOJI NEKI PRAZAN INPUT KOJI JE PREKO KLASE .obavezno OZNAČEN KAO OBAVEZAN. AKO POSTOJI, PRIKAŽI ALERT I PREKINI DALJE IZVRŠAVANJE. */
    $(this).find('input.obavezno').each( function(){
        if($(this).val() == ''){
            $.Zebra_Dialog('Polje' + $(this).attr('title') + ' mora biti popunjeno!');
            return false;
        }
    });
    /* AKO NE POSTOJI NIJEDAN INPUT KOJI JE PRAZAN, ODRADI SUBMIT FORME */
    $(this).submit();
});
</script>
</body>
</html>
 
 
Odgovor na temu

jaksap

Član broj: 317595
Poruke: 9



Profil

icon Re: Jquery alert pomoc ili predlog17.09.2013. u 11:17 - pre 129 meseci
Potpuno sam razumeo tvoje sugestije i tvoj kod, al kad tvoj kod iskopiram i isprobam nesto se čudno desava. Ako neko polje ostane nepopunjeno i kliknem submit, pojavi se poruka sa zakašnjenjem, koja se ne miče kad se klikne na Ok. Isto tako ako su oba polja popunjena kada se klikne na submit ništa se ne dešava, ne prosleđuju se podaci...
 
Odgovor na temu

deZio
Inđija

Član broj: 150608
Poruke: 345
*.dynamic.isp.telekom.rs.



+38 Profil

icon Re: Jquery alert pomoc ili predlog17.09.2013. u 12:51 - pre 129 meseci
Napravio sam grešku u JS kodu. Probaj ovako:
Code (javascript):

$('form').submit(function(e){
    $(this).find('input.obavezno').each( function(){
        if($(this).val() == ''){
            e.preventDefault();
            $.Zebra_Dialog('Polje ' + $(this).attr('title') + ' mora biti popunjeno!');
            return false;
        }
    });
});
 


Prethodni kod je pozivanjem $(this).submit(); pravio beskonačnu petlju. Tako da se sada e.preventDefault(); i return false; pozivaju samo ako se pronađe prazno polje i nema beskonačne petlje.

Naravno podrazumeva se da za input polja moraš dodati name atribut kako bi se vrednosti prosledile. Takođe za form tag moraš dodati action i method.
 
Odgovor na temu

jaksap

Član broj: 317595
Poruke: 9



Profil

icon Re: Jquery alert pomoc ili predlog17.09.2013. u 13:41 - pre 129 meseci
Hvala, na svemu to je to. Da li je moguće ovako kombinovati input sa select-om. Npr. da imam dva input polja i dva select polja, i da mi javlja da i select mora biti odabrano. U redu je kad nisu izabrana oba select-a a jesu oba input-a, al kad nije izabrano jedno input polje i jedna select javljaju se dve poruke jedna preko druge i blokiraju stranu. Sam to ne umem rešiti...
Code (html):

<html>
    <head>
        <link rel="stylesheet" href="reset.css" type="text/css">
        <link rel="stylesheet" href="zebra_dialog.css" type="text/css">
          <script type="text/javascript" src="jquery-1.9.1.js"></script>
          <script type="text/javascript" src="zebra_dialog.js"></script>
 </head>
<body>
<form>
Ime: <input type="text" class="obavezno" title="ime"><br/>
Prezime: <input type="text" class="obavezno" title="prezime"><br/>
<select class="obavezno1" title="Slovo">
          <option value=""></option>
          <option value="a">A</option>
          <option value="b">B</option>
       </select> <br/>
        <select class="obavezno1" title="broj">
          <option value=""></option>
          <option value="jedan">Jedan</option>
          <option value="dva">Dva</option>
       </select> <br/>
<input type="submit">
</form>
</div>
   
     <script type="text/javascript">
  $('form').submit(function(e){
    $(this).find('input.obavezno').each( function(){
        if($(this).val() == ''){
            e.preventDefault();
            $.Zebra_Dialog('Polje ' + $(this).attr('title') + ' mora biti popunjeno!');
            return false;
        }
    });
});
  $('form').submit(function(e){
    $(this).find('select.obavezno1').each( function(){
        if($(this).val() == ''){
            e.preventDefault();
            $.Zebra_Dialog('Polje ' + $(this).attr('title') + ' mora biti popunjeno!');
            return false;
        }
    });
});
</script>
</body>
</html>
 


[Ovu poruku je menjao jaksap dana 17.09.2013. u 15:14 GMT+1]
 
Odgovor na temu

deZio
Inđija

Član broj: 150608
Poruke: 345
*.dynamic.isp.telekom.rs.



+38 Profil

icon Re: Jquery alert pomoc ili predlog17.09.2013. u 14:20 - pre 129 meseci
Zato što dupliraš isti JS kod, zato ti se dupliraju i poruke. Stavi i select i input zajedno u jedan kod i nemoj koristiti različite klase. Dakle ovako:
Code (javascript):

$('form').submit(function(e){
    $(this).find('input.obavezno, select.obavezno').each( function(){
        if($(this).val() == ''){
            e.preventDefault();
            $.Zebra_Dialog('Polje ' + $(this).attr('title') + ' mora biti popunjeno!');
            return false;
        }
    });
});
 


Ili još jednostavnije ti je da samo filtriraš polja preko klase, ovako:
Code (javascript):

$('form').submit(function(e){
    $(this).find('.obavezno').each( function(){
        if($(this).val() == ''){
            e.preventDefault();
            $.Zebra_Dialog('Polje ' + $(this).attr('title') + ' mora biti popunjeno!');
            return false;
        }
    });
});
 
 
Odgovor na temu

jaksap

Član broj: 317595
Poruke: 9



Profil

icon Re: Jquery alert pomoc ili predlog17.09.2013. u 19:51 - pre 129 meseci
Hvala, ne znam šta drugo da kažem. Sad sam neke stvari mogu da menjam. Interesuje me da li idem u pravom smeru i da li je to moguće...
Naime ako hoću da se u svakom iskačućem prozoru ispiše druga poruka mogu da tu celu poruku stavim u title a da mi onda red u JS koji ispisuje poruku izgleda
Code (javascript):
$.Zebra_Dialog($(this).attr('title'));

To radi, al me interesuje da li može, probao sam al nisam uspeo da to rešim pomoću funkcije if, da title ostane kao do sada a da u JS uradim nešto tipa
Code (javascript):
$('form').submit(function(e){
    $(this).find('.obavezno').each( function(){
        if($(this).val() == ''){
            e.preventDefault();
               if($(this).attr('title') == 'ime'){
               $.Zebra_Dialog('Polje ' + $(this).attr('title') + ' mora biti popunjeno!');
               }
               else{
               $.Zebra_Dialog('Polje ' + $(this).attr('title') + ' mora biti izabrano!');
               }
            return false;
        }
    });
});


i pokušao sam da ovu reč koju vučem iz title napišem npr. kao bold al nisam uspeo

prvo sam mislio da title-u kao dodam klasu
Code (javascript):
$(this).attr('title').addClass('ureditititle');
i onda to srediti preko css, al nisam uspeo i drugi, takođe neuspešan pokušaj je bio
Code (javascript):
$(this).attr('title').css("font-weight", "bold")
ili
Code (javascript):
$(this).attr('title').style("font-weight", "bold")


Interesuje me šta je od ovoga moguće i gde grešim...
 
Odgovor na temu

deZio
Inđija

Član broj: 150608
Poruke: 345
*.dynamic.isp.telekom.rs.



+38 Profil

icon Re: Jquery alert pomoc ili predlog19.09.2013. u 10:34 - pre 129 meseci
Naravno da možeš dodavati if na takav način. $(this).attr('title') će ti uvek vraćati tekst koji je u title atributu tako da ga slobodno možeš proveravati da li je jednak nekoj vrednosti.

Atribute ne možeš stilizovati nikako. $(this).attr('title') vraća običan tekst koji ne možeš stilizovati.
Stilizovati možeš samo tagove, nikako njihove atribute. Dakle ovo je ispravno: $(this).css("font-weight", "bold") a ovo nije: $(this).attr('title').css("font-weight", "bold") jer se nijedan atribut taga ne može stilizovati.

Jedino rešenje je da html ubaciš u sam sadržaj zebra dialoga a da title ostane suvi tekst. Na primer ovako:
Code (javascript):
$.Zebra_Dialog('Polje <strong>' + $(this).attr('title') + '</strong> mora biti popunjeno!');
 
Odgovor na temu

jaksap

Član broj: 317595
Poruke: 9



Profil

icon Re: Jquery alert pomoc ili predlog19.09.2013. u 11:45 - pre 129 meseci
Ovo oko stilizovanja sam video. Pretpostavio sam da mogu preko if da napravim različite poruke al ne znam gde grešim u kodu. Hteo sam npr. da kad se ne izabere Ime da se pojavi jedna poruka a kad se nešto drugo izabere da se pojavi neka druga poruka. Nisam otkrio gde grešim...
Code (javascript):

$('form').submit(function(e){
    $(this).find('.obavezno').each( function(){
        if($(this).val() == ''){
            e.preventDefault();
               if($(this).attr('title') == 'ime'){
               $.Zebra_Dialog('Polje ' + $(this).attr('title') + ' mora biti popunjeno!');
               }
               else{
               $.Zebra_Dialog('Polje ' + $(this).attr('title') + ' mora biti izabrano!');
               }
            return false;
        }
    });
});

 
 
Odgovor na temu

deZio
Inđija

Član broj: 150608
Poruke: 345
*.dynamic.isp.telekom.rs.



+38 Profil

icon Re: Jquery alert pomoc ili predlog19.09.2013. u 11:56 - pre 129 meseci
Mora da radi. Moraš paziti na velika i mala slova. Ime nije jednako sa ime. Pozovi običan alert nek ti ispiše vrednost i na taj način testiraj..

Takođe predlažem ti da svakom polju dodeliš atribut id i da vršiš proveru preko id a ne title. Dakle ovako: if($(this).attr('id') == 'jedinsveni-id-polja'){...}
 
Odgovor na temu

[es] :: Javascript i AJAX :: Jquery alert pomoc ili predlog

[ Pregleda: 2488 | Odgovora: 13 ] > FB > Twit

Postavi temu Odgovori

Navigacija
Lista poslednjih: 16, 32, 64, 128 poruka.