tabel volgorde aanpassen
graag wil ik jullie hulp vragen voor het volgende:
Ik heb een eigen cms'je gemaakt waarbij ik in mijn overzicht pagina's in een tabelvorm de pagina's weergeef (dus titel, en evt, verwijder, edit opties).
Nu wil ik ook de volgorde kunnen aanpassen van de pagina's zoals ze straks in mijn menu komen. Daarvoor heb ik al een extra kolom in mijn (mysql)tabel opgenomen.
Kan iemand mij helpen met een functie die de waarden van mijn tabel doorgeeft aan een ajax script? Bij mij zoektocht heb ik jquery met een table dnd extentie gevonden, waardoor ik de zichtbare tabel wel kan verplaatsen. Nu wil ik alleen dan bij het 'onchange' event de (aangepaste) volgorde meteen wegschrijven.
Mijn html code voor tabel:
<table id="HtmlPages">
<tr class="oneven" id="1">
<td>pagina 1</td>
</tr>
<tr class="oneven" id="2">
<td>pagina 2</td>
</tr>
<tr class="even" id="3">
<td>pagina 3</td>
</tr>
</table>
Verstuur eerst de verplaatsopdracht naar je database, en vraag daarna de nieuwe tabel op. Zo voorkom je problemen wanneer je op het scherm iets doet dat de database niet kan verwerken.
Je geeft je pagina's dan een knop 'eentje verder' en 'eentje terug'. Klik je daarop, verstuur dan het knopcommando (+1 of -1, bijvoorbeeld) samen met de aanduider van je pagina naar een speciaal script dat de volgorde van de pagina's kan wijzigen. Omdat je het al over jquery hebt: de success-handler van die aanroep moet dan de inhoud opnieuw opvragen (met een nieuw request dus)
Dank je wel voor je antwoord.
Het is inderdaad een tip van je! Ik moet er even over nadenken hoe ik dat (+1 of -1) in kan laten passen.
gr,
Wil je ook assistentie bij de javascript-kant?
bedoel je met layout de gegenereerde html?
zoiets:
En bij javascript kan ik ook wat hulp gebruiken, zo leer ik het ook, dank je wel!
<table id="HtmlPages">
<tr>
<th width="60%">Titel</th>
<th>Edit</th>
<th>Status</th>
<th>Delete</th>
<th></th>
<th></th>
</tr><tr class="oneven" id="4">
<td>Contact</td>
<td><a href="index.php?pages/edit/4"><img src="http://mijndomein/images/icon-edit.png" border="1" /></a></td>
<td><a href="index.php?pages/visible/4"><img src="http://mijndomein/images/icon-visible.png" border="1" /></a></td>
<td><a href="index.php?pages/delete/4"><img src="http://mijndomein/images/icon-delete.png" border="1" /></a></td>
<td></td>
<td></td>
</tr><tr class="even" id="2">
<td>test</td>
<td><a href="index.php?pages/edit/2"><img src="http://mijndomein/images/icon-edit.png" border="1" /></a></td>
<td><a href="index.php?pages/visible/2"><img src="http://mijndomein/images/icon-visible.png" border="1" /></a></td>
<td><a href="index.php?pages/delete/2"><img src="http://mijndomein/images/icon-delete.png" border="1" /></a></td>
<td></td>
<td></td>
</tr><tr class="oneven" id="1">
<td>Test</td>
<td><a href="index.php?pages/edit/1"><img src="http://mijndomein/images/icon-edit.png" border="1" /></a></td>
<td><a href="index.php?pages/visible/1"><img src="http://mijndomein/images/icon-visible.png" border="1" /></a></td>
<td><a href="index.php?pages/delete/1"><img src="http://mijndomein/images/icon-delete.png" border="1" /></a></td>
<td></td>
<td></td>
</tr>
</table>
Je hebt nog twee links nodig per object:
Code (php)
1
2
2
<a href="index.php?pages/move_up/1">Omhoog</a>
<a href="index.php?pages/move_down/1">Omlaag</a>
<a href="index.php?pages/move_down/1">Omlaag</a>
Ik zie alleen niet hoe je hier javascript aan vastmaakt; loop je met een document.ready() alle A-elementen af of zoiets? En zo ja, wat doe je dan met die urls?
Maar ook dit weer terzijde. Als het met submit & refresh werkt, gaat het met ajax ook goedkomen.
Nog een opmerking uit de REST-hoek: een opdracht aan de server waarmee je data verandert, kun je beter POSTen dan GETten (zoals je dat met een a doet). Robots indiceren je site en slopen daarbij keurig alle data uit je database :) door het volgen van alle delete-links.
Ik wil wel weten hoe je index.php in elkaar zit, alleen hoef je die niet perse hier te plakken; daar wordt het topic al snel zo groot van. Wanneer we de details goed hebben, kunnen we de relevante delen altijd nog onderposten.
$(document).ready(
function() {
$('#HtmlPages').tableDnD();
}
);
$("#HtmlPages").change(
function(test) {
alert('Yes');
}
);
/*
$.ajax({
url: '../ajax/change_page_order.php',
success: function(data) {
$('#Logs').html(data);
alert('Load was performed.');
}
});
*/