Avaleht
uus teema   vasta Tarkvara »  Programmeerimine »  Javascripti abil "option" tägi muutmine märgi kõik teemad loetuks
märgi mitteloetuks
vaata eelmist teemat :: vaata järgmist teemat
Hinnavaatlus :: Foorum :: Uudised :: Ärifoorumid :: HV F1 ennustusvõistlus :: Pangalink :: Telekavad :: HV toote otsing
autor
sõnum Saada viide sõbrale. Teata moderaatorile
otsing:  
Naljatilk
HV kasutaja
Naljatilk

liitunud: 03.03.2006
sõnum 20.04.2010 14:08:22 Javascripti abil "option" tägi muutmine vasta tsitaadiga
Tervist!

Mul on pisuke probleem javascriptiga: koostasin oma firmale laosüsteemi ning soovin, et toodete arv ühes sissekandes ei ole fikseeritud. Lahendusena kasutan AJAX-it ning ridu saab juurde lisada nii, kuidas tuju on.
Ainuke jama on, et kui laen uue rea, taastatakse teksti input-ides ja selectides algne väärtus: kui laadisin selecti nii, et teatud optionile on lisatud tag SELECTED, siis jääb see option antud selectis püsima.
<select name="select1">
<option value="1">Esimene</option>
<option value="2" SELECTED>Teine</option>
</select>

Kui aga ei lisa SELECTED tägi lehe laadimisel (Ajaxi lehe), valin ise käsitsi teise variandi, siis nullitakse valik ära. Sama ka inputidega.

Lihtsustatud kood, mis laeb uue rea näeb välja:

<html>
<head>
   <meta http-equiv="content-type" content="text/html; charset=iso8859-4" />
   <script type="text/javascript" src="js/ajax.js"></script>
   <script type="text/javascript">

      
      // koostatakse string uusSelect, mis liidetakse tooted_div div-ile juurde
      // string näeb välja <select><option1>esimene option</option1> ... </select><div id="lisadiv1"></div>
      // selectil on juures onchange atribuut, mis andmete muutmise korral kutsub välja uue funktsiooni, mis lisab hinna ja koguse lisadiv1-te.
      // kui lisada uus select, siis nullitakse selecti väärtus ära, kui optionil puudub SELECTED
      
      function xmlToSelect(Sisend,valitudId){
         var tooteid = document.getElementById('tooteid').value;
         var andmed = Sisend.split("</kokku>");
         var kokkuA = andmed[0];
         var kokkuB = kokkuA.split("<kokku>");
         var i = parseInt(kokkuB[1]) + 1;
         
         var allesString = andmed[1];
         var uusSelect = '<select id="toode' + tooteid + '" name="toode' + tooteid + '" onchange="tooteAndmed(this.options[this.selectedIndex].value, ' + tooteid + ');"><option value="0">Vali toode</option>';

         
         for(var j = 1; j < i; j++){
            // pikk jutt, s*tt jutt
            // siin asjad laabuvad
            
            if(nuumer == valitudId)
               uusSelect += '<option id="toodeOption' + j + '" SELECTED value="' + nuumer + '">' + toode + '</option>'; //print
            else
               uusSelect += '<option id="toodeOption' + j + '" value="' + nuumer + '">' + toode + '</option>'; //print
         }
         
         uusSelect += '</select><div id="toode_ekstra_div'+tooteid+'" style="display:inline;">&nbsp;</div>';
      
         document.getElementById('tooted_div').innerHTML += uusSelect;
      }
      
      
      function XmlToToode(Sisend,selectiNr){
         var division = 'toode_ekstra_div' + selectiNr;
         
         var andmed = Sisend.split("</myygihind>");       //splitib stringi Sisend koha pealt </kokku>
         var kokkuA = andmed[0];
         var kokkuB = kokkuA.split("<myygihind>");
         var myygihind = kokkuB[1];
         
         var andmed = Sisend.split("</km>");       //splitib stringi Sisend koha pealt </kokku>
         var kokkuA = andmed[0];
         var kokkuB = kokkuA.split("<km>");
         var km = kokkuB[1];
         
         document.getElementById(division).innerHTML = '<input type="text" name="kogus' + selectiNr + '" id="kogus' + selectiNr + '" value="1" />' +
                                             '<input type="text" name="hind' + selectiNr + '" id="hind' + selectiNr + '" value="' + myygihind + '" />' +
                                             '<input type="text" name="km' + selectiNr + '" id ="km' + selectiNr + '" value="' + km + '" /><br />';
         summa();
      }
      
      function uusToode(id){
         // kutsub ajaxi abil uue lehe, returnib stringi, string töötab
         // kutsub välja xmlToSelect funktsiooni
         // tulemuseks <select>, mille abil saab valida soovitud toodete vahel
      }
      
      function tooteAndmed(id){
         // kutsub ajaxi abil uue lehe, returnib stringi, string töötab
         // kutsub välja XmlToToode funktsiooni
         // tulemuseks input boxid <select> tägi järgses divisioonis
      }
   
   </script>
