jQuery getJson show new items
Zoekmachine laat me in deze in de steek.
Ik haal json data op met getJson waarna ik deze 'append' in een list.
Nou wil ik graag zien welke nieuw zijn.
Kan iemand mij hierin helpen? Ik kan geen functie vinden als iets van een 'last inserted'/'insert_id', o.i.d. Wel kom ik op antwoorden om een class toe te voegen en dan hierop te controleren, maar geen idee hoe ik dat mij voor moet stellen.
Bvd
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$(document).ready(function() {
call();
var refresh = setInterval(call, 5000);
function call(){
var data;
$.getJSON('call.php?json', function(datanew) {
if(data != datanew){
data = datanew;
$( '#list > ul' ).html( ' ' );
$.each(data, function(index, value) {
$.each(value, function(i, val){
$('#list > ul#'+index).append('<li id="' + i + '">' + val + '</li>');
});
} );
}
});
}
});
call();
var refresh = setInterval(call, 5000);
function call(){
var data;
$.getJSON('call.php?json', function(datanew) {
if(data != datanew){
data = datanew;
$( '#list > ul' ).html( ' ' );
$.each(data, function(index, value) {
$.each(value, function(i, val){
$('#list > ul#'+index).append('<li id="' + i + '">' + val + '</li>');
});
} );
}
});
}
});
Edit: Vraag hopelijk verduidelijkt
Gewijzigd op 22/01/2014 11:55:59 door Michael -
Zoals hier een nieuw topic wordt gestart (of ergens op wordt gereageerd) en deze wordt opgehaald bij activiteiten
Gewijzigd op 22/01/2014 12:36:55 door Erwin H
Erwin H op 22/01/2014 12:31:43:
Met andere woorden, als je de tijd bijhoudt van je laatste call en die weer meestuurt naar de server in de ajax call, dan hoeft de server alleen de nieuwe te selecteren en hoef je clientside niets meer te controleren.
Waar en hoe moet ik die tijd dan zetten?
Als ik de lijst ophaal is er nog niks nieuw. Dan zouden die allemaal dus de huidige tijd kunnen krijgen. Pas als er daarna een nieuwe waarde in komt moet deze de op dat moment huidige tijd krijgen en dus nieuw. Deze nieuwe kan dan een class krijgen die bij de volgende call dan weer verdwijnt omdat die niet meer nieuw is...?
Erwin H op 22/01/2014 13:29:53:
Waar komt die lijst vandaan dan? De elementen in de lijst moeten op een zeker moment worden aangemaakt, opgehaald, gevonden etc. Dat tijdstip zal je dan erbij moeten (willen) opslaan.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<?php
$_SESSION['users'] = Array(
'beschikbaar'=>
Array(
'Jan'
,'Piet'
,'Klaas'
)
,'bezet'=>
Array(
'Truus'
,'Henk'
)
,'pauze'=>
Array(
'Karel'
,'Miep'
)
,'offline'=>
Array(
'Trien'
,'Kees'
)
);
echo json_encode($_SESSION['users']);
// {"beschikbaar":["Jan","Piet","Klaas"],"bezet":["Truus","Henk"],"pauze":["Karel","Miep"],"offline":["Trien","Kees"]}
?>
$_SESSION['users'] = Array(
'beschikbaar'=>
Array(
'Jan'
,'Piet'
,'Klaas'
)
,'bezet'=>
Array(
'Truus'
,'Henk'
)
,'pauze'=>
Array(
'Karel'
,'Miep'
)
,'offline'=>
Array(
'Trien'
,'Kees'
)
);
echo json_encode($_SESSION['users']);
// {"beschikbaar":["Jan","Piet","Klaas"],"bezet":["Truus","Henk"],"pauze":["Karel","Miep"],"offline":["Trien","Kees"]}
?>
Je kunt niet 2 javascript arrays met elkaar vergelijken en zien welke er niet meer in staat en welke er is bijgekomen?
Gewijzigd op 22/01/2014 13:41:10 door Michael -
Wel zorgen dat je het tijdstip van de server mee terugstuurt naar de browser en de browser dat ook weer laat meesturen met de volgende call. Heb je tenminste geen problemen met tijdzones en andere verschillen tussen browser en server.
Erwin H op 22/01/2014 14:03:55:
Maar waar komen de elementen vandaan? Die worden er niet op een magische manier ingetoverd neem ik aan. Dus op de plek waar je ze erin zet kan je dan ook nog een veld aan de naam toevoegen: tijdstip. Vervolgens als je de nieuwe lijst wilt hebben loop je 1 keer door de array heen. Als het tijdstip later is dan de vorige call, dan stuur je dat element wel, anders niet. Zo heb je in de browser dus alleen de nieuwe elementen en hoef je niets meer te testen.
Wel zorgen dat je het tijdstip van de server mee terugstuurt naar de browser en de browser dat ook weer laat meesturen met de volgende call. Heb je tenminste geen problemen met tijdzones en andere verschillen tussen browser en server.
Wel zorgen dat je het tijdstip van de server mee terugstuurt naar de browser en de browser dat ook weer laat meesturen met de volgende call. Heb je tenminste geen problemen met tijdzones en andere verschillen tussen browser en server.
Die data wordt, zoals je ziet, nou gewoon nog in een Session gezet. Later kan dit dan via een database. Daar zal dan inderdaad een veld bij moeten komen. Ik zal er eens mee experimenteren.
Nou loop ik eerst nog tegen wat anders aan. Is het bij javascript niet zo dat ik een variabele kan vullen en deze bij de volgende call kan oproepen?
Ik maak een var olddata aan buiten de functie, en in de functie controleer ik olddata !== data. En voor het afsluiten van de functie, buiten die controle, doe ik olddata = data. Maar olddata blijft leeg terwijl toch na de 1e interval gevuld zou moeten zijn?
Gewijzigd op 22/01/2014 14:51:25 door Michael -
Erwin H op 22/01/2014 15:05:30:
Ligt eraan hoe en waar je die variabele hebt gedefinieerd, in welke scope. Zolang functie en variabele binnen dezelfde scope blijven dan kan het. Maar zonder code te zien is het moeilijk te zeggen of het zou moeten werken of niet...
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
call();
setInterval(call, 5000);
var olddata;
function call(){
$.getJSON('call.php?json', function(data) {
if(olddata !== data){
//
}
$('#status').append( 'New: ' + data.beschikbaar + '<br />');
$('#status').append( 'Old: ' + olddata.beschikbaar + '<br />'); // Hier is olddata leeg. data is wel gevuld.
olddata = data; // olddata vullen
});
}
setInterval(call, 5000);
var olddata;
function call(){
$.getJSON('call.php?json', function(data) {
if(olddata !== data){
//
}
$('#status').append( 'New: ' + data.beschikbaar + '<br />');
$('#status').append( 'Old: ' + olddata.beschikbaar + '<br />'); // Hier is olddata leeg. data is wel gevuld.
olddata = data; // olddata vullen
});
}
Gewijzigd op 22/01/2014 15:27:25 door Michael -
oplossing 1: initieer olddata als:
Code (php)
1
var olddata = {beschikbaar: ''};
oplossing 2: check of beschikbaar een property van olddata is:
Code (php)
1
2
3
2
3
if ('beschikbaar' in olddata){
$('#status').append( 'Old: ' + olddata.beschikbaar + '<br />');
}
$('#status').append( 'Old: ' + olddata.beschikbaar + '<br />');
}
Onderstaande code doet helemaal niks.
Code (php)
1
2
3
4
5
2
3
4
5
if ('beschikbaar' in olddata){
$('#status').append( 'Old: true<br />');
} else {
$('#status').append( 'Old: false<br />');
}
$('#status').append( 'Old: true<br />');
} else {
$('#status').append( 'Old: false<br />');
}
Code (js)
1
var olddata = {};
definieert zou het wel moeten werken. Dan is het een (leeg) object. Overigens is de tweede manier dan wel netter, want dan krijg je ook geen gebroken code als de result van de server opeens niet helemaal correct is.
Erwin H op 23/01/2014 09:13:50:
Waarschijnlijk omdat op dat moment olddata nog geen object is, maar een lege variabele. Als je olddata dan als:
definieert zou het wel moeten werken. Dan is het een (leeg) object. Overigens is de tweede manier dan wel netter, want dan krijg je ook geen gebroken code als de result van de server opeens niet helemaal correct is.
Code (js)
1
var olddata = {};
definieert zou het wel moeten werken. Dan is het een (leeg) object. Overigens is de tweede manier dan wel netter, want dan krijg je ook geen gebroken code als de result van de server opeens niet helemaal correct is.
Topper! :) Nou werkt oplossing 2 ook. Heel erg bedankt!
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
var olddata = {};
if ('beschikbaar' in olddata){
$('#status').append( 'Old: true<br />');//' + olddata.beschikbaar + '
} else {
$('#status').append( 'Old: false<br />');//' + olddata.beschikbaar + '
}
olddata = data;
/*
Output
Old: false
Old: true
Old: true
...
*/
if ('beschikbaar' in olddata){
$('#status').append( 'Old: true<br />');//' + olddata.beschikbaar + '
} else {
$('#status').append( 'Old: false<br />');//' + olddata.beschikbaar + '
}
olddata = data;
/*
Output
Old: false
Old: true
Old: true
...
*/
Toevoeging op 23/01/2014 09:51:48:
Ik vind het vervelend om te blijven vragen, maar waarom blijft de vergelijking false?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
var olddata = {};
function call(){
$.getJSON('.php?json', function(data) {
console.log(olddata);
console.log(data);
if(olddata === data){ } else { // Of if(olddata !== data) of if(olddata != data) geeft zelfde resultaat
console.log('Refresh');
//
}
//
olddata = data;
});
}
function call(){
$.getJSON('.php?json', function(data) {
console.log(olddata);
console.log(data);
if(olddata === data){ } else { // Of if(olddata !== data) of if(olddata != data) geeft zelfde resultaat
console.log('Refresh');
//
}
//
olddata = data;
});
}
Blijft het volgende als resultaat geven. Terwijl die zolang die het zelfde is toch geen 'refresh' moet loggen.
Quote:
XHR finished loading: "". jquery-latest.js:8706
Object {beschikbaar: Object, bezet: Array[2], pauze: Array[2], offline: Array[2]}
.php:58
Object {beschikbaar: Object, bezet: Array[2], pauze: Array[2], offline: Array[2]}
.php:59
Refresh
Object {beschikbaar: Object, bezet: Array[2], pauze: Array[2], offline: Array[2]}
.php:58
Object {beschikbaar: Object, bezet: Array[2], pauze: Array[2], offline: Array[2]}
.php:59
Refresh
Gewijzigd op 23/01/2014 09:52:19 door Michael -
Meer info: http://stackoverflow.com/questions/1068834/object-comparison-in-javascript