Autor | Zpráva | ||
---|---|---|---|
pepan Profil * |
#1 · Zasláno: 29. 9. 2007, 20:18:50
Ahoj, chtěl jsem se zeptat, jestli se dá udělat refresh "jen určité" části stránky. Mám pomocí PHP udělaný skript, který zobrazuje graf (doba od začátku nějaké akce). Jde o kombinaci PHP a CSS a já bych potřeboval, přibližně každou minutu aktualizovat ten graf a ne celou stránku (kvůli dlouhému načítání a přesnosti počítadla). Díky
|
||
los Profil * |
#2 · Zasláno: 29. 9. 2007, 21:16:38
Ak je to obrázok a má nastavené, aby sa nekešoval, tak by malo stačiť len znova nastaviť zdroj (var img = document.getElementById("obrazok"); img.src = img.src;).
Ak to nie je len obrázok, tak zadaj do Google: Ajax. |
||
carlik Profil * |
#3 · Zasláno: 29. 9. 2007, 21:22:58
obrázek to bohužel není, je to, tabulka, ve které se mění velikost barvy pozadí... konkrétně tady .... S tím googlem je mi to jasné, ale nevím co mám konkrétně hledat...
|
||
pepan Profil * |
#4 · Zasláno: 29. 9. 2007, 21:26:36
ještě něco k tomu, na té stránce je použit meta tag refresh po 5-ti vteřinách, čemuž se chci právě vyhnout... Další možnost, která mě teď napadla by byla iframe, ale tomu se raději chci také vyhnout
|
||
Petroff Profil |
#5 · Zasláno: 29. 9. 2007, 22:08:40
Právě pro tohle se hodí javascript a ne PHP. Pokud ovšem potřebuješ v realném čase komunikovat se serverem tak asi buď čistokrevný AJAX nebo snazší (a nikoliv asynchronní) způsob komunikace. Mám tu jednu ukázku, není to složité:
Dynamické načítání obsahu do HTML z aplikace přes JavaScript http://www.chose.cz/weblog/index.php/dynamicke-nacitani-obsahu-pres-ja vascript/ <script type="text/javascript"> var vystup = document.getElementById('vystup'); function stahniData(akce) { // odmazeme stary skript, pokud existoval var hlavicka = document.getElementsByTagName('head')[0]; var dataLoader = document.getElementById('scriptLoader'); if(dataLoader) hlavicka.removeChild(dataLoader); // vytvorime novy element script script = document.createElement('script'); script.id = 'scriptLoader'; script.src = 'javascript-rpc.php?akce='+akce+'&r='+Math.random(); // POZOR, DULEZITE!! Skript musime vlozit do stranky // pomoci DOM - appendChild() // Ihned po vlozeni prohlizec stahne skript a spusti jej x = document.getElementsByTagName('head')[0]; x.appendChild(script); return false; } function vypisText(txt) { // nejsnazsi cesta, vlozime novy kod ke staremu na konec vystup.innerHTML += txt; } function chyba(txt) { // obycejny alert s hlaskou alert(txt); return true; } function vymazData() { // v jednoduchem cyklu smazeme vsechny elementy v prvku vystup while(vystup.hasChildNodes()) vystup.removeChild(vystup.childNodes[0]); return false; } stahniData('dolly'); </script> Celé kouzlo je pouze ve správném využití DOM a především funkce createElement(). Doporučuji prostudovat příklad na samotatné stránce http://www.chose.cz/priklady/javascript-rpc/ Tento způsob načítání dat funguje spolehlivě ve všech verzích IE, Gecko a Opeře. Jediné problémy jsou v prohlížečích na jádře KHTML (Konqueror, Safari), kde nedojde ke stažení dynamicky vytvořeného elementu script. |
||
Petroff Profil |
#6 · Zasláno: 29. 9. 2007, 23:12:05
Můšeš uvést konkrétní použití (anebo jde fakt jen o to vyslat jednou za čas 1 číslo a převést ho na width:3% a současně tamtéž zapsat) ?
No nejdřív si to sprav => máš tam sice: .graph .bar span { position: absolute; left: 1em; } </style> <div class="graph"><strong class="bar" style="width: 3%;">3%</strong></div> ale ten span (počítám že ho tam máš na to číslo 3%) vůbec nepoužíváš a tak ti v IE6 barva obklopí celé číslo 3%.Je to díky tomu, že se width:3% roztáhne na šířku celého textu. TAKHLE TO FUNGUJE I V IE6: <div class="graph"><strong class="bar" style="width: 3%;"><span>3%</span></strong></div> |
||
pepan Profil * |
#7 · Zasláno: 30. 9. 2007, 10:17:15
Jde přesně o to, aby se to číslo u width ( = proměnná v PHP ) aktualizovalo, protože pokud by měl příchozí návštěvník stránku, na které ten graf bude, jen zobrazenou a nepřecházel by na jiné nebo pokud by nepoužil refresh, tak by ten graf byl celou dobu stejný...
|
||
Petroff Profil |
#8 · Zasláno: 30. 9. 2007, 15:24:48
Takhle vypadá ten tvůj ukazatel aktualizovaný pouze javaskriptem:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Graf</title> <script type="text/javascript"> window.onload=function(){ var counter=0, step = 200; /* KROK O 1% (v milisekundách) */ /********************************************************************/ function nastav(width) /* NAPŘ. nastav(55) nastaví ukazatel na 55% */ { el = document.getElementById("out"); el.innerHTML = width+"%"; el.style.width = width+"%"; el.parentNode.style.width = width+"%"; } /********************************************************************/ function update(){nastav(counter); counter = ++counter%101 } setInterval(update,step); } </script> </head> <body> <style> .graph { position: relative; width: 200px; margin: 1em; padding:1px; border: 1px solid black; color: red; font: bold 14px sans-serif; } .graph strong { position: absolute; left: 0.5ex; margin-left: 80%; } .graph div { position: relative; background: #B1D632; height: 3ex; line-height: 3ex; } </style> <div class="graph"><div><strong id="out"></strong></div></div> <br /> <div class="graph"><div style="width: 1%"><strong style="width: 1%"> 1%</strong></div></div> <div class="graph"><div style="width: 99%"><strong style="width: 99%"> 99%</strong></div></div> </body> </html> Nastavil jsem vysokou rychlost: krok +1% ~ 200ms kvůli toho, aby sis mohl prohlídnout na ukazateli celý rozsah 0-100% Klíčová je funkce nastav(procenta) Pokud jde o jakousi časomíru (jsem to tak pochopil), tak stačí vhodně nastavit proměnnou STEP (1minuta: step=60000) a hotovo. Pokud potřebuješ data ze serveru, tak ponecháme: styly + funkci nastav() + xhtml řádek: <div class="graph"><div><strong id="out"></strong></div></div> a pokračujeme... |
||
pepepa Profil * |
#9 · Zasláno: 2. 10. 2007, 13:34:27
a nedalo by se to nejak skombinovat s PHPkem?
Mam totiz takovyhle zdrojak (ty promenny kdy akce zacina a konci potom budu tahat z databaze)... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
||
pepan Profil * |
#10 · Zasláno: 2. 10. 2007, 19:48:04
pomůže mi prosím někdo??
|
||
Petroff Profil |
#11 · Zasláno: 3. 10. 2007, 09:37:45 · Upravil/a: Petroff
Promiń, až dnes jsem si přečetl tvůj poslední příspěvek, něco takového jsem očekával, takže to určitě snadno půjde.
Jinak - pustil si ten můj kód ? Vyhovuje ti ta grafická úprava ? Popíšu ti jak to bude fungovat (až to sesmolím). Na stránce bude trvale (součást HTML stránky): - styly - informační okénko hned na začátku: <p id="inf"></p> .......pěkně ho ostyluj - funkce pro zápis do tohoto okénka: <script> function zapis(txt){document.getElementById("inf").innerHTML=txt;}</script> Na stránce nebude (funkční): <meta http-equiv="Refresh" content="5" /> (respektive bude kvůli uživatelům bez JS, ale pokud je javascript zapnutý, bude to zrušeno->předvedu) ====================================================================== ============================================ Pokud akce: (1) ještě nezačala ------------------------ => echo "<script> var vterin_do_akce=XXXX [.....následuje script[No.1] který sepíšu.....]</script>" <Činnost scriptu> <1a> Do info-okénka začne každou vteřinu psát aktualizovaný text: zapis("Akce zacíná za "+ days + " dní , " + hrs + " hodin , " + mins + " minut a " + secs + " vterin.") <1b> PO DOBĚHNUTÍ ČEKÁNÍ (vterin_do_akce=0) NAČTE STRÁNKU: windows.location.reload() Pokud akce: (2) probíhá --------------------- => echo "<script> var vterin_ubehlo=XXXX, vterin_celkem=YYYY [.....následuje script[No.2] pouze upravím ten z minulého příspěvku...]</script>" => echo "<div class="graph"><div><strong id="out"></strong></div></div>" <Činnost scriptu> <2a> Do info-okénka zapíše:zapis("Akce probíhá....viz ukazatel průběhu/NEBO TAK NĚJAK/") <2b> Zavolá funkci nastav(procenta) a opakuje každou vteřinu, aktualizovaná hodnota je: procenta= Math.round(vterin_ubehlo/vterin_celkem) <2c> PO DOBĚHNUTÍ UKAZATELE NA 100% (vterin_ubehlo==vterin_celkem) NAČTE STRÁNKU: windows.location.reload() Pokud akce: (3) skončena --------------------- To už si udělej jak chceš, ale protože <p id="inf"></p> je stálý prvek na této stránce a JS funkce k zápisu taky, použij ho(ji) k výpisu sdělení o ukončení akce. Takhle: echo "<script> zapis("....akce skončila......")</script>" NAPIŠ JESTLI JSI PRO A PUSTÍM SE DO TOHO (otázka hodiny,max.dvou) TY BYS MUSEL VYROBIT V PHP VÝPOČET (POPŘ. PŘEVEDENÍ NA VTEŘINY) HODNOT: vterin_do_akce, akce-ubehlo, akce-celkem |
||
pepepa Profil * |
#12 · Zasláno: 3. 10. 2007, 11:15:56
Ahoj, určitě bych zájem měl, jen nevím, kdy se k tomu dostanu, ale počítám tak nejpozději zítra večer nebo v pátek ráno, s těmi výpočty to určitě nebude problém... Jo a ta grafická úprava vyhovuje. Předem díky
|
||
Petroff Profil |
#13 · Zasláno: 3. 10. 2007, 16:19:08
No zjistil jsem, že do zítra (max pozítři) se zbavím starých restů a budu mít čas(a klid!).
|
||
pepepa Profil * |
#14 · Zasláno: 4. 10. 2007, 09:26:08
Petroff : Ok, tak snad zitra, dneska na to cas mit nebudu, protoze jsem ve skole do 8 a pak jedu z Plzne na Tabor, takze bych mel cas, ale az pozde vecer, coz asi nebude mit cenu
|
||
Petroff Profil |
#15 · Zasláno: 5. 10. 2007, 16:58:01
Tak jsem doma a můžu se do toho pustit.
1 URL adresa .... 1 dokument (zdroják)na serveru.....ale 3 možné podoby (to obstará PHP ) Nejdřív udělám skript č.1 = ve zdrojáku to bude toto: <?PHP......... $cas_ted = mktime(); $cas_zacatek =......; $cas_konec = .......; $cas_interval= $cas_ted - $cas_zacatek; if ( $cas_interval < 0 ) // nacte script 1 (akce nezacala) print "<script> var do_akce=-($cas_interval); ......</script>" elseif...... ?> [sice php neznám, ale všiml jsem si že jsou 2 funkce k zápisu - echo a print - a že print umí zapsat přímo hodnotu proměnné] Můžeš mi sdělit co se přesně zapíše ? (hodnota proměnné bude např. $cas_interval=-1234): print "..... var do_akce=-($cas_interval);....."; Jde mi o to že na výrazu: var do_akce=--1234; by JS hodil chybu, kdežto var do_akce=-(-1234)je v pořádku ] |
||
Petroff Profil |
#16 · Zasláno: 5. 10. 2007, 19:56:31
Narazil jsem na problém: umístil jsem na stránku <meta http-equiv="Refresh" content="10" /> aby uživatel bez JS mohl mít aspoň nějak aktualizovanou stránku, a přestože JS spolehlivě tento tag odstraní, tak s křížkem po funuse (dojde k refreši)
Vychází mi jediné řešení (kromě nápadu se na uživatele bez JS vykašlat) = mít 2 verze stránky: A.http://strankaA.html - to je ta, kterou v současné době máš a do které se přidá řádek <script type="text/javascript">window.location="http://strankaB.html"</script> Tento kód pokud funguje JS načte verzi B B.http://strankaB.html - čistě JS verze kterou vyrábíme Takže pokud budou 2 verze, nepřijde nic z PHP co máš nazdar |
||
los Profil * |
#17 · Zasláno: 6. 10. 2007, 01:14:38
IMHO nahrávať znovu stránku (location.reload) v prípade prechodu z jedného stavu do druhého je zbytočné (klient z toho nezíska nič nové). Rovnako zbytočný sa mi zdá pravidelný refresh pre používateľov bez podpory JavaScriptu (kto nepodporuje JavaScript, zrejme očakáva, že sa mu nebudú informácie dynamicky aktualizovať).
Spravil by som to tak, že celá tá vec by bola v div id=msg a JavaScriptom by sa obnovoval jeho obsah. Jednoduchý príklad, ktorý si môžeš upraviť podľa svojich predstáv: http://los.php5.cz/jpw/time.php |
||
Petroff Profil |
#18 · Zasláno: 6. 10. 2007, 17:01:03
No vidíš, vykašlal jsem se na synchronizaci v klíčových momentech, stránka trochu nakynula (jen maličko) ale zato se značně zredukuje PHP režie, pokud nebude stránka pro uživ. bez js. Ale já bych ji klidně udělal, je to maličkost navíc.
Vlastně se části výpočtu se dají libovolně přesouvat z js do php a naopak (tedy ty inicializační). JS pracuje s vteřinami, tak ať PHP dodá 2 vstupní hodnoty = je to oboustranně idealní. los kto nepodporuje JavaScript, zrejme očakáva, že sa mu nebudú informácie dynamicky aktualizovať Dovoluji si nesouhlasit. Mnozí to mají z důvodů bezpečnostních a že pak musí oželet dynamické aspekty u stránek s JS je důsledek (nikoli účel). malé upozornění - nastav si správný <meta....charset=...> já v poslední době už používám jen utf-8 !!!! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" |
||
Petroff Profil |
#19 · Zasláno: 6. 10. 2007, 20:27:05
loshttp://los.php5.cz/jpw/time.php
Naprosto souhlasím,že vygenerovat i HTML prvky v JS je idealní. Na druhou stranu, stejně tam bude ten php, proč ho nevyužít - jen by trochu nakynul o to vkládání několika tagů (co se tyka počtu bytů, tak těch by bylo víc v js kódu). Nějak ti nefunguje gr.display (prohlíženo v IE7). |
||
Časová prodleva: 17 let
|
0