jquery ajax list update

Door Onbekende gebruiker op 20-01-2014 13:24 gewijzigd op 20-01-2014 13:34

1.851 views

Hallo ik had een vraagje,

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?

Mich

20-01-2014 14:07

Laat eens wat zien van wat je al hebt geprobeerd?

Onbekende gebruiker

20-01-2014 14:13

nou ik heb net dit gevonden

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


$(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);

heb deze code net gevonden op internet dus is niet van mijn

Mich

20-01-2014 14:33

Heb je verder een database of zo waar die statussen allemaal in staan en worden bijgehouden?

Onbekende gebruiker

20-01-2014 14:46 gewijzigd op 20-01-2014 14:57

ja dat klopt ik roep dit via jquery aan m.b.v $.ajax({ }); waarbij ik json data terug krijg

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

Mich

20-01-2014 16:05

hoe je precies kan zien welk object nieuw is en deze apart kan tonen d.m.v. animatie weet ik zo niet (vast wel te vinden), maar ik heb nu wel een lijstje dat elke 5 sec opnieuw een getjson doet.


<!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>

json ziet er in mijn geval dan zo uit
<?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
?>
Misschien kun je er alvast wat mee experimenteren en het één en ander nog op zoeken.

Onbekende gebruiker

20-01-2014 16:24

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

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

ok top als het dan lukt zou je het dan kunnen delen met mijn :)

Reageren

Inloggen om te reageren