[es] - Problem sa variablom koja je definisana

deZio
Inđija

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

+38 Profil

Re: Problem sa variablom koja je definisana

^{10.10.2013. u 09:32 - pre 128 meseci}

Postoji skraćena varijanta da preuzmeš selektovano polje putem jQuerya:

Code (javascript):

var id = $("select#opstina").val();

E sad, tvoj problem je verovatno jer si stavio kod unutar <head> taga a nisi ga definisao da se pokrene kad se stranica učita.

Kada JS kod ubaciš u <head>, on se izvršava istog trenutka, tako da ti izbacuje undefined, jer JS kod ne zna šta ide posle njega, tj. da ćeš ti unutar <body> taga odštampati taj <select>.

Zato u jQuery postoji rešenje za taj problem, a to je da "narediš" da se JS kod izvrši tek nakon što bude poznat sadržaj unutar <body> taga. Da bi to postigao, tvoj kod umesto dosadašnjeg:

Code (javascript):

var id = $("select#opstina").val(); 

alert(id);

treba da izgleda ovako:

Code (javascript):

$(document).ready(function() {

     var id = $("select#opstina").val(); 

     alert(id);

});

Dakle kad nešto staviš unutar $(document).ready( function() { // tvoj kod... } ) taj kod se izvršava tek nakon što se učita sadržaj unutar <body> taga.

Malo kraća verzija je da umesto $(document).ready( function() { // tvoj kod... } ) koristiš $( function() { // tvoj kod... } )

A postoji i treći način, a to je da <script> tag unutar koga imaš JS kod ne stavljaš u <head> već da ga staviš odmah IZNAD završetka <body> taga, tj. IZNAD </body>. U tom slučaju ne moraš koristiti jQuery document ready kod.

Odgovor na temu

nemnesic
nemnesic
Software Developer
Vranje Florida

Član broj: 44355
Poruke: 802
*.dynamic.sbb.rs.

+64 Profil

Re: Problem sa variablom koja je definisana

^{10.10.2013. u 09:33 - pre 128 meseci}

evo:
http://jsfiddle.net/nemnesic/SUdgq/

Nisam video da ti je @deZio odgovorio.

Odgovor na temu

Thugzsr
Milos Maric
student
Novi Sad

Član broj: 229631
Poruke: 103
*.dynamic.sbb.rs.

+1 Profil

Re: Problem sa variablom koja je definisana

^{10.10.2013. u 09:43 - pre 128 meseci}

Ta linija se vec nalazi unutar

Code:
  $(document).ready(function(){
            if ($("#opstina option:selected").length) {
            $("select#mesto").attr("disabled","disabled");
            $("select#mesto").html("<option>wait...</option>");
            var id= $("select#opstina option:selected").attr('value'); // Ovo je ta linija koja je problem
            alert(id);
            $.post("select_mesto.php", {id:id}, function(data){
                $("select#mesto").removeAttr("disabled");
                $("select#mesto").html(data);
            });
        }

                 }

Nemam praksu da ubacujem unutar heada mnogo stvari, zbog sporosti ucitavanja strane.

Odgovor na temu

deZio
Inđija

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

+38 Profil

Re: Problem sa variablom koja je definisana

^{10.10.2013. u 09:49 - pre 128 meseci}

Takav kod radi bez problema. Evo pogledaj:

http://jsfiddle.net/KRuy7/

Odgovor na temu

Thugzsr
Milos Maric
student
Novi Sad

Član broj: 229631
Poruke: 103
*.dynamic.sbb.rs.

+1 Profil

Re: Problem sa variablom koja je definisana

^{10.10.2013. u 10:02 - pre 128 meseci}

Pa ne radi :) u sustini to je jedan od tri chained selecta...E sad takodje ima i dve verzije, kada je nesto selektovano i kada se desila promena. U sustini evo celog tog koda

Code:
$(document).ready(function(){
                 if ($("#drzava option:selected").length) {
                     $("select#opstina").attr("disabled","disabled");
                    $("select#opstina").html("<option>wait...</option>");
                       var id = $("select#drzava option:selected").attr('value');
                        $.post("select_opstina.php", {id:id}, function(data){
                            $("select#opstina").removeAttr("disabled");
                          $("select#opstina").html(data);
            });

                        if ($("#opstina option:selected").length) {
            $("select#mesto").attr("disabled","disabled");
            $("select#mesto").html("<option>wait...</option>");
            var id= $("select#opstina option:selected").attr('value');
            alert(id);
            $.post("select_mesto.php", {id:id}, function(data){
                $("select#mesto").removeAttr("disabled");
                $("select#mesto").html(data);
            });
        }

                 }



            $("select#opstina").attr("disabled","disabled");
            $("select#mesto").attr("disabled","disabled");
            $("select#drzava").change(function(){
            $("select#opstina").attr("disabled","disabled");
            $("select#opstina").html("<option>wait...</option>");
            var id = $("select#drzava option:selected").attr('value');
            $.post("select_opstina.php", {id:id}, function(data){
                $("select#opstina").removeAttr("disabled");
                $("select#opstina").html(data);
            });
        });
             $("select#opstina").change(function(){
            $("select#mesto").attr("disabled","disabled");
            $("select#mesto").html("<option>wait...</option>");
            var id = $("select#opstina option:selected").attr('value');
            $.post("select_mesto.php", {id:id}, function(data){
                $("select#mesto").removeAttr("disabled");
                $("select#mesto").html(data);
            });
        });
         $("form#select_form").submit(function(){
            var drzava = $("select#drzava option:selected").attr('value');
            var opstina = $("select#opstina option:selected").attr('value');
            if(drzava>0 && opstina>0)
            {
                var result = $("select#opstina option:selected").html();
                $("#result").html('Vas izbor: '+result);
            }
            else
            {
                $("#result").html("Morate izabrati dve opcije!");
            }
            return false;
        });
    });

Videcete da je taj deo za selected kopiran sa dela on change, i prva dva selecta rade perfektno u oba slucaja, dok treci ne radi u slucaju da je selektovana vrednost.

Odgovor na temu

deZio
Inđija

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

+38 Profil

Re: Problem sa variablom koja je definisana

^{11.10.2013. u 04:14 - pre 128 meseci}

Moraš testirati zašto ne radi.

U zavisnosti koji browser koristiš, otvori njihovu alatku za developere, i vidi da li ti prijavljuje neke JS greške kad učitaš stranicu, ili kad izmeniš neki select.

Ako ne dobijaš grešku, onda testiraj uz pomoć alert ili console.log pa ćeš i sam ustanoviti šta je problem.

Na primer stavi jedan alert ispred if ($("#opstina option:selected").length) { i jedno unutar tog if-a. Na taj način ćeš testirati da li kod uopšte dolazi i ulazi u tu petlju. Ako na primer ne ulazi uopšte u petlju, znači da $("#opstina option:selected") ne postoji. I tako radi za svaki deo koda dok ne dođeš do toga gde je greška.

Evo ovako npr.:

Code (javascript):

alert('Došao sam pred petlju');

if ($("#opstina option:selected").length) {

            alert('Ušao sam u petlju, i selektovano polje za opštinu je' + $("#opstina").val() );

            $("select#mesto").attr("disabled","disabled");

            $("select#mesto").html("<option>wait...</option>");

            var id= $("select#opstina option:selected").attr('value');

            alert(id);

     //..........ostatak koda..........

Odgovor na temu

Thugzsr
Milos Maric
student
Novi Sad

Član broj: 229631
Poruke: 103
*.dynamic.sbb.rs.

+1 Profil

Re: Problem sa variablom koja je definisana

^{11.10.2013. u 08:25 - pre 128 meseci}

U sustini u Explorer-u i Mozilli radi ok, samo u chromu jos uvek prijavljuje gresku...Znaci udje u petlju, ali nema id-ja... i u alertu ispise poruku i gde b trebala biti vrednost pise wait...

Odgovor na temu

deZio
Inđija

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

+38 Profil

Re: Problem sa variablom koja je definisana

^{11.10.2013. u 10:54 - pre 128 meseci}

To znači da ti ajax ne vraća ispravan rezultat, tj. da select ne menja svoj html u onaj koji bi trebalo da dobije od ajaxa.

Ovako testiraj:

Code (javascript):

 $.post("select_opstina.php", {id:id}, function(data){

                            $("select#opstina").removeAttr("disabled");

                            alert( "html koji bi trebao biti upisan u select:\n\n" + data );

                            $("select#opstina").html(data);

            }).fail(function() {

    alert( "greška u ajaxu" );

});

Odgovor na temu

Thugzsr
Milos Maric
student
Novi Sad

Član broj: 229631
Poruke: 103
*.dynamic.sbb.rs.

+1 Profil

Re: Problem sa variablom koja je definisana

^{11.10.2013. u 11:56 - pre 128 meseci}

Vraca dobro ajax. U ie i ff radi sve ok, samo chrome ne radi...ne znam iz kog razloga u chromu se prvo ispisu tri prethodna alerta, da je ispred petlje, da je u petlji i id, pa tek onda uradi ovaj, da je ajax dobar, iako je taj alert pre ova druga tri. Prvo bi trebao da se uradi taj alert pa onda ovi ostali, ali kod mene u chromu je naopako...

Odgovor na temu

deZio
Inđija

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

+38 Profil

Re: Problem sa variablom koja je definisana

^{11.10.2013. u 12:34 - pre 128 meseci}

Probaj pratiti tačan redosled izvršavanja ako već nisi. Ovako bi trebao da ti bude kod:

Code:

$.post("fajl", {podaci:podaci}, function(data){
                // neki kod...
                // OVDE TI MORA IĆI SAV KOD KOJI TREBA DA SE IZVRŠI KAD TEK KAD OVAJ AJAX VRATI REZ.
            });
// SAV KOD OVDE ĆE SE IZVRŠITI I PRE NEGO ŠTO AJAX VRATI REZ. DAKLE KOD OVDE I ISPOD NE ČEKA AJAX DEFINISAN IZNAD DA SE ZAVRŠI.

Odgovor na temu

Thugzsr
Milos Maric
student
Novi Sad

Član broj: 229631
Poruke: 103
*.adsl.eunet.rs.

+1 Profil

Re: Problem sa variablom koja je definisana

^{12.10.2013. u 12:08 - pre 128 meseci}

Pratio sam. Otprilike posle svakog reda mi je alert. Ne razumem zasto mi je u ie i ff sve ok, a u chrome ne radi...

Odgovor na temu

deZio
Inđija

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

+38 Profil

Re: Problem sa variablom koja je definisana

^{12.10.2013. u 14:45 - pre 128 meseci}

Probaj koristiti ovaj pristup:

Code (html):

<!DOCTYPE html>

<html>

    <head>

        <title>Sajt u izradi...</title>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

          <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

          <script type="text/javascript">

               $(document).ready(function(){

                    // KOD KOJI SE IZVRŠAVA NAKON PROMENE SELECTA DRŽAVE

                    $("select#drzava").change( function(){

                         // IZBACI OPCIJU "Odaberite državu"

                         if( $("select#drzava option[value='0']").length == 1 )

                              $("select#drzava option[value='0']").remove();

                         // UBACI OPCIJU "Odaberite prvo opštinu... za select mesto"

                         if( $("select#mesto option[value='0']").length != 1 )

                              $("select#mesto").attr('disabled', 'disabled').html('<option value="0">Odaberite prvo opštinu...</option>');

                         console.log( "Promenjen je select#drzava, nova vrednost je "+$("select#drzava").val()+", uradi ajax za select#opstina..." );

                         $("select#opstina").attr('disabled', 'disabled').html("<option>Učitavam...</option>");

                         var podaci = {

                              'drzava' : $("select#drzava").val()

                         };

                         $.post("select_opstina.php", podaci, function(data){

                              console.log( "$.post - select_opstina.php - vratio rezultat:\n" + data );

                              $("select#opstina").removeAttr("disabled").html(data);

                         }).fail(function() {

                              console.log( "$.post - select_opstina.php - nije uspeo!" );

                         });

                    });

                    // KOD KOJI SE IZVRŠAVA NAKON PROMENE SELECTA OPŠTINE

                    $("select#opstina").change( function(){

                         // IZBACI OPCIJU "Odaberite opstinu"

                         if( $("select#opstina option[value='0']").length == 1 )

                              $("select#opstina option[value='0']").remove();

                         console.log( "Promenjen je select#opstina, nova vrednost je "+$("select#opstina").val()+", uradi ajax za select#mesto..." );

                         $("select#mesto").attr('disabled', 'disabled').html("<option>Učitavam...</option>");

                         var podaci = {

                              'drzava' : $("select#drzava").val(),

                              'opstina' : $("select#opstina").val()

                         };

                         $.post("select_mesto.php", podaci, function(data){

                              console.log( "$.post - select_mesto.php - vratio rezultat:\n" + data );

                              $("select#mesto").removeAttr("disabled").html(data);

                         }).fail(function() {

                              console.log( "$.post - select_mesto.php - nije uspeo!" );

                         });

                    });

                    // KOD KOJI SE IZVRŠAVA NAKON PROMENE SELECTA MESTA

                    $("select#mesto").change( function(){

                         // IZBACI OPCIJU "Odaberite mesto"

                         if( $("select#mesto option[value='0']").length == 1 )

                              $("select#mesto option[value='0']").remove();

                         // OSTATAK KODA.....

                    });

               });

          </script>

    </head>

    <body>

        <form>

               <select id="drzava">

                    <option value="0">Odaberite državu</option>

                    <option value="1">Srbija</option>

                    <option value="2">Crna Gora</option>

                    <option value="3">BiH</option>

               </select>

               <select id="opstina" disabled="disabled">

                    <option value="0">Odaberite prvo državu...</option>

               </select>

               <select id="mesto" disabled="disabled">

                    <option value="0">Odaberite prvo opštinu...</option>

               </select>

        </form>

     </body>

</html>

Evo i demo:
http://sajt.in/select/test.php

Sadržaj select_opstina.php :

Code (php):

<?php

if( ! isset($_REQUEST['drzava'] ) )

     $_REQUEST['drzava'] = 1;

$OPSTINE = array(

     1 => array(

          1 => array(

               'value' => 1,

               'name' => 'Opstina 1 za Srbiju'

          ),

          2 => array(

               'value' => 2,

               'name' => 'Opstina 2 za Srbiju'

          ),

          3 => array(

               'value' => 3,

               'name' => 'Opstina 3 za Srbiju'

          )

     ),

     2 => array(

          1 => array(

               'value' => 1,

               'name' => 'Opstina 1 za Crnu Goru'

          ),

          2 => array(

               'value' => 2,

               'name' => 'Opstina 2 za Crnu Goru'

          ),

          3 => array(

               'value' => 3,

               'name' => 'Opstina 3 za Crnu Goru'

          )

     ),

     3 => array(

          1 => array(

               'value' => 1,

               'name' => 'Opstina 1 za BiH'

          ),

          2 => array(

               'value' => 2,

               'name' => 'Opstina 2 za BiH'

          ),

          3 => array(

               'value' => 3,

               'name' => 'Opstina 3 za BiH'

          )

     )

);

header('Content-type: text/plain');

echo '<option value="0">Odaberite opstinu</option>'."\n";

foreach( $OPSTINE[ $_REQUEST['drzava'] ] as $opstina )

     echo '<option value="'.$opstina['value'].'">'.$opstina['name'].'</option>'."\n";

?>

Sadržaj select_mesto.php :

Code (php):

<?php

if( ! isset($_REQUEST['drzava'] ) )

     $_REQUEST['drzava'] = 1;

if( ! isset($_REQUEST['opstina'] ) )

     $_REQUEST['opstina'] = 1;

$MESTA = array(

     1 => array(

          1 => array(

               1 => array(

                    'value' => 1,

                    'name' => 'Mesto 1 opstine 1 za Srbiju'

               ),

               2 => array(

                    'value' => 2,

                    'name' => 'Mesto 2 opstine 1 za Srbiju'

               ),

               3 => array(

                    'value' => 3,

                    'name' => 'Mesto 3 opstine 1 za Srbiju'

               )

          ),

          2 => array(

               1 => array(

                    'value' => 1,

                    'name' => 'Mesto 1 opstine 2 za Srbiju'

               ),

               2 => array(

                    'value' => 2,

                    'name' => 'Mesto 2 opstine 2 za Srbiju'

               ),

               3 => array(

                    'value' => 3,

                    'name' => 'Mesto 3 opstine 2 za Srbiju'

               )

          ),

          3 => array(

               1 => array(

                    'value' => 1,

                    'name' => 'Mesto 1 opstine 3 za Srbiju'

               ),

               2 => array(

                    'value' => 2,

                    'name' => 'Mesto 2 opstine 3 za Srbiju'

               ),

               3 => array(

                    'value' => 3,

                    'name' => 'Mesto 3 opstine 3 za Srbiju'

               )

          )

     ),

     2 => array(

          1 => array(

               1 => array(

                    'value' => 1,

                    'name' => 'Mesto 1 opstine 1 za Crnu Goru'

               ),

               2 => array(

                    'value' => 2,

                    'name' => 'Mesto 2 opstine 1 za Crnu Goru'

               ),

               3 => array(

                    'value' => 3,

                    'name' => 'Mesto 3 opstine 1 za Crnu Goru'

               )

          ),

          2 => array(

               1 => array(

                    'value' => 1,

                    'name' => 'Mesto 1 opstine 2 za Crnu Goru'

               ),

               2 => array(

                    'value' => 2,

                    'name' => 'Mesto 2 opstine 2 za Crnu Goru'

               ),

               3 => array(

                    'value' => 3,

                    'name' => 'Mesto 3 opstine 2 za Crnu Goru'

               )

          ),

          3 => array(

               1 => array(

                    'value' => 1,

                    'name' => 'Mesto 1 opstine 3 za Crnu Goru'

               ),

               2 => array(

                    'value' => 2,

                    'name' => 'Mesto 2 opstine 3 za Crnu Goru'

               ),

               3 => array(

                    'value' => 3,

                    'name' => 'Mesto 3 opstine 3 za Crnu Goru'

               )

          )

     ),

     3 => array(

          1 => array(

               1 => array(

                    'value' => 1,

                    'name' => 'Mesto 1 opstine 1 za BiH'

               ),

               2 => array(

                    'value' => 2,

                    'name' => 'Mesto 2 opstine 1 za BiH'

               ),

               3 => array(

                    'value' => 3,

                    'name' => 'Mesto 3 opstine 1 za BiH'

               )

          ),

          2 => array(

               1 => array(

                    'value' => 1,

                    'name' => 'Mesto 1 opstine 2 za BiH'

               ),

               2 => array(

                    'value' => 2,

                    'name' => 'Mesto 2 opstine 2 za BiH'

               ),

               3 => array(

                    'value' => 3,

                    'name' => 'Mesto 3 opstine 2 za BiH'

               )

          ),

          3 => array(

               1 => array(

                    'value' => 1,

                    'name' => 'Mesto 1 opstine 3 za BiH'

               ),

               2 => array(

                    'value' => 2,

                    'name' => 'Mesto 2 opstine 3 za BiH'

               ),

               3 => array(

                    'value' => 3,

                    'name' => 'Mesto 3 opstine 3 za BiH'

               )

          )

     )

);

header('Content-type: text/plain');

echo '<option value="0">Odaberite mesto</option>'."\n";

foreach( $MESTA[ $_REQUEST['drzava'] ][ $_REQUEST['opstina'] ] as $mesto )

     echo '<option value="'.$mesto['value'].'">'.$mesto['name'].'</option>'."\n";

?>

Odgovor na temu