</head>
<body>
<form method="post" action="action.php">
   <input type="hidden" id="tooteid" name="tooteid" value="0" />
   <label>Toode:</label>
      <div id="tooted_div">
         Toote div
      </div>
   <label>&nbsp;</label><a href="javascript:uusToode(0)"><img src="images/pluss.png" /></a><br />
</form>
</body></html>



Kõik töötab ja laetakse uus rida, ainuke jama on, et read resetitakse. Javascriptiga olen tegelenud kõige enam kuu aega praeguseks, aga kuna php ja Java taust on olemas, oskan kasutada interneeduse abi probleemide lahendamiseks. Sellest hoolimata võin oskamatusest vigu teha või ei tea "petmismeetodeid".

Üritasin lahendada probleemi sellega, et muudan JS abil <option>'i SELECTED-iks, aga mingil põhjusel ei tunnista option oma atribuuti
SELECTED = true;


Pikem kood, mida kasutasin on seesugune:
function selectOptionByValue(selObj, val){
         var A= selObj.options, L= A.length;
         while(L){
            if (A[--L].value== val){
               document.getElementById('toodeOption'+L).selected = true;
               L= 0;
            }
         }
      }

Või ka tagastasin L-i, lisasin igale optionile unique id ja üritasin selle läbi lisada optionit selected=selected ja true ja 1.
Lisaks ka:
document.getElementById('toode' + selectiNr).options[number].selected = 'selected';


Oskab keegi öelda, mida ma teen valesti või, kuidas lahendada probleemi?
Viimase lahendusena võiks ju teoorias laadida kogu tooted_div elemendi JS vahemällu, otsida stringitöötlusega üles selectedIndex-i (valuede ja selectide numbrite abil) jne-jne, aga see on parasjagu viimane teema, milleni jõuan.

Tuharikast õhku,
Martin
_________________
Vaata pilti
Kommentaarid: 11 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 11
tagasi üles
vaata kasutaja infot saada privaatsõnum
andrusny
Kreisi kasutaja
andrusny

liitunud: 20.03.2006
sõnum 20.04.2010 17:50:36 vasta tsitaadiga
Kole palju infi. Kui tahtsid nüüd küsida, kuidas JS abil selectida teatud option, siis see võiks nii käia.

<select name="select1" id="valik">
<option value="1">Esimene</option>
<option value="2" >Teine</option>
</select>

<script>
var selectmenu=document.getElementById("valik")
selectmenu.options[1].selected = true;
</script>

_________________
Kommentaarid: 7 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 7
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
nene
Kreisi kasutaja
nene

liitunud: 20.03.2004
sõnum 20.04.2010 21:32:09 vasta tsitaadiga
Naljatilk, sa näed palju vaeva käsitsi XML-i parsimisega, aga kui sa laed Ajaxi päringuga XML-i, siis on brauser juba sinu eest kogu töö ära teinud ja sul jääb vaid üle kasutada XMLHttpRequest objektis sisalduvat XML DOM-i. Näiteks nii:

