Netvořil někdo konfigurátor produktu v AJAX+PHP+MySQL+JS+JQ? – JavaScript, AJAX, jQuery – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu

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

 

8. 4. 2015   #1
-
0
-

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.

Nahlásit jako SPAM
IP: 90.182.205.–
8. 4. 2015   #2
-
0
-
Nahlásit jako SPAM
IP: 90.182.205.–
peter
~ Anonymní uživatel
4016 příspěvků
9. 4. 2015   #3
-
0
-

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.

Nahlásit jako SPAM
IP: 2001:718:2601:1f7:7092:30...–
peter
~ Anonymní uživatel
4016 příspěvků
9. 4. 2015   #4
-
0
-

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>
Nahlásit jako SPAM
IP: 2001:718:2601:1f7:7092:30...–
peter
~ Anonymní uživatel
4016 příspěvků
9. 4. 2015   #5
-
0
-

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.

Nahlásit jako SPAM
IP: 2001:718:2601:1f7:7092:30...–
9. 4. 2015   #6
-
0
-

#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! :)

Nahlásit jako SPAM
IP: 90.182.205.–
9. 4. 2015   #7
-
0
-

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

Nahlásit jako SPAM
IP: 90.182.205.–
peter
~ Anonymní uživatel
4016 příspěvků
9. 4. 2015   #8
-
0
-

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.

Nahlásit jako SPAM
IP: 2001:718:2601:1f7:7092:30...–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 16 hostů

Podobná vlákna

PHP/AJAX/jQuery — založil Matthew

JQuery ajax + php — založil Marek

3D konfigurator — založil ondrike

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032024 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý