ugrás a tartalomhoz

Több div frissítése egyszerre.

kriszrap · 2013. Júl. 3. (Sze), 00.02
Sziasztok!

Van egy üzenőfalam ahol minden üzenetnek van egy
<div id="chat_ido"></div> része és ezt szeretném frissíteni.

Mondjuk van 5 üzenetem amit while al kilistázok és mindegyik <div id="chat_ido"></div>-jét frissíteni akarom.

facebooknál is így van ha postolok akkor az időt időközönként frissíti ilyet szeretnék elérni a üzenőfalamba.

Még annyi hogy ugye az új üzeneteket innerhtml beszúrom ott is jó lesz?

hogy tudnám minden divet frissíteni minden sorba?

Legyetek szívesek segíteni
Előre is köszönöm.
‹ főmenü hover háttérszín, almenü kibontásakor is megmaradjon böngésző bezárás ›
 ■
1

HTML

Poetro · 2013. Júl. 3. (Sze), 00.24
Azt ugye tudod, hogy nem lehet több elem egyszerre az oldalon, aminek azonos az id-je? Az időnkénti frissítést hogyan gondoltad? JavaScripttel ott a setInterval / setTimeout. Előtte persze ki kell keresni az elemet, de azt rengeteg féle képpen lehet (pl. document.getElementsByTagName, document.getElementsByClassName). Majd ki kell számolni az eltelt időt JavaScript-ben a bejegyzés létrejöttétől (amit mondjuk data attribútumban tárolsz) kezdve (Date.now és Date.getTime, és ugye ez ezredmásodpercben dolgozik). Majd azt szépen formázni kell. Majd bele kell írni az elembe. Ez utóbbira az innerHTML tökéletesen alkalmas.
2

"Azt ugye tudod, hogy nem

kriszrap · 2013. Júl. 3. (Sze), 00.53
"Azt ugye tudod, hogy nem lehet több elem egyszerre az oldalon, aminek azonos az id-je" arra gondolsz hogy annak az öt üzenetnek div je így nézzen ki
<div id="chat_ido1"></div>
<div id="chat_ido2"></div>
<div id="chat_ido2"></div>
stb.
erre gondoltál ?
és a data attribútumról tudnál valami infot linkelni ? mert még nem használtam
3

data attribútumról tudnál

Poetro · 2013. Júl. 3. (Sze), 01.04
data attribútumról tudnál valami infot linkelni ?

Nálad nem működnek a keresők? data attributes

Különben miért adsz nekik id-t? Mire akarod az id-t használni?
4

az id hogy a js mit

kriszrap · 2013. Júl. 3. (Sze), 01.31
az id hogy a js mit frissítsen de most találtam valami jobbat.
ezt
<ido>...</ido>
<ido>...</ido>
<ido>...</ido>

document.getElementsByTagName("ido")[0].innerHTML="asddfgh";
és a 0 helyére azt írom a melyik sort akarom frissíteni és egyszerübb mint divvel játszadozni .
5

És ehhez miért kell bevezess

Joó Ádám · 2013. Júl. 3. (Sze), 03.16
És ehhez miért kell bevezess egy nemlétező elemet?
<div id="chat">
    <!-- ... -->
    <p class="message">
        <time datetime="2013-07-03T02:57:42+02:00">1 perce</time>
        <!-- ... -->
    </p>
    <!-- ... -->
</div>
var chat = document.getElementById('chat');
var times = chat.getElementsByTagName('time');

var i;
var minutes;

for (i = 0; i < times.length; i++) {
    minutes = Math.floor(Date.now - Date.parse(times[i].datetime) / 1000 / 60);
    times[i].textContent = new String(minutes).concat(" perce");
}
6

pár dolgot nem értek a kódba