// olgu xhr meil XMLHttpRequest objekt, mis on just XML-i ära laadinud.
var dom = xhr.responseXML.documentElement;
var myygihind = dom.getElementsByTagName("myygihind")[0];
var km = dom.getElementsByTagName("km")[0];

_________________
Mõistus otsas? Pane pinusse...
Kommentaarid: 24 loe/lisa Kasutajad arvavad:  :: 0 :: 1 :: 23
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
Naljatilk
HV kasutaja
Naljatilk

liitunud: 03.03.2006
sõnum 20.04.2010 22:32:16 vasta tsitaadiga
andrusny kirjutas:
Kole palju infi. Kui tahtsid nüüd küsida, kuidas JS abil selectida teatud option, siis see võiks nii käia.

<select name="select1" id="valik">
<option value="1">Esimene</option>
<option value="2" >Teine</option>
</select>

<script>
var selectmenu=document.getElementById("valik")
selectmenu.options[1].selected = true;
</script>

Ligikaudu selline mu küsimus oli tõesti. icon_lol.gif Sellise nurga alt ma isegi lähenesin erinevaid meetmeid pidi, aga viga see ei lahendanud..

Probleem on see, et kui lisan uue tooterea
<select name="select1" id="valik">
<option value="1">Esimene</option>
<option value="2" >Teine</option>
</select>

ja valin seal näiteks teise optioni ning määran JS-ga, et "Teine" on selected=true. Uue rea lisades "reset"-itakse kõik eelmised selectid ära ehk selles selectis oleks aktiivne hoopiski "Esimene".
Kui lisada uus rida nii, et koheselt on valitud "Teine" võimalus
Probleem on see, et kui lisan uue tooterea
<select name="select1" id="valik">
<option value="1">Esimene</option>
<option value="2" SELECTED >Teine</option>
</select>

siis uue rea lisades jääb ikkagi valituks "Teine" option.

Probleem ja lahendus saavad seega olla kahes kohas:
1. kui uuendan kasti "tooted_div", ei nullitaks eelnevaid ära
2. otsesesse DOM-i saaks lisada SELECTED väärtuse.

Siinkohas jääbki mul kogemusest vajaka.. Kuidas jõuda selleni, et pärast iga plussile vajutust ei nullitaks kõike ära?


nene kirjutas:
Naljatilk, sa näed palju vaeva käsitsi XML-i parsimisega, aga kui sa laed Ajaxi päringuga XML-i, siis on brauser juba sinu eest kogu töö ära teinud ja sul jääb vaid üle kasutada XMLHttpRequest objektis sisalduvat XML DOM-i. Näiteks nii:

// olgu xhr meil XMLHttpRequest objekt, mis on just XML-i ära laadinud.
var dom = xhr.responseXML.documentElement;
var myygihind = dom.getElementsByTagName("myygihind")[0];
var km = dom.getElementsByTagName("km")[0];

Tänud õpetussõnade eest! Taaskord on probleemiks see, et ei ole eriti tegelenud AJAX-iga. Ma tean, et peab saama TagName-i abil otsida ning jamasin sellega paar kaunist tunnikest kuni andsin alla ning läksin stringitöötluse peale üle.
Tundub, et mul jäi lisamata responseXML-ile vaid documentElement.

Uurin asja pisut lähemalt lähiajal, hetkel üritan saada põhja tööle ja siis hakkan vaatama ilusamate asjade poole. icon_biggrin.gif
_________________
Vaata pilti
Kommentaarid: 11 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 11
tagasi üles
vaata kasutaja infot saada privaatsõnum
nene
Kreisi kasutaja
nene

liitunud: 20.03.2004
sõnum 21.04.2010 01:19:26 vasta tsitaadiga
Ma arvan, et su probleem on selles reas:

document.getElementById('tooted_div').innerHTML += uusSelect;


Iga kord kui sa tooted_div sisse uue <select> elemendi lisad lood sa kogu tooted_div sees oleva HTML-i uuesti. <option> elemendi selected atribuut määrab aga vaikimisi valitud väärtuse; kui kasutaja select-kastist midagi valib, siis see selected atribuudi väärtust ei muuda, seega ei kajastu kasutaja valitud väärtus ka innerHTML-is ja läheb kaduma.

