filtrirani prikaz listbox

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

treba mi neki vodic kako ovo uraditi u java script-u. koristim hfs template gde mi je potrebno da na bazi clanstva u grupi korisnika filtrirati sadrzaj list box-a koristeci javascript.

imam listbox kao u kodu ispod

<form action="." method='post' enctype="multipart/form-data" style='text-align:center; padding-top:1%;'> <div style='text-align:center;'> <input type="hidden" name="0" value=""> <input type="hidden" name="1" value="statut"> <input type="hidden" name="2" value="folder"> <input type="hidden" name="3" value="dokument"> <input type="hidden" name="4" value="javni folder"> <select id="lista" name="metodologija" onchange="change(this)" > <option value="0" selected disabled >Izaberi tip dokumenta</option> <option value="1" >Statut</option> <option value="2" >Folder</option> <option value="3" >Dokument</option> <option value="4" >Javni folder</option> </select> </div> <br/>    <div > <input disabled id="skriveno" type='file' name='file' multiple /> <input type='submit' value='{.!lv_addInput.}' /> </div> </form>

dakle, moram da postvim uslov

if(uslov){

javascript koji prikazuje samo neke elemente liste

}

u hfs templat-u sam pokusao sa sledecim kodom, ali ne mogu da sakrijem polja u listi ako trenutno prijavljeni korisnik pripada nekoj grupi

 <fieldset id='upload'>           <legend><img src="/~img32"> Prebacivanje fajlova</legend>           <form action="." method='post' enctype="multipart/form-data" style='text-align:center; padding-top:1%;'>          <div style='text-align:center;'>             <input type="hidden" name="0" value="">             <input type="hidden" name="1" value="b-s">             <input type="hidden" name="2" value="b-b">             <input type="hidden" name="3" value="b-r">             <input type="hidden" name="4" value="b-j">         <input type="hidden" name="5" value="l-s">             <input type="hidden" name="6" value="l-b">             <input type="hidden" name="7" value="l-r">             <input type="hidden" name="8" value="l-j">         <input type="hidden" name="9" value="o-s">             <input type="hidden" name="10" value="o-b">             <input type="hidden" name="11" value="o-r">             <input type="hidden" name="12" value="o-j">         <input type="hidden" name="13" value="j-s">             <input type="hidden" name="14" value="j-b">             <input type="hidden" name="15" value="j-r">             <input type="hidden" name="16" value="j-j">         <input type="hidden" name="17" value="n-s">             <input type="hidden" name="18" value="n-bilans s">             <input type="hidden" name="19" value="n-r">             <input type="hidden" name="20" value="n-j">         <input type="hidden" name="21" value="s-s">             <input type="hidden" name="22" value="s-b">             <input type="hidden" name="23" value="s-r">             <input type="hidden" name="24" value="s-j"> <select id="lista" name="metodologija" onchange="change(this)" onload="sakrij_b()"  >             <option id="b" value="0" selected disabled >Izaberi tip dokumenta</option>             <option id="b" value="1" >B-S</option>             <option id="b" value="2" >B-B</option>             <option id="b" value="3" >B-R</option>             <option id="b" value="4" >B-J</option>             <option id="l" value="5" >L-S</option>             <option id="l" value="6" >L-B</option>             <option id="l" value="7" >L-R</option>             <option id="l" value="8" >L-J</option>             <option id="o" value="9" >O-S</option>             <option id="o" value="10" >O-B</option>             <option id="o" value="11" >O-R</option>             <option id="o" value="12" >O-J</option>             <option id="j" value="13" >J-S</option>             <option id="j" value="14" >J-B</option>             <option id="j" value="15" >J-R</option>             <option id="j" value="16" >J-J</option>             <option id="n" value="17" >N-S</option>             <option id="n" value="18" >N-B</option>             <option id="n" value="19" >N-R</option>             <option id="n" value="20" >N-J</option>             <option id="s" value="21" >S-S</option>             <option id="st" value="22" >S-B</option>             <option id="s" value="23" >S-R</option>             <option id="s" value="24" >S-J</option>             </select>          </div>  <br/>                 <div >           <input disabled id="skriveno" type='file' name='file' multiple  />           <input type='submit' value='{.!lv_addInput.}'  />          </div>           </form>       </fieldset>    :}.}     {.member of|#bu#|{:<script type="text/javascript">     var b=document.getElementById("b");         var l=document.getElementById("l");         var o=document.getElementById("o");     var j=document.getElementById("j");         var n=document.getElementById("n");         var s=document.getElementById("s");           function sakrij_b()                 {                                          l.hidden=false;                                          o.hidden=false;                                          j.hidden=false;                                  n.hidden=true;                                          s.hidden=true;                 }     </script>:}.}

da li je problem u javascript kodu? moze neka instrukcija?

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

Mozda te nisam skroz razumeo, nemam ni pojma sta je HFSt, ali mislim da sam video par problemcica u kodu.

Ne bih rekao da select podrzava onload atribut. Ja bih to stavio u body.

Razliciti elementi moraju da imaju razlicite id-ove (jedan id <=> jedan element).
Ako hoces da elemente grupises u neke grupe onda koristis klase.
<select id="lista" name="metodologija" onchange="change(this)">   <option class="b" value="0" selected disabled >Izaberi tip dokumenta</option>   <option class="b" value="1" >B-S</option>   ...          </select>
Da bi radio sa elementima iz neke klase/grupe moras da
im pristupis pomocu funkcije getElementsByClassName("klasa").
var b=document.getElementsByClassName("b"); var l=document.getElementsByClassName("l"); var o=document.getElementsByClassName("o"); var j=document.getElementsByClassName("j"); var n=document.getElementsByClassName("n"); var s=document.getElementsByClassName("s");
Navedena funkcija vraca niz od svih elemenata iz klase pa ako zelis da
izmenis bas sve elemente iz klase onda bi trebalo da koristis petlju.
function sakrij_b() {   var i;   for (i = 0; i < l.length; ++i)     l[i].hidden=false;   for (i = 0; i < o.length; ++i)     o[i].hidden=false;   for (i = 0; i < j.length; ++i)     j[i].hidden=false;   for (i = 0; i < n.length; ++i)     n[i].hidden=true;   for (i = 0; i < s.length; ++i)     s[i].hidden=true; }
E sad, ne znam na koji nacin tacno filtriras ove podatke ali (mozda) ne moras
da pises svaki put kada hoces da sakrijes nesto drugo/trece/... novu funkciju vec sve moze izjedna da se uradi.

Ovaj kod radi u Firefox i Chrome ali ne radi u npr. Internet Explorer jer u njemu koliko vidim ne mozes da sakrijes option elemente. Zato je mozda bolji pristup npr. da ih stvarno brises iz select i dodajes po potrebi umesto sto ih sakrivas.

Napravio sam jedan demo cisto da ti da ideju kako bi otprilike ja to resio.
<body> <select id="lista"></select><br> <!-- lista ce dakle da nam inicijalno bude prazna a po potrebi cemo dodavati stvari u nju --> <label><input type="checkbox" class="polja" onchange="prikazi('b')" id="b"></label> b<br> <label><input type="checkbox" class="polja" onchange="prikazi('l')" id="l"></label> l<br> <label><input type="checkbox" class="polja" onchange="prikazi('o')" id="o"></label> o<br> <label><input type="checkbox" class="polja" onchange="prikazi('j')" id="j"></label> j<br> <label><input type="checkbox" class="polja" onchange="prikazi('n')" id="n"></label> n<br> <label><input type="checkbox" class="polja" onchange="prikazi('s')" id="s"></label> s </body> <script> /* kod za option elemente koje zelimo da koristimo u nasoj listi   cemo skladistiti kao obicne stringove (tj. kao obican tekst)   a po potrebi cemo taj kod/tekst samo dodavati u select element. */ var b =   '<option class="b" value="0" selected disabled >Izaberi tip dokumenta</option>' +   '<option class="b" value="1" >B-S</option>' +   '<option class="b" value="2" >B-B</option>' +   '<option class="b" value="3" >B-R</option>' +   '<option class="b" value="4" >B-J</option>'; var l =   '<option class="l" value="5" >L-S</option>' +   '<option class="l" value="6" >L-B</option>' +   '<option class="l" value="7" >L-R</option>' +   '<option class="l" value="8" >L-J</option>'; var o =   '<option class="o" value="9"  >O-S</option>' +   '<option class="o" value="10" >O-B</option>' +   '<option class="o" value="11" >O-R</option>' +   '<option class="o" value="12" >O-J</option>'; var j =   '<option class="j" value="13" >J-S</option>' +   '<option class="j" value="14" >J-B</option>' +   '<option class="j" value="15" >J-R</option>' +   '<option class="j" value="16" >J-J</option>'; var n =   '<option class="n" value="17" >N-S</option>' +   '<option class="n" value="18" >N-B</option>' +   '<option class="n" value="19" >N-R</option>' +   '<option class="n" value="20" >N-J</option>'; var s =   '<option class="s" value="21" >S-S</option>' +   '<option class="s" value="22" >S-B</option>' +   '<option class="s" value="23" >S-R</option>' +   '<option class="s" value="24" >S-J</option>'; var lista = document.getElementById("lista"); var polja = document.getElementsByClassName("polja"); function prikazi(x) {   if (document.getElementById(x).checked === false) {     /* innerHTML vraca kod koji se nalazi unutar nekog elementa.       ako smo ovo polje na koje smo kliknuli decekirali obrisacemo       sav kod iz liste tako sto cemo staviti innerHTML na prazno ("")       a onda cemo dodati kod za elemente iz grupa koje su ostale cekirane */     lista.innerHTML = "";     var i;     for (i = 0; i < polja.length; ++i)       if (polja[i].checked) {         switch (polja[i].id) {         case "b": lista.innerHTML += b; break;         case "l": lista.innerHTML += l; break;         case "o": lista.innerHTML += o; break;         case "j": lista.innerHTML += j; break;         case "n": lista.innerHTML += n; break;         case "s": lista.innerHTML += s; break;         }       }   } else {     /* ako smo upravo cekirali ovo polje onda cemo        samo dodati kod za elemente iz date grupe */     switch (x) {       case "b": lista.innerHTML += b; break;       case "l": lista.innerHTML += l; break;       case "o": lista.innerHTML += o; break;       case "j": lista.innerHTML += j; break;       case "n": lista.innerHTML += n; break;       case "s": lista.innerHTML += s; break;     }   } } </script>

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

Napisano: 12 Avg 2016 8:03

problem sam resio tako sto pomocu jquery koda povucem u listu podatke iz tekst fajla. kod je sledeci

{.if|{.member of|bud.}|
{:<script type="text/javascript">$(document).ready(function(){
$("select").ready(function(){
$("#lista").load("/template/pitanja-b.txt");
});
});</script>:}|
{.if|{.member of|lok.}|
{:<script type="text/javascript">$(document).ready(function(){
$("select").ready(function(){
$("#lista").load("/template/pitanja-l.txt");
});
});</script>:}|{.if|{.member of|oos.}|
{:<script type="text/javascript">$(document).ready(function(){
$("select").ready(function(){
$("#lista").load("/template/pitanja-o.txt");
});
});</script>:}|{.if|{.member of|jav.}|
{:<script type="text/javascript">$(document).ready(function(){
$("select").ready(function(){
$("#lista").load("/template/pitanja-javna_p.txt");
});
});</script>:}|{.if|{.member of|nbs.}|
{:<script type="text/javascript">$(document).ready(function(){
$("select").ready(function(){
$("#lista").load("/template/pitanja-n.txt");
});
});</script>:}
/if.}
/if.}
/if.}
/if.}
/if.}
{.if| {.get|can upload.} |{:
<fieldset id='upload'>
<legend><img src="/~img32"> Пребацивање фајлова</legend>
<form action="." method='post' enctype="multipart/form-data" style='text-align:center; padding-top:1%;'>
<div style='text-align:center;'>
<input type="hidden" name="0" value="">
<input type="hidden" name="1" value="pitanje1">
<input type="hidden" name="2" value="pitanje2">
<input type="hidden" name="3" value="pitanje3">
<input type="hidden" name="4" value="pitanje4">
<input type="hidden" name="5" value="pitanje5">



<select id="lista" name="metodologija" onchange="change(this)" >

</select>
</div>
<br/>
<div >
<input disabled id="skriveno" type='file' name='file' multiple />
<input type='submit' value='{.!lv_addInput.}' />
</div>
</form>
</fieldset>
:}.}

izgled jednog tekst fajla

<option value="0" selected disabled >Изабери тип</option>
<option value="1" >Б-Стa</option>
<option value="2" >Б-Бил</option>
<option value="3" >Б-Рач</option>
<option value="4" >Б-Јав</option>
<option value="5" >Б-Неп</option>

Medjutim, pojavljuje se problem da ovaj kod ne radi u foirefox-u, dok u ie i chrome radi. Moze li neka instrukcija zasto se to dogodilo?

Dopuna: 16 Avg 2016 10:06

ocigledno da skripta

<script type="text/javascript">$(document).ready(function(){
$("select").ready(function(){
$("#lista").load("/template/*.txt");
});
});</script>

nece da ucita tekst u listbox u firefox-u. da li postoji mogucnost nekako preraditi ovu skriptu za firefox?

Dopuna: 16 Avg 2016 13:51

pokusao sam da umesto
$("#lista").load("/template/*.txt");
stavim

var http_request = new XMLHttpRequest();
http_request.open("GET", "/template/*.txt");
http_request.send();

medjutim ovaj kod ne radi ni u jednom browser-u

Dopuna: 17 Avg 2016 11:44

kad startujem u firefox-u debugger ucitami se ceo tekst fajl ali ga ne prikaze u listi. zasto?