kriszrap · 2013. Júl. 3. (Sze), 10.41
pár dolgot nem értek a kódba :(
1. times.length ez time mezők hosszát nézi???
2. times[i].datetime times[i] mezőkbe gondolom benne van az idő akkor mi ez a ".datetime"?
picit segítene valaki?
7

Foglalkozz vele

Poetro · 2013. Júl. 3. (Sze), 10.53
Kicsit többet kellene foglalkoznod a DOM-mal, ha tényleg bármit el akarsz érni JavaScript-ben. A times egy változó, ami a document.getElementsByTagName eredménye. Namost ha nem tudod mit csinál az a függvény, akkor megnézed a dokumentációját. A time egy DOM elem. Annak vannak attribútumai és gyerekei. A benne van ebben az értelemben nem jelent semmi. Vagy mit jelenet szerinted az, hogy benne van?
8

benne van helyet ink azt

kriszrap · 2013. Júl. 3. (Sze), 14.08
benne van helyet ink azt mondanám tárolja na mind1 ismét hibáztam bocsi. datetime ra is rájöttem meg hogy mekkora barom vok:D

szerk.:
Példa szerint csináltam és csak egy pici problémám van hogy a Date.parse(times[i].datetime) ott nem akarja kiolvasni NaN-t ír mindig.
<ido datetime='2013'>3 perc</ido>
miért?
9

Date.parse

Poetro · 2013. Júl. 3. (Sze), 14.19
Akkor olvasd el a Date.parse dokumentációját, hogy milyen dátumformátumokat fogad el.
10

ezt használom : 2013-07-02

kriszrap · 2013. Júl. 3. (Sze), 14.25
ezt használom : 2013-07-02 15:34:15 ezt is elfogadja és ha csak annyit adok meg hogy 2013 azt is elfogadja.
itt ellenörzöm : http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_parse
11

ido

Poetro · 2013. Júl. 3. (Sze), 14.39
Milyen böngészőben próbálod? Az ido elem tudtommal még nem létezik, ne használd.
12

opera (legfrissebb) hogy

kriszrap · 2013. Júl. 3. (Sze), 14.49
opera (legfrissebb)
hogy érted hogy az ido elem még nem létezik?:)
13

<time

Poetro · 2013. Júl. 3. (Sze), 14.52
<time datetime="2013-07-03T02:57:42+02:00">1 perce</time>

vs
<ido datetime='2013'>3 perc</ido>
14

function chat_ido() { var

kriszrap · 2013. Júl. 3. (Sze), 15.30

function chat_ido()
{
   var times = document.getElementsByTagName('ido');  
  

var ido;
var ido_szamitas; 
  
 for (var i = 0; i < times.length; i++) 
  {  
    ido_szamitas= Date.now() - Date.parse(times[i].datetime); 
    times[i].innerHTML = ido_szamitas;
  }  
}
setInterval('chat_ido()', 2000);

<ido datetime="2013-07-03T02:57:42+02:00">4 perc</ido>
az eredmény sajnos NaN :(
"Date.parse(times[i].datetime);" helyet így írom Date.parse("2013-07-03T02:57:42+02:00"); akkor számol rendesen csak nem "datetime" értékeket :( ötlet?
15

Mi lenne, ha azt csinálnád,

Joó Ádám · 2013. Júl. 3. (Sze), 15.34
Mi lenne, ha azt csinálnád, amit mondunk, és elfelejtenéd ezt a <ido> hülyeséget? Használd a <time>-ot.
17

át írtam nem müködöt.

kriszrap · 2013. Júl. 3. (Sze), 15.41
át írtam nem működöt.
18

getAttribute

T.G · 2013. Júl. 3. (Sze), 15.57
times[i].datetime helyett használj times[i].getAttribute('datetime') -t!
19

Lett volna egy eredeti

Hidvégi Gábor · 2013. Júl. 3. (Sze), 16.24
Lett volna egy eredeti ötlete...

Just when I thought I was out
16

Én a helyedben az id

Karvaly84 · 2013. Júl. 3. (Sze), 15.41
Én a helyedben az id jellemzőkkel nem operálnék, mert nem erre való.

Helyette esetleg használhatnál class jellemzőt minden olyan elemre, ami chat üzenetet jelenít meg pl.: class="message"

Ezekben az elemekben felállítasz egy struktúrát, ami tárolja az üzenetet és az időt.

Javaslom szerver oldalon küld el a pontos időt, mert a kliensre hagyatkozni ilyen téren nem a legjobb. Használj olyan időformátumot, a szerver és a kliens között is ami segíti a számolást. Ilyen pl. az UTC formátum.

Ha megvan az oldal betöltésének pillanatában a pontos szerveridő, eltárolod egy változóban, és attól a ponttól számolsz a már fentebb említett függvények segítségével.
20

sikerült :)még annyi hogy

kriszrap · 2013. Júl. 3. (Sze), 19.11
sikerült :)
még annyi hogy lehet azt meg csinálni mint phpba hogy két idő különbsége meghatározzuk év,hónap,nap,óra,perc,másodperc-be
pl
$now = new DateTime();
$diff = $now->diff($d);
if($diff->y != 0)
if($diff->m != 0)
stb.
hogy tudnám megvalósítani js be is?
segítségeteket előre is köszönöm:)
21

