Whileloop resfreshen
http://papermashup.com/drag-drop-with-php-jquery/
DEMO: http://papermashup.com/demos/jquery-drag-drop/
Werkt prima op mijn server, maar ik wil iets veranderen, want ik ga het script ergens in integreren:
Er kunnen - logisch - meerdere mensen op verschillende computers aan de lijst werken.
Nu is het zo dat je iets kunt verplaatsen en er een 'save' wordt uitgevoerd.
Maar ik wil maken dat de lijst ook om de 2 seconden vanzelf geüpdatet wordt, zodat je ook ziet wat anderen eventueel aan de volgorde van de lijst veranderd hebben, in de tijd dat je er ook zelf mee bezig bent.
Hoe maak ik dat? Ik weet dat je AJAX kunt gebruiken, en heb van alles geprobeerd, maar ik vind het lastig om de while loop te tussentijds te updaten...
setInterval(save, 2000);
Randy vsf op 21/01/2016 15:57:32:
Je kan een setInterval gebruiken, en dan de "save" method die er al is uitvoeren.
setInterval(save, 2000);
setInterval(save, 2000);
Zomaar een vraag: Loop je dan niet de kans dat je oude informatie (her)schrijft terwijl iemand anders het net even eerder heeft aangepast? Opnieuw save lijkt me niet goed, je moet alleen elke 30sec ophalen lijkt mij
Aad B op 21/01/2016 16:27:32:
Zomaar een vraag: Loop je dan niet de kans dat je oude informatie (her)schrijft terwijl iemand anders het net even eerder heeft aangepast? Opnieuw save lijkt me niet goed, je moet alleen elke 30sec ophalen lijkt mij
Dan maak je een update functie, die je in die interval gooit.
Gewijzigd op 21/01/2016 16:30:09 door Randy vsf
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script type="text/javascript">
$(document).ready(function(){
function slideout(){
setTimeout(function(){
$("#response").slideUp("slow", function () {
});
}, 2000);}
$("#response").hide();
$(function() {
$("#list ul").sortable({ opacity: 0.8, cursor: 'move', update: function() {
var order = $(this).sortable("serialize") + '&update=update';
$.post("updateList.php", order, function(theResponse){
$("#response").html(theResponse);
$("#response").slideDown('slow');
slideout();
});
}
});
});
});
</script>
$(document).ready(function(){
function slideout(){
setTimeout(function(){
$("#response").slideUp("slow", function () {
});
}, 2000);}
$("#response").hide();
$(function() {
$("#list ul").sortable({ opacity: 0.8, cursor: 'move', update: function() {
var order = $(this).sortable("serialize") + '&update=update';
$.post("updateList.php", order, function(theResponse){
$("#response").html(theResponse);
$("#response").slideDown('slow');
slideout();
});
}
});
});
});
</script>
Als ik het goed heb (ben een leek met Jquery) moet ik er dus het eerste deel van de code om de zoveel tijd heruitvoeren?
Hoe kan ik dat maken?
Je zult anders om moeten gaan met deze functionaliteit en dit gedrag verder moeten definiëren, voordat je ook maar kunt overwegen om het zo te maken dat meerdere mensen hier tegelijkertijd aan (verder kunnen) werken (want je zult de "toestand" ook op moeten slaan op een zodanige wijze dat je dit ding later weer kunt initialiseren in die "toestand" zodat je hier weer verder aan kunt werken).
@Ariën: hoe zie je dat voor je? Heb je een voorbeeld-linkje? Beetje geheimtaal dit voor me...
Op zich valt het reuze mee: https://nl.wikipedia.org/wiki/JSON
Met json_encode kan je de array met al je data in een JSON-string zetten. Deze haal je met een AJAX-request op, en kan je vervolgens met jQuery's ParseJSON uitlezen.
Verder heeft Thomas ook gelijk. En wat als iemand nou de sortering aanpast, terwijl jij die ook tegelijkertijd aanpast, en voor de nieuwe interval verstuurt. Ik denk dat het nog vrij gecompliceerd is om dit op deze manier te bewerkstelligen.
Een versie-systeem achtig iets lijkt me stukken betrouwbaarder. Daarin kan je complicaties tussen twee bewerkingen naar mijn idee eenvoudig eruit pikken.
Hoe "praat" deze met je sortable-ding? Hoe kun je daarmee het uiterlijk updaten met externe informatie? Je zult daartoe een intern data formaat (in JavaScript) moeten afspreken en bijhouden. Dit is de eerdergenoemde "toestand" waar ik het over had.
Maar ga rustig aan de slag, ik hoor wel wanneer je zover bent :).
Hoe kan ik intern data formaat afspreken en bijhouden?
Maar je zit, naar mijn idee, zelf dan nog wel met twee niet gelijklopende timers van de setInterval. Want beide computers zullen niet tegelijkertijd op de sortable-pagina komen. Dit lijkt me af te vangen met de huidige servertijd die je mogelijk in AJAX weer ophaalt.
Best complex dus, omdat je weer met veel bijzaken rekening moet houden.
Ik werk er zelf laatste tijd vaker mee, en het werkt echt snel.
En is vrij makkelijk in gebruik, als je basis javascript kent (maar dat betwijfel ik in dit geval).
Gewijzigd op 22/01/2016 11:27:21 door Randy vsf
Randy vsf op 22/01/2016 11:26:20:
Het beste zou zijn socket.io of iets. Dan hoef je maar op 1 plek de database te updaten, en de gebruikers krijgen meteen de wijzigingen gepushed.
Ik werk er zelf laatste tijd vaker mee, en het werkt echt snel.
En is vrij makkelijk in gebruik, als je basis javascript kent (maar dat betwijfel ik in dit geval).
Ik werk er zelf laatste tijd vaker mee, en het werkt echt snel.
En is vrij makkelijk in gebruik, als je basis javascript kent (maar dat betwijfel ik in dit geval).
Mag ik vragen op welke manier of welke tutorial jij er kennis mee hebt gemaakt?
- Ariën - op 22/01/2016 11:45:49:
Mag ik vragen op welke manier of welke tutorial jij er kennis mee hebt gemaakt?
Ik heb via sitepoint enkele tutorials bekeken en gevolgd.
Gewijzigd op 22/01/2016 12:10:42 door Randy vsf