Netvořil někdo konfigurátor produktu v AJAX+PHP+MySQL+JS+JQ? – JavaScript, AJAX, jQuery – Fórum – Programujte.com

Potřebuji vytvořit jednoduchý klikací HTML konfigurátor produktu a narážím na problém, jak generovat postupné dropdown input selecty s relevantními položkami.

Příklad:

1. Z dropdown vyberu 1 položku (např. "Bike")
2. AJAX+PHP provede dotaz do MySQL a k položce "Bike" vybere příslušné "Modely" a z nich se "nějak" vygeneruje další dropdown input select
3. Zvolím položku (třeba "Honda") v dropdown selectu "Model" a proces AJAX+PHP se opakuje a vygeneruje se další dropdown input select
4. takto se to opakuje až do nadefinování všech parametrů produktu
5. SUBMIT button na konci moje volby uloží do db

Tento konfigurátor by měl zároveň někde na předem zvolené pozici zobrazovat i aktuální cenu, která se přidáváním položek bude nasčítávat a dynamicky refreshovat, takže zákazník před odesláním konečného formuláře bude celkovou cenu znát.

Přikládám náčrtek požadované funkčnosti.

Nebylo by jednodušší toto řešit formou vícekrokového formuláře i přes potenciálně rozvětvený rozpad položek?

Moc díky za náměty, případné kusy kódu by nám moc pomohly.

Připojen obrázek.

Připojen obrázek.

Pro lepší názornost jsem tu čmáranici přepsal do excelu.

A zkousel jsi celou tabulku pretahnout do js a generovat ty selecty pomoci js bez nutnosti neustale kontaktovat server? Ona 10k tabulka v js zapsana jako text je velikostne stejna jako 10k obrazek. Kdezto 100 prenosu na server a zpet prenasi navic asi 1k dat v hlavicce, to mas uz 100k. A to neustale cekani az server odpovi....

Ono, ajax je krasna vec, ale musi se to umet spravne pouzivat.

treba...
 

<div id="xxx0"></div>
<div id="xxx1"></div>
<div id="xxx2"></div>

<script>
var data;
data = {
0: "Hlavní město Praha;Jihočeský kraj;Jihomoravský kraj;Karlovarský kraj;Kraj Vysočina;Královéhradecký kraj;Liberecký kraj;***Moravskoslezský kraj;***Olomoucký kraj;Pardubický kraj;Plzeňský kraj;Středočeský kraj;Ústecký kraj;Zlínský kraj",
//cislokraje
1: {7: "Bruntál;Frýdek-Místek;Karviná;Nový Jičín;***Opava;***Ostrava-město",
    8: "***Jeseník;Olomouc;Prostějov..."
   },
2: {7: {4: "Hlučín;Kravaře;Opava;Vítkov;Bělá;Bohuslavice;Bolatice;Branka u Opavy;Bratříkovice;Brumovice;Březová;Budišov nad Budišovkou;Budišovice;Čermná ve Slezsku;Darkovice;Děhylov;Dobroslavice;Dolní Benešov;Dolní Životice;Hať;Háj ve Slezsku;Hlavnice;Hlubočec;Hněvošice;Holasovice;Hrabyně;Hradec nad Moravicí;Chlebičov;Chuchelná;Chvalíkovice;Jakartovice;Jezdkovice;Kobeřice;Kozmice;Kružberk;Kyjovice;Lhotka u Litultovic;Litultovice;Ludgeřovice;Markvartovice;Melč;Mikolajice;Mladecko;Mokré Lazce;Moravice;Neplachovice;Nové Lublice;Nové Sedlice;Oldřišov;Otice;Píšť;Pustá Polom;Radkov;Raduň;Rohov;Skřipov;Slavkov;Služovice;Sosnová;Staré Těchanovice;Stěbořice;Strahovice;Sudice;Svatoňovice;Šilheřovice;Štáblovice;Štěpánkovice;Štítina;Těškovice;Třebom;Uhlířov;Velké Heraltice;Velké Hoštice;Větřkovice;Vršovice;Vřesina;Závada",
        5: "ostrava1,os2,os3"
       },
    8: {0: "Jeseník;Javorník;Zlaté Hory..."
       }
   }
};