// Ez optimális esetben

Karvaly84 · 2013. Júl. 3. (Sze), 20.14

// Ez optimális esetben sütiből jön
var server_time = (new Date()).toUTCString(); // Pl.: Wed, 03 Jul 2013 17:32:04 GMT

// A szöveges formátum Date típusba konvertálása
var now = new Date(server_time);

// A chat üzenet időbélyegét is átalakítjuk (ennek kinyerését rád bízom, én most
// hasra ütés szerűen tolom neki)
var date = new Date("Wed, 03 Jul 2013 17:32:04 GMT");

// Különbség kiszámítása
var time_diff = now - date; // Ezred másodperc (oszthatod/szorozhatod)
22

köszönöm sikerült :)

kriszrap · 2013. Júl. 3. (Sze), 23.49

ido_szamitas= (most - Date.parse(times[i].getAttribute('datetime')))/1000;
        var Hours  = Math.round(ido_szamitas/60*60);
	var Min  = Math.round(ido_szamitas/60);
	times[i].innerHTML =  Hours +" órája"+ Min + " perc";
miért kapok ekkora időket?
"500 órája 8 perc" 10 perce írtam
meg hogy 4 óra 261 perc O.o
mibe hibáztam?
23

Kövess valamilyen

Karvaly84 · 2013. Júl. 4. (Cs), 00.06
Kövess valamilyen konvenciót!

A változóidat egy nyelven deklaráld, vagy magyarul, vagy angolul (javasolt az angol).

Nagybetűvel az osztályok neveit szokás kezdeni, amit példányosítani lehet, pl. a new operátorral. Általában camel case stílusban minden szót nagybetűvel kezdve és egybe írva. Pl.: ThisAnClassName.

Konstansokat csupa nagybetűvel és underscore stílusban. Pl.: THIS_AN_CONSTANT_NAME.

A változókat kisbetűvel kezdjük, és lehet camel case vagy underscore stílusban felírni.

A kódban meg valószínűleg rosszul számolsz.

Olvas el ezt.
24

megnéztem köszönöm szépen a

kriszrap · 2013. Júl. 4. (Cs), 00.23
megnéztem köszönöm szépen a linket nem is tudtam van ilyen :)
de nem tudom mit ronthattam el a kódomban:(
25

Tesztelj statikus adatokkal,

Karvaly84 · 2013. Júl. 4. (Cs), 00.42
Tesztelj statikus adatokkal, ahol tudod milyen eredményt kéne kapnod. Ha nem a várt eredményt kapod, akkor haladj végig a kódodon, és derítsd ki hol siklott félre a számításod. Erre a feladatra a legalkalmasabb eszköz a debugger, aminek a használatát a linkelt tartalom alatt láthatod.
26

ido_szamitas/60*60 ez ugye

Poetro · 2013. Júl. 4. (Cs), 08.13
ido_szamitas/60*60
ez ugye megegyezik a következővel:
(ido_szamitas / 60) * 60

és máris lehet egyszerűsíteni.
Hogy a perceket kapd, lehet előbb ki szeretnéd vonni az órákat. Ezek mind általános iskolás matek feladatok.
27

sikerült:) köszönöm:)