See probleem on lihtsasti välditav kasutades appendChild meetodit. Näiteks nii:

javascript:
  1. function xmlToSelect(Sisend, valitudId) {
  2.   ...
  3.   var tooted = document.getElementById("tooted_div");
  4.   var select = document.createElement("select");
  5.   select.id = "toode" + tooteid;
  6.   select.name = "toode" + tooteid;
  7.   select.onchange = function(){
  8.     tooteAndmed(this.options[this.selectedIndex].value, tooteid);
  9.   };
  10.   select.innerHTML = '<option value="0">Vali toode</option>';
  11.   tooted.appendChild(select);
  12. }

_________________
Mõistus otsas? Pane pinusse...
Kommentaarid: 24 loe/lisa Kasutajad arvavad:  :: 0 :: 1 :: 23
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
Naljatilk
HV kasutaja
Naljatilk

liitunud: 03.03.2006
sõnum 21.04.2010 16:54:47 vasta tsitaadiga
nene kirjutas:
Naljatilk, sa näed palju vaeva käsitsi XML-i parsimisega, aga kui sa laed Ajaxi päringuga XML-i, siis on brauser juba sinu eest kogu töö ära teinud ja sul jääb vaid üle kasutada XMLHttpRequest objektis sisalduvat XML DOM-i. Näiteks nii:

// olgu xhr meil XMLHttpRequest objekt, mis on just XML-i ära laadinud.
var dom = xhr.responseXML.documentElement;
var myygihind = dom.getElementsByTagName("myygihind")[0];
var km = dom.getElementsByTagName("km")[0];

Üritasin seda viisi kasuta, aga annab ikka ja jälle vea.

Hetkel näeb mu xmlHttpRequesti funktioon välja seesugune
javascript:
  1. function httpRequestReturn(url, alko){
  2.         if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
  3.                 yhendus = new XMLHttpRequest();
  4.         }
  5.         else { // code for IE6, IE5
  6.                 try {
  7.            yhendus = new ActiveXObject("Msxml2.XMLHTTP");
  8.        } catch (e) {
  9.            try {
  10.                yhendus = new ActiveXObject("Microsoft.XMLHTTP");
  11.            } catch (e) {}
  12.        }
  13.         }
  14.         yhendus.overrideMimeType('text/xml');
  15.        
  16.         yhendus.open("GET", url, false); // asynkroonne
  17.         yhendus.send(null);
  18.        
  19.         return yhendus.responseXML.documentElement;
  20. }


