jquery ajax list update
Ik ben een lijst aan het maken met users en statusen deze gegevens komen in de lijst met ajax en json
<ui class="status">
<li class="beschikbaar" id="1">Beschikbaar</li>
<li class="beschikbaar" id="2">Beschikbaar</li>
<li class="beschikbaar" id="3">Beschikbaar</li>
<li class="ingesprek" id="4"></li>
<li class="ingesprek" id="5"></li>
<li class="pauze" id="6"></li>
<li class="pauze" id="7"></li>
<li class="offline" id="8"></li>
<li class="offline" id="9"></li>
</ui>
nu heb ik het zo gemaakt dat het zo ie zo alles wat geschikbaar is boven aan de lijst komt daarna ingesprek pauze en offline
maar nu komt het,
Als die user zijn status veranderd dan moet die id veranderen van bijvoorbeeld id:offline naar id:beschikbaar dan moet die pauze weg uit de lijst en nieuw boven aan de lijst met beschikbaar worden gezet.
dus als iemand op pauze gaat moet hij dus tussen ingesprek en offline komen
en zo werkt dan eigelijk met alle statusen die veranderd worden dat ze uit de lijst gehaald worden en opnieuw op de juiste plek worden gezet
en het zou mooi wezen als er iets van animatie in zit :)
maar ik ben al een tijdje bezig en krijg het niet voor elkaar
iemand een oplossing?
Gewijzigd op 20/01/2014 13:34:49 door Jordy xxx
maar nu wil ik juist dat hij op de juiste plek komt te staan kan zijn in he midde of boven aan of juist onder op dat ligt er aan welke status er word mee gegeven van uit de $.ajax post return json
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
28
29
30
31
32
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
28
29
30
31
32
$(document).ready(function() {
$("li").live("click", function() {
var $myLi = $(this);
var listHeight = $("ul").innerHeight();
var elemHeight = $myLi.height();
var elemTop = $myLi.position().top;
var moveUp = listHeight - (listHeight - elemTop);
var moveDown = elemHeight;
var liId = $myLi.attr("id");
var enough = false;
var liHtml = $myLi.outerHTML();
$("li").each(function() {
if ($(this).attr("id") == liId) {
return false;
}
$(this).animate({"top": '+=' + moveDown}, 1000);
});
$myLi.animate({"top": '-=' + moveUp}, 1000, function() {
$myLi.remove();
var oldHtml = $("ul").html();
$("ul").html(liHtml + oldHtml);
$("li").attr("style", "");
});
});
});
(function($) {
$.fn.outerHTML = function() {
return $(this).clone().wrap('<div></div>').parent().html();
}
})(jQuery);
$("li").live("click", function() {
var $myLi = $(this);
var listHeight = $("ul").innerHeight();
var elemHeight = $myLi.height();
var elemTop = $myLi.position().top;
var moveUp = listHeight - (listHeight - elemTop);
var moveDown = elemHeight;
var liId = $myLi.attr("id");
var enough = false;
var liHtml = $myLi.outerHTML();
$("li").each(function() {
if ($(this).attr("id") == liId) {
return false;
}
$(this).animate({"top": '+=' + moveDown}, 1000);
});
$myLi.animate({"top": '-=' + moveUp}, 1000, function() {
$myLi.remove();
var oldHtml = $("ul").html();
$("ul").html(liHtml + oldHtml);
$("li").attr("style", "");
});
});
});
(function($) {
$.fn.outerHTML = function() {
return $(this).clone().wrap('<div></div>').parent().html();
}
})(jQuery);
heb deze code net gevonden op internet dus is niet van mijn
dit word in een timer gezet die om de 5 a 10 secs moet gaan lopen
en dan als er een status is veranderd dat hij dus op de juiste plek in die lijst komt te staan
json data: $.each(data, function(index, element) { });
waar ik elementen uit haal zo als
element.id
element.username
element.call_status
maar deze lijst moet automatisch update en dan op de juiste plek komen
dat is zeg maar het idee
<ui class="status">
<li class="beschikbaar" id="1">Beschikbaar</li>
<li class="beschikbaar" id="2">Beschikbaar</li>
<li class="beschikbaar" id="3">Beschikbaar</li>
<li class="ingesprek" id="4"></li>
<li class="ingesprek" id="5"></li>
<li class="pauze" id="6"></li>
<li class="pauze" id="7"></li>
<li class="offline" id="8"></li>
<li class="offline" id="9"></li>
</ui>
dus alles wat beschikbaar word moet hoe dan ook boven aan komen
kom je van beschikbaar naar puaze dan zou hij naar de bovenste pauze in de lijst moeten komen
dit geld eigelijk voor alle veranderringen in de lijst
dit lijkt er op maar dit gaat nu weer random
http://jsfiddle.net/ZXYZ3/139/
en hij zou 1 voor 1 moeten pakken en niet 2 of meer tegelijk
Gewijzigd op 20/01/2014 14:57:11 door Jordy xxx
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<style type="text/css">
ul#beschikbaar li{color:green;}
ul#ingesprek li{color:gray;}
ul#pauze li{color:orange;}
ul#offline li{color:red;}
</style>
</head>
<body>
<div id="list">
<ul class="status" id="beschikbaar">
</ul>
<ul class="status" id="ingesprek">
</ul>
<ul class="status" id="pauze">
</ul>
<ul class="status" id="offline">
</ul>
</div>
<script>
$(document).ready(function() {
var refresh = setInterval(function() {
$( '#list > ul' ).html( ' ' );
$.getJSON('json.php', function(data) {
$('#status').text(data);
$.each(data, function(index, value) {
$.each(value, function(i, val){
$('#list > ul#'+index).append('<li id="' + i + '">' + val + '</li>');
});
} );
});
}, 5000);
});
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<style type="text/css">
ul#beschikbaar li{color:green;}
ul#ingesprek li{color:gray;}
ul#pauze li{color:orange;}
ul#offline li{color:red;}
</style>
</head>
<body>
<div id="list">
<ul class="status" id="beschikbaar">
</ul>
<ul class="status" id="ingesprek">
</ul>
<ul class="status" id="pauze">
</ul>
<ul class="status" id="offline">
</ul>
</div>
<script>
$(document).ready(function() {
var refresh = setInterval(function() {
$( '#list > ul' ).html( ' ' );
$.getJSON('json.php', function(data) {
$('#status').text(data);
$.each(data, function(index, value) {
$.each(value, function(i, val){
$('#list > ul#'+index).append('<li id="' + i + '">' + val + '</li>');
});
} );
});
}, 5000);
});
</script>
</body>
</html>
json ziet er in mijn geval dan zo uit
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
28
29
30
31
32
33
34
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
28
29
30
31
32
33
34
<?php
session_start();
if(!isset($_SESSION['gebruikers'])){
$_SESSION['gebruikers'] = Array(
'beschikbaar'=>
Array(
'Jan'
,'Piet'
,'Klaas'
)
,'ingesprek'=>
Array(
'Truus'
,'Henk'
)
,'pauze'=>
Array(
'Karel'
,'Miep'
)
,'offline'=>
Array(
'Trien'
,'Kees'
)
);
}
echo json_encode($_SESSION['gebruikers']);
//unset($_SESSION['gebruikers']['pauze'][0]); // Eerste gebruiker verwijderen
//array_push($_SESSION['gebruikers']['offline'], 'Ed', 'Joop'); // Gebruikers toevoegen
?>
session_start();
if(!isset($_SESSION['gebruikers'])){
$_SESSION['gebruikers'] = Array(
'beschikbaar'=>
Array(
'Jan'
,'Piet'
,'Klaas'
)
,'ingesprek'=>
Array(
'Truus'
,'Henk'
)
,'pauze'=>
Array(
'Karel'
,'Miep'
)
,'offline'=>
Array(
'Trien'
,'Kees'
)
);
}
echo json_encode($_SESSION['gebruikers']);
//unset($_SESSION['gebruikers']['pauze'][0]); // Eerste gebruiker verwijderen
//array_push($_SESSION['gebruikers']['offline'], 'Ed', 'Joop'); // Gebruikers toevoegen
?>
Misschien kun je er alvast wat mee experimenteren en het één en ander nog op zoeken.
thnx voor jou info en je stukkie code ik ga er mee aan de slag en ga even kijken of het lukt
Toevoeging op 20/01/2014 18:27:27:
Jordy xxx op 20/01/2014 16:24:14:
ok heel erg bedankt
thnx voor jou info en je stukkie code ik ga er mee aan de slag en ga even kijken of het lukt
thnx voor jou info en je stukkie code ik ga er mee aan de slag en ga even kijken of het lukt
ok top als het dan lukt zou je het dan kunnen delen met mijn :)