kriszrap · 2013. Júl. 4. (Cs), 11.56
sikerült:) köszönöm:)
28

Üdv.Mivel az ötlet

Karvaly84 · 2013. Júl. 11. (Cs), 03.03
Üdv.

Mivel az ötlet megtetszett írtam egy kis függvénytárat (time-ago.js). Nem túl nagy - úgy 100 soros - és még a magyar támogatást meg kell írnom, ha érdekel átküldöm e-mail-ben.
29

Esetleg githubra

hunkris · 2013. Júl. 11. (Cs), 07.50
Esetleg githubra felrakhatnád.
30

Felrakhatom. Este meg oldom.

Karvaly84 · 2013. Júl. 11. (Cs), 09.36
Felrakhatom. Este meg oldom. Majd be linkelem, hátha kriszrap is vissza néz még ide.
31

Felraktam GitHub-ra:

Karvaly84 · 2013. Júl. 12. (P), 06.50
Felraktam GitHub-ra: time-ago-js
32

Karway nagyon jó lett :) ajax

kriszrap · 2013. Júl. 12. (P), 22.31
Karway nagyon jó lett :)
ajax os résznél az a kód sor mit csinál?:)
33

ajaxos?

Poetro · 2013. Júl. 12. (P), 22.37
Milyen AJAX-os rész?
Karway nagyon jó lett

Karway eddig is jó volt ;)
34

"tAgo.updateFieldList();"

kriszrap · 2013. Júl. 12. (P), 22.39
"tAgo.updateFieldList();"
35

Olvasd el

Poetro · 2013. Júl. 12. (P), 22.41
Karway leírta, mit csinál a függvény, sőt a fontosabb elemeket is dokumentálta benne.
36

bocsánat :) igazad van:)

kriszrap · 2013. Júl. 12. (P), 22.44
bocsánat :) igazad van:)
37

A tAgo.updateFieldList() a

Karvaly84 · 2013. Júl. 13. (Szo), 02.48
A tAgo.updateFieldList() a már meglévő TimeAgo objektumhoz tartozó elemek listáját frissíti, hogy ne keljen újra példányosítani az osztályt, ha időközben új elemekkel bővül a DOM fa.

a TimeAgo objektumok a fieldList tulajdonságukban tárolnak egy NodeList-et amin végig megy mindig mikor ki írja az eltelt időt, ezt a listát frissíti.

UI.: még fogok egy módosítást végre hajtani a kódon, ugyan is ha használod a setTimeOffset()-et és az oldalon van olyan elem amiben ugyan az a időbélyeg szerepel, akkor az első frissítési ciklusban TIME_ERROR jön, ami azért van mert amíg lefut kód eltelik pár ezredmásodperc ami kicsit bekavar. Ez akkor baj ha mondjuk 10 másodpercenként frissítesz, mert akkor az első 10 másodpercben nem ír ki semmit olykor. Valószínűleg a forráskód updateTimeAgo függvényén fogok módosítani az utolsó feltételes ágon, ami ki is van most kommentelve. Vagy pedig a setUpdateInterval()-on belül amikor meghívom a updateTimeAgo()-t azt késleltetem picit az első hívásnál.
38

Közbe módosítottam a kódon,

Karvaly84 · 2013. Júl. 13. (Szo), 03.55
Közbe módosítottam a kódon, úgy hogy az amit a UI.-ban írtam, nem probléma. A setTimeOffset() a kapott idő és a gép idő közti különbséghez még 10 ms-t hozzáad, ami elégnek bizonyult, hogy a fent említett - a futásidőből eredő - probléma ne jelentkezzen.