Edasi saadetakse see XMLobject vanale heale funktsioonile:
javascript:
  1. function xmlToSelect(Sisend, valitudId){
  2. var i = Sisend.getElementsByTagName("kokku")[0];
  3. ...


Selle kõige peale kuvab mulle error console
Error: Sisend.getElementsByTagName is not a function


Kas probleem on
1. süntaksis?
2. peaksin ma saatma selle responseXML-i otse AJAXi päringu funktsioonist kuhugi edasi?
3. peaksin ma handle-ima seda päringut koheselt AJAXi päringu funkstioonis?

Ikka ja jälle tänud,
Martin
_________________
Vaata pilti
Kommentaarid: 11 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 11
tagasi üles
vaata kasutaja infot saada privaatsõnum
-ordi-
HV vaatleja

liitunud: 03.06.2009
sõnum 21.04.2010 18:31:49 vasta tsitaadiga
Ma ei ole kunagi Javascriptiga kokku puutunud aga ma arvan et peaksid kasutama ülakomasid 'sisu', Pythonis on sama funktsioon ja seal tuleb kasutada ülakomasid.

xml.getElementsByTagName('item')[0];

Vb panin kanti!
Kommentaarid: 2 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 2
tagasi üles
vaata kasutaja infot saada privaatsõnum
nene
Kreisi kasutaja
nene

liitunud: 20.03.2004
sõnum 21.04.2010 22:43:36 vasta tsitaadiga
Huvitav. Proovisin järgi ja minul töötab küll. Lisan ka koodi, millega katsetasin:

javascript:
  1. function httpRequestReturn(url, alko){
  2.   // code for IE7+, Firefox, Chrome, Opera, Safari
  3.   if (window.XMLHttpRequest) {
  4.     var yhendus = new XMLHttpRequest();
  5.   }
  6.   else { // code for IE6, IE5
  7.     try {
  8.       yhendus = new ActiveXObject("Msxml2.XMLHTTP");
  9.     } catch (e) {
  10.       try {
  11.         yhendus = new ActiveXObject("Microsoft.XMLHTTP");
  12.       } catch (e) {}
  13.     }
  14.   }
  15.   yhendus.overrideMimeType('text/xml');
  16.  
  17.   yhendus.open("GET", url, false);
  18.   yhendus.send(null);
  19.  
  20.   return yhendus.responseXML.documentElement;
  21. }
  22.  
  23. function test() {
  24.   var dom = httpRequestReturn("test.xml");
  25.   alert(dom); // peaks ütlema [object Element] vms
  26.   var myygihind = dom.getElementsByTagName("myygihind")[0].childNodes[0].nodeValue;
  27.   alert(myygihind); // peaks ütlema 200
  28.   var km = dom.getElementsByTagName("km")[0].childNodes[0].nodeValue;
  29.   alert(km); // peaks ütlema 10
  30. }


ning XML:

<?xml version="1.0"?>
<kokku>
  <myygihind>200</myygihind>
  <km>10</km>
</kokku>


Lisaks veel paar märkust...

yhendus.open("GET", url, false); // asynkroonne


Kommentaar on vale - false määrab, et tehakse hoopis sünkroonne päring. Reaalses rakenduses soovitaksin kasutada siiski asünkroonseid päringuid.

function httpRequestReturn(url, alko){


Mõningane alkoholijoove? icon_biggrin.gif

Lõpetuseks veel ka see, et nagu näha pole XML DOM-i kasutamine mingi lust ja lillepidu. Parem on kasutada mõne teise library abi. Näiteks jQuery. Kui sa aga pole kohustatud oma andmevahetust just XML-is teostama, siis soovitaksin kasutada hoopis JSON-it, millega on palju mugavam ringi käjja kui XML-iga.

@-ordi-: JavaScriptis pole 'ülekomadel' ja "jutumärkidel" pea mingit sisulist vahet.
_________________
Mõistus otsas? Pane pinusse...
Kommentaarid: 24 loe/lisa Kasutajad arvavad:  :: 0 :: 1 :: 23
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
-ordi-
HV vaatleja

liitunud: 03.06.2009
sõnum 21.04.2010 22:49:40 vasta tsitaadiga
nene kirjutas:
Huvitav. Proovisin järgi ja minul töötab küll. Lisan ka koodi, millega katsetasin:

javascript:
  1. function httpRequestReturn(url, alko){
  2.   // code for IE7+, Firefox, Chrome, Opera, Safari
  3.   if (window.XMLHttpRequest) {
  4.     var yhendus = new XMLHttpRequest();
  5.   }
  6.   else { // code for IE6, IE5
  7.     try {
  8.       yhendus = new ActiveXObject("Msxml2.XMLHTTP");
  9.     } catch (e) {
  10.       try {
  11.         yhendus = new ActiveXObject("Microsoft.XMLHTTP");
  12.       } catch (e) {}
  13.     }
  14.   }
  15.   yhendus.overrideMimeType('text/xml');
  16.  
  17.   yhendus.open("GET", url, false);
  18.   yhendus.send(null);
  19.  
  20.   return yhendus.responseXML.documentElement;
  21. }
  22.  
  23. function test() {
  24.   var dom = httpRequestReturn("test.xml");
  25.   alert(dom); // peaks ütlema [object Element] vms
  26.   var myygihind = dom.getElementsByTagName("myygihind")[0].childNodes[0].nodeValue;
  27.   alert(myygihind); // peaks ütlema 200
  28.   var km = dom.getElementsByTagName("km")[0].childNodes[0].nodeValue;
  29.   alert(km); // peaks ütlema 10
  30. }


ning XML:

<?xml version="1.0"?>
<kokku>
  <myygihind>200</myygihind>
  <km>10</km>
</kokku>


Lisaks veel paar märkust...

yhendus.open("GET", url, false); // asynkroonne


Kommentaar on vale - false määrab, et tehakse hoopis sünkroonne päring. Reaalses rakenduses soovitaksin kasutada siiski asünkroonseid päringuid.

function httpRequestReturn(url, alko){


Mõningane alkoholijoove? icon_biggrin.gif

Lõpetuseks veel ka see, et nagu näha pole XML DOM-i kasutamine mingi lust ja lillepidu. Parem on kasutada mõne teise library abi. Näiteks jQuery. Kui sa aga pole kohustatud oma andmevahetust just XML-is teostama, siis soovitaksin kasutada hoopis JSON-it, millega on palju mugavam ringi käjja kui XML-iga.

@-ordi-: JavaScriptis pole 'ülekomadel' ja "jutumärkidel" pea mingit sisulist vahet.


Ok targem nüüd, muidu JSON'i asemel võid ka pilgu visata YAML'le, neid mõlemaid on tunduvalt mugavam kasutada kui XML'i.
Kommentaarid: 2 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 2
tagasi üles
vaata kasutaja infot saada privaatsõnum
Naljatilk
HV kasutaja
Naljatilk

liitunud: 03.03.2006
sõnum 22.04.2010 15:50:32 vasta tsitaadiga
nene kirjutas:
Huvitav. Proovisin järgi ja minul töötab küll. Lisan ka koodi, millega katsetasin:
function httpRequestReturn(url, alko){


Mõningane alkoholijoove? icon_biggrin.gif

Lõpetuseks veel ka see, et nagu näha pole XML DOM-i kasutamine mingi lust ja lillepidu. Parem on kasutada mõne teise library abi. Näiteks jQuery. Kui sa aga pole kohustatud oma andmevahetust just XML-is teostama, siis soovitaksin kasutada hoopis JSON-it, millega on palju mugavam ringi käjja kui XML-iga.

@-ordi-: JavaScriptis pole 'ülekomadel' ja "jutumärkidel" pea mingit sisulist vahet.

Tänud! Sain tööle.
Alko asi on see, et kasutasin hxr-i esmalt sõbra kokteili lehe tegemisel ja jäi tobedusest sisse.

JSON-i osas on nii, et ei saanud hetkel eval()-iga eriti hästi hakkama, nädalavahetusel uudistan lähemalt, aga tundub tõepoolest kõvasti mugavam olevat. Ja jQuery peale liigun ka kindlasti varsti, hetkel on see, et üritan Javascriptiga esmalt sinasõbraks saada. Kunagi läheb ikka neid teadmisi vaja ja uute keelte peale on lihtsam liikuda, kui vanad pisut selgemad.

-ordi-, ma olen ise ka juba paar aastat tegelenud PHP-ga ning tean täpselt, kui tobedaid vigu saab valede märkide kasutamisel teha. Seetõttu olen erinevate vigade otsimise käigus juba jutumärkide kasutuse omale kenasti selgeks teinud. icon_smile.gif
_________________
Vaata pilti
Kommentaarid: 11 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 11
tagasi üles
vaata kasutaja infot saada privaatsõnum
näita postitusi alates eelmisest:   
uus teema   vasta Tarkvara »  Programmeerimine »  Javascripti abil "option" tägi muutmine
[vaata eelmist teemat] [vaata järgmist teemat]
 lisa lemmikuks
näita foorumit:  
 ignoreeri teemat 
sa ei või postitada uusi teemasid siia foorumisse
sa ei või vastata selle foorumi teemadele
sa ei või muuta oma postitusi selles foorumis
sa ei või kustutada oma postitusi selles foorumis
sa ei või vastata küsitlustele selles foorumis
sa ei saa lisada manuseid selles foorumis
sa võid manuseid alla laadida selles foorumis



Hinnavaatlus ei vastuta foorumis tehtud postituste eest.