DevProTalk - JS add/remove html element + dropdown

DevProTalk (http://www.devprotalk.com/index.php)

- (X)HTML, JavaScript, DHTML, XML, CSS (http://www.devprotalk.com/forumdisplay.php?f=8)

- - JS add/remove html element + dropdown (http://www.devprotalk.com/showthread.php?t=2575)

JS add/remove html element + dropdown

Pozdrav,

Imam jedan mali problem. Vec par sati pokusavam da sredim neku formu za narucivanje, medjutim vise ne znam gde gresim.

Demo moje forme se nalazi na: http://local.twix.name/form.html

Za dodavanje elemenata koristio sam:
http://www.dustindiaz.com/add-and-re...th-javascript/
(http://www.dustindiaz.com/basement/addRemoveChild.html)

U cemu je zapravo problem, naime izborom proizvoda dobijaju se raspolozive boje za dati proizvod,... medjutim kada dodam novi element (artikal) uz pomoc gore navedene JS, jednostavno novi element ne cita vrednosti kako bi trebalo.

Za ucitani element... koristi se:

window.onload = function() {
set_produkte();
}

Medjutim,.. kada dodam novi artikal, predpostavljam da set_produkte() treba da dodam i u addEvent() medjutim ne znam na koji nacin, ni kako tacno.

Onaj ko poznaje dobro JS ovo mu je verovatno smesno, ali ja stvarno nemam ideju sta da radim.

Svaka ideja je dobrodosla :1043:

Ja ne razumem pitanje, a link ti ne radi. Ajde postavi negde deo koda koji te muči.

Link: http://www.twix.name/form.html

Pa bilo bi dobro kad bi ja znao u cemu je problem :(
Znaci imam cascade dropdown, na osnovu koga kada se izabere proizvod prikaze raspolozivu boju za dati proizvod i imam deo za dodavanje novog artikla. Sve radi super dok ne dodam novi proizvod (artikal), jer unutar tog, da nazovem, niza, treba da se popuni drugi niz. Ne znam kako najlakse da objasnim,...

Kôd:

function set_farbe() { 

  var select_artikel = document.senden_form.artikel;

  var select_farbe = document.senden_form.farbe;

  var selected_farbe = select_artikel.value;

  if(!selected_farbe) {

    select_farbe.options.length=0;

    select_farbe.options[select_farbe.options.length] = new Option('-------');

    return;

  }

  select_farbe.options.length=0;

  ext_modell_produkte = modell_produkte[selected_farbe];

  for(key in ext_modell_produkte) {

    select_farbe.options[select_farbe.options.length] = new Option(ext_modell_produkte[key], key);

  }

}



function set_produkte() {

  var select_artikel = document.senden_form.artikel;

  for(key in produkte) {

    select_artikel.options[select_artikel.length] = new Option(produkte[key], key);

  }

}

window.onload = function() { 

set_produkte();

}

I deo za dodavanje elementa:

Kôd:

function addEvent()

{

var ni = document.getElementById('myDiv');

var numi = document.getElementById('theValue');

var num = (document.getElementById("theValue").value -1)+ 2;

numi.value = num;

var divIdName = "my"+num+"Div";

var newdiv = document.createElement('div');

newdiv.setAttribute("id",divIdName);

newdiv.innerHTML = "Novi element";

ni.appendChild(newdiv);

document.getElementById('myDiv').focus();

}



function removeEvent(divNum)

{

var d = document.getElementById('myDiv');

var olddiv = document.getElementById(divNum);

d.removeChild(olddiv);

}

Umesto 'Novi element' stavio sam celu tabelu sa podacima da se dodaje, videces na primeru forme sa linka...

Najbolje da pogledas source stranice da ne kopiram ceo code ovde.
Prvo sam pomislio da dodam

Kôd:

document.getElementById('myDiv').focus();

set_produkte();

Medjutim lose razmisljam, probao sam i onClick set_produkte(), takodje ne moze...

ne znam da li je to problem, ali mi je prvo upalo u oči. koliko god puta da dodaš novi artikal, sva polja se isto zovu, tj imaju isti id, a to baš i nije dobro. verovatno se svaki put kad pozoveš set_produkte() ta funkcija lepo izvrši, ali samo za prvi artikal, tako da razmisli malo kako da ti polja imaju različite id-jeve, pa ćeš time verovatno rešiti i ovaj problem.

Čekaj ovako. Kad dodaš novi artikal, kreira ti se novi par comboa. Šta je problem, što je novi combo sa artiklima prazan? Ne vidim da ga negde nečim puniš.

Takođe, onchange na novom combu vezan je za funkciju koja radi sa fiksnim form elementima, tj. uvek menja prvi dropdown za izbor boja.

Prvi artikal koji vidis napunjen je:

window.onload = function() {
set_produkte();
}

A svaki sledeci koji se doda...

Citat:

Ne vidim da ga negde nečim puniš.

Pa to je ono sto mene i muci, kako svaki sledeci artikal koji dodam da popunim...

Pa pozovi istu funkciju. S tim što ćeš morati da je proširiš za parametar pomoću koga će znati koji dropdown treba da napuni.

Posle toga ćeš imati još par problema da rešiš, pomenuti sa punjenjem dropdowna sa bojama, kao i prosleđivanje i serversko prihvatanje vrednosti iz dinamički kreiranih kontrola. Drugim rečima, ako nisi iskusan sa JS-om, tvoj kod će postati masa nerazmrsivih dodela i getElementById-jeva.

Ja bih ti savetovao da se ili maneš cele client-script akrobatike i sve uradiš serverski, ili redizajniraš formu tako da u svakom trenutku imaš samo jedan par dropdownova. A u svakom slučaju da razmotriš učenje jQuery-ja ili nečeg sličnog.

Srećno! ;)