PopUp okno pro zadávání dat

Webdesign, HTML, CSS, Flash, PHP, ASP, .NET, JavaScript. Kritika www stránek na Smetišti.

Moderátor: Moderátoři Živě.cz

Odeslat příspěvekod Jirka0376 4. 11. 2016 10:22

Dobrý den,

měl bych prosbičku, jak vytvořit PopUp okno pro zadávání dat. Upřesním to na příkladu:

V práci máme webovou aplikaci na evidenci pracovní doby zaměstnance (přítomen, nepřítomen, oběd, ...). Když se jdu přihlásit do práce nebo na oběd, tak najedu na webovou stránku aplikace a je tam tlačítko "Nový průchod terminálem". Poté, co na to tlačítko kliknu, objeví se PopUp okno, kde lze zadat řadu údajů (pracovník, čas, kategorie, popis). Přitom webová stránka vespod zůstává vidět a beze změny, dokud v PopUp okně nekliknu na tlačítko "Uložit". Pokud údaje uložím, mizí PopUp okno a provede se update aktuální webové stránky.

Momentálně jsem zatím schopen vyřešit toto přes novou webovou stránku stylem:

webová stránka s výpisem -> nová webová stránka pro zadání dat -> načtení původní stránky s již uloženými daty v databázi.

Samozřejmě, že PopUp okno se mi líbí více. :-)

Děkuji za radu, případně konkrétní odkaz na informace.

Jirka
Jirka0376
Kolemjdoucí

Odeslat příspěvekod karlos00x 4. 11. 2016 10:36

Jmenuje se to javascript. Usnadni ti to pouziti JQuery (JQuery UI) nebo treba Angularu. Ale obavam se, ze tohle nedas pokud se ptas prave tak jak se ptas.
Upgrade který má smysl: SSD. Zažijete svižný počítač.
karlos00x
Pokročilý

Odeslat příspěvekod nofire 4. 11. 2016 15:00

Ahoj abys neřekl, že ti tady nikdo neporadí tak zkus třeba tohle:
vytvoř dvě stránky, první bude vypadat takhle:
Kód: Vybrat vše
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
</head>
<body>
<input name="butt1" type="button" onclick="window.open('okno2.html','Název okna','toolbar=no,menubar=no,scrollbars=no,width=500px,height=505px,top=250px');" value="OTEVŘI OKNO">
</body>
</html>


pak udělej druhou stránku, která se bude jmenovat okno2.html:
Kód: Vybrat vše
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
</head>
<body>
TOHLE JE OKNO 2 <br>
<input name="Button1" type="button"  onclick="window.close();" value="ZAVŘI SE" />
</body>
</html>


Na stránce okno2.html můžeš použít při zavírání "opener", tím můžeš na stránce která otevřela okno2 ... a to ti nenapíšu. :-)) Protože bys to jen suše opsal. Zbytek najdeš třeba tady : https://www.jakpsatweb.cz/javascript/objekt-window-metody.html#open Já mám tu zkušenost, že pokud se na něco ptám v diskuzi a současně hledám sám řešení, většinou najdu sám řešení dřív.

Ahoj Milan
Ve víně je pravda... ale ve kterém ? Stále ho hledám.
nofire
Junior
Uživatelský avatar

Odeslat příspěvekod karlos00x 4. 11. 2016 16:30

to je hezke, ze se ti to druhe okno zavre, ale co data?
Upgrade který má smysl: SSD. Zažijete svižný počítač.
karlos00x
Pokročilý

Odeslat příspěvekod nofire 4. 11. 2016 23:17

No a o tom to je, ať si tazatel dohledá řešení sám aby se něco naučil. Při uzavření můžu jednak poslat data ze stránky okno2.html do databáze a po uložení zavolat stránku, která otevřela stránku okno2.html zavolat script vJQUERY, který mi občerství stránku. Samozřejmě stránka, která bude ukládat data bude v php nebo asp. Třeba takhle :
Kód: Vybrat vše
<script type="text/javascript">
  $(document).ready(function() {
//uložení formu
           $.post("ulozit.asp", $(this).serialize(), function(vystup) {
            $("#data").html(vystup);
              })

//občerstvení tabulky s datama
$("#id_tlacitka").click(function() {
          $.get('poslidata.asp?data=1', function(vystup){
         $("#okno").html(vystup);
         }) 
</script>


je to vytržený z kódu tak to asi nebude fungovat.
Ve víně je pravda... ale ve kterém ? Stále ho hledám.
nofire
Junior
Uživatelský avatar

Odeslat příspěvekod Jirka0376 5. 11. 2016 14:24

Ahoj,

díky moc oběma. Samozřejmě, že jsem nechtěl napsat celý kód. :-) Chci se to naučit a zajímalo mne hlavně čím se to dá udělat a tím pádem nasměrování ke správným informacím. Samozřejmě, že se to dá řešit novým oknem. Mě spíš šlo o to, jak se dá zařídit, aby se webová aplikace chovala jako desktopová: tzn. jen jedno otevřené okno, zadávací formuláře atd.

Vím, že to jde udělat (už jsem to na webu viděl), ale zřejmě jsem zadával do vyhledávače špatné dotazy. Zkusím se v první řadě mrknout podrobněji na jQuery a uvidíme.

Díky :-)
Jirka0376
Kolemjdoucí

Odeslat příspěvekod karlos00x 5. 11. 2016 18:52

JQuery, Angular... nebo si to treba otevrit jen pomoci pitomyho Colorbox(coz je pripraveny jquery).

Obecne: potrebujes velmi dobre umet HTML. Asi budes chtit umet CSS.
No a pak mas jednu vec frontend (tedy neco z toho js) a pak backend (php, django, js, java, C, ruby... ).
Upgrade který má smysl: SSD. Zažijete svižný počítač.
karlos00x
Pokročilý


Kdo je online

Uživatelé procházející toto fórum: Žádní registrovaní uživatelé a 0 návštevníků