function multiselWrite(name,cat)	//,data
{
var i, j, arr, el, cat2, str, del,divname;
del  = ';';
cat2 = ((''+cat).indexOf(del)>0) ? cat.split(del) : [cat];
j    = cat2.length;
divname = name + (j - 1);
el   = document.getElementById(divname);
arr = data;
if (arr[j-1])
  arr = arr[j-1];
else return;
if (j>1)
{
for (i=1;i<j;i++)
	{
	if (arr[cat2[i]])
		{
		arr = arr[cat2[i]];
		}
	else	{
		return;
		}
	}
}
if (el)
  {
  str = '';
  arr = arr.split(";");
    str += "\n"+'<option value="'+(cat2.join(del))+'"> --- <\/option>';
  for(i=0;i<arr.length;i++)
    {
    cat2[j] = i;
    str += "\n"+'<option value="'+(cat2.join(del))+'">'+arr[i]+'<\/option>';
    }
  el.innerHTML = "\n"+'<select onchange="multiselRoll(this);" name="sel_' + divname + '">' + str + '<\/select>';
  }
}

function multiselRoll(el)
{
var m,n;
m = el.parentNode.id;
m = m.replace(/[^a-zA-Z]+/g,'');
n = el.options[el.selectedIndex].value;
multiselWrite(m,n);
}

function init()
{
multiselWrite('xxx','0');
multiselWrite('xxx','0;7');
multiselWrite('xxx','0;7;4');
}

init();
</script>

nebo

<div id="sel0"></div>
<div id="sel1"></div>

<script>
var data, i;
data = "a,b,c;\
A,B,C;\
D,E,F;\
G,H,I".split(';');

function writeSel(m,n)
{
var i, str, el2;
el2 = document.getElementById('sel'+m);
if (el2 && data[n])
  {
  str = '';
  for(i=0;i<data[n].length;i++)
    {str += "\n"+'<option value="'+i+'">'+data[n][i]+'<\/option>';}
  el2.innerHTML = "\n"+'<select onchange="roll(this);">' + str + '<\/select>';
  }
}

function roll(el1)
{
var m,n;
m = el1.parentNode.id;
m = m.replace(/\D+/,'') * 1 + 1;
n = el1.options[el1.selectedIndex].value * 1 + 1;
writeSel(m,n);
}

function init()
{
for(i=0;i<data.length;i++)
  {data[i] = data[i].split(',');}
writeSel(0,0);
writeSel(1,1);
}

init();
</script>

Dokonce bych to resil tak, ze to ulozim do souboru.js , aby to nemuselo pokazde generovat php. Staci to generovat jen pri zmene v db.

#4 peter
Díky za skvělé příklady, určitě by bylo efektivnější přepsat tabulku do js. Podle uvedeného příkladu však mám nadefinované selecty dopředu, já je potřebuju generovat dynamicky na základě předchozí volby. Tím chci zajistit, aby se zákazníkovi nabízely po paždé volbě dál a dál jen relevantní položky.

Př.
Když v prvním selectu zvolím "Car", nabídne se mi v dalším selectu "Ford, Audi, Volvo, ...". Kdzž ale zvolím "Bike", nabídne se mi "Honda, Yamaha, Suzuki, ..."

To tyto dva příklady bohužel neřeší a pokud ano, tak prosím o ránu palicí do hlavy! :)

#5 peter
jo s tím jsem v pohodě

A chces ranu z leve nebo prave strany? :)

V podstate v js si muzes udelat databazi, nekolik tabulek. Nejspis to bude kompletni export nekolika tabulek z db. A pak je normalne pres js propojis.

Pri vetsim objemu dat bys to musel asi rozsekat do vic souboru a nacitat to pres ajax, az kdyz bude treba. To uz by se pak vyplatilo resit to pres ajax celkove. A nebo castecne, posledni selecty.

Na ajax muzes pouzit i iframe.

<iframe id=xxx styel="display:none;"></iframe>
<script>
document.getElementById('xxx').src = "adresa.php?a=1&b=3&c=1&"+new Date().time(); // nahodne cislo, kvuli kesovani
function generujSelect(str) {alert(str);}
</script>

Prebiras to pak pres php (adresa.php), kde mas js, ktere generuje select
<script>window.top.generujSelect("....data....")</script>
A nad tim mas php kod, ktery podle parametru v GET vygeneruje prislusny select.

Ale tomuto reseni je lepsi se vyhnout. Hacker prohledne kod a tve stranky muze pretizit generovanim nesmyslnych selectu. Tamten jeden js by se pekne kesoval a hacker by ti nezatezoval databazi.