Door
Frits van Leeuwen
op 20-04-2020 00:22
gewijzigd op 20-04-2020 00:36
8.068 views
Hallo allemaal,
Ik doe ergens iets niet goed. Ik heb geen idee wat.
De regel "alert("record_id = " + id); " in de onderstaande code geeft aan dat id is gevuld met bijvoorbeeld 36.
Maar als ik daarna verder ga met de code wordt de code niet naar menu_tabel_update.php overgebracht te worden.
Bedankt voor de aanwijzingen.
Goed idee om de menu_id te gebruiken in plaats van id=regel.
Ook een prima idee om de onclick er uit te halen. De class die er in zit is verbonden met de css om de kleur af te wisselen.
Maar ik denk dat ik nog een hoop moet leren, want het lijkt er op dat ik bij iedere inzichtswijziging weer nieuwe kennis nodig heb, en dat ik met meer kennis weer andere inzichten krijg.
Nu ik de boel om zet naar jquery, heb ik niet door hoe ik de lijst in beeld kan krijgen als ik de pagina open.
Ik heb de volgede code waar <tr><td>xxxxx</td></tr> vervangen moet worden door de lijst die ik ook in het bestand action.php wil zetten. Ik heb al wel een beetje een idee hoe ik dat moet doen, maar ik moet eerst zien dat ik de aangegeven code kan aanpassen
<table id = "TabelId" class = "hovertabel">
<thead>
<tr>
<th>Waarde</th><th>Sub van</th><th>Menulabel</th><th>Link naar pagina</th>
</tr>
</thead>
<tbody id = "Listed_Rows> <!-- Hier volgt de lijst -->
<tr "><td>xxxxx</td></tr>
</tbody>
<tfoot>
<tr>
<th colspan="4">
<button onclick = "Toevoegen()" id = "Button_Add" type = "Submit" value = "New" class = "button_add" alt = "Nieuwe toevoegen"></button>
</th>
</tr>
</tfoot>
</table>
Ik had zoiets in gedachten:
if ( $result = mysqli_query($connect, "SELECT " . $_POST['velden'] . " FROM " . $_POST['tabel'] . " ORDER BY " . $_POST['sortering']) )
{
$total_fields = mysqli_field_count($connect); //aantal velden
$row = $result -> fetch_array(MYSQLI_NUM);
// *** regels vullen ***
$line = array();
foreach($line = $result as $record)
{
$deel="<tr id=/'regel" . $record['$row[0]'] . "/' class='clickregel' >";
for ( $v=1; $v=$total_fields; $v++)
{
$deel=$deel."<td align = right>" . $record['$row[$v]']] . "</td>";
}
echo $deel."</tr>";
// *** einde regel maken ***
}
// *** einde regels vullen ***
}
else
{
echo "Error: " . $query . "" . mysqli_error($connect);
}
Hieronder de code die ik probeer te gebruiken om de lijst op de pagina te zetten.
$( document ).ready(function()
{
$('#Add_Form').hide();
$('#Update_Form').hide();
$("#Listed_Rows").text(function()
{
var list_data =
{
'action': 'list',
'tabel': "tabel_menu",
'velden': "menu_id, menu_waarde, menu_sub_van, menu_tekst, menu_link",
'sortering': "menu_waarde, menu_sub_van"
};
$.ajax
({
url: 'action.php',
method: 'POST',
data: list_data,
dataType: 'html',
success: function(result)
{
$('#Listed_Rows').html(result);
} // End of success function of ajax form
}); // End of ajax call
});
});
Simpelweg een tbody met een id volstaat, hier hoeft verder niets in te zitten. Je kunt de inhoud hier aan toevoegen met behulp van de .html() methode, hiermee kun je HTML in een tagpaar zetten.
Je hebt twee momenten waarop deze HTML geladen/herladen wordt:
- tijdens het laden van de pagina
- tijdens een content-refresh na een wijziging of wanneer je anders filtert of sorteert
Idealiter wil je dit op één manier aansturen. Je zou dus één AJAX-routine kunnen maken die deze inhoud ophaalt in de goede volgorde. Dit doe je ook voor geval #1 als je de pagina laadt, als het document klaar is met laden roep je deze routine eenmalig handmatig aan (dus bijvoorbeeld aan het einde van je $().ready( ... ) blok).
En dan wil je nog kunnen filteren en sorteren enzo. Ook hier kun je slimmer mee omgaan. Zo is het mogelijk om de querystring van de URL te updaten zonder de pagina te verversen (pushState). Bij zoekfunctionaliteit is het gebruikelijk dat je zoektermen en sorteercriteria opneemt in de URL. Op deze manier onthoud je ook je "zoek state" op het moment dat je de pagina daadwerkelijk ververst, of wanneer je je browser afsluit en later dezelfde tabs weer automatisch geopend worden. De eerder genoemde routine moet dit dus wel op kunnen pikken.
Ik ben nog steeds geen voorstander van de bovenstaande aanpak waarbij je letterlijk de velden, tabel en sortering uit JavaScript haalt en deze rechtstreeks in je query gooit. Deze query zou op een veilige manier opgebouwd moeten worden. Daarbij zijn al deze waarden op dit moment statisch. Ik zou ze daarom gewoon uit de JavaScript verwijderen en als je daar iets mee zou willen doen op een gegeven moment zou ik een equivalent aanmaken in JavaScript die later geëvalueerd wordt in PHP voordat je dit zonder blikken of blozen in een SQL-statement dumpt, dit is zeer onveilig.
Er zit best wat werk in een adminstratief systeem met jQuery/AJAX-aansturing, en hierbij is het zaak dat je goed nadenkt over de aanpak, want dat gaat later anders ontzettend pijn doen.
Ik heb het bestand action.php toch maar weer opgesplitst in action_add.php, action_edit.php, action_list.php, action_delete.php
Ik had add werkend, maar toen ik list er aan toevoegde ging add weer mis. Vandaar de opsplitsing.
Nu probeer ik dus nog steeds het list gedeelte in orde te krijgen. Nu eerst maar even bij het opstarten van de pagina.
pushState komt later als dit werkt.
Ik heb (denk ik) nu alles overgezet uit JavaSript naar Jquery.
Ik krijg nu de volgende melding bij het starten van de pagina.
HTTP500: SERVERFOUT - De server heeft een onverwachte fout ontdekt waardoor het verzoek niet kan worden voltooid.
(XHR)POST - http:// .... /action_list.php
Als ik een record toevoeg, dan gaat het goed.
Hier heb je de code waarbij ik probeer om de HTML-tabel op te bouwen bij het openen van de pagina.
Je wilt dus een functie hebben (refreshTable() ofzo) die gewoon alle data ophaalt als HTML.
Deze HTML plemp je vervolgens als inhoud in de juist HTML tag met behulp van .html().
Je wilt hier een functie van maken omdat je deze wilt hergebruiken op het moment dat je dingen toevoegt/wijzigt/verwijdert. Dan hoef je enkel in het .success() { ... } deel van die acties deze functie aan te roepen voor het refreshen van de tabel.
Zoals in een eerder voorbeeld aangegeven heb je voor deze acties enkel aparte knoppen nodig, de actie geef je vervolgens door aan het script dat de verwerking verzorgt in de AJAX-call. Je hoeft hier dus niet per se aparte routines voor te schrijven.
Verwijder alsjeblieft dat hele list_data gebeuren. Dit is allemaal statisch, en daarnaast knetter onveilig. Het zorgt op dit moment voor onnodige abstractie. Maak van de POST een GET, omdat dit gewoon logischer is. Je haalt immers informatie op (GET), je schrijft niets weg (POST).
Het hele bovenstaande deel kan dus een stuk korter.
Tot slot roep je dus eenmalig deze refresh-functie aan, aan het einde van je $().ready( ... ) blok voor het initieel vullen van je tabel.
Het idee van list_data is natuurlijk naar de toekomst toe wel handig (zelfde code voor een willekeurige andere tabel gebruiken). Alleen moet je het server-side allemaal nog wel even controleren voordat je het zomaar in een query plakt. Ik zou dus "velden" en "sortering" niet als een string doorgeven, maar als een array. Server-side heb je vervolgens een lijstje met toegestane tabellen, en per tabel ook nog weer een lijstje met (toegestane) kolommen. Eerst de tabel controleren (staat ie in de lijst?), en dan de kolommen (voor zowel "velden" als "sortering" - waarbij in die laatste evt ook gevolgd mag worden door " desc").
Nog een paar ideeën (ik heb zelf ook zoiets):
- Laad de data "op afroep". Toon dus eerst enkel de eerste 100 regels, en pas als de gebruiker gaat scrollen meer inladen.
- Leg per kolom ook het datatype vast (kun je bijvoorbeeld een getal met het juiste aantal decimalen tonen, rechts uitgelijnd).
- Leg per kolom vast hoe, en op welke manier je mag zoeken (exacte match, of deels = "like", enz), en of je op die kolom mag zoeken/sorteren (sommige kolommen zijn niet handig om op te sorteren, bijvoorbeeld omdat ze de query lang laten duren).
Mijn idee is inderdaad om een Refresh functie te maken om de tabel te plaatsen en te updaten.
Ik heb alleen geen idee hoe ik de functie kan aanroepen. Is dat gewoon de naam van de functie gebruiken? Ik wil hem dan RefreshTabel noemen. kan ik dan gewoon $("#Listed_Rows").RefreshTabel(); neerzetten?
POST omzetten naar GET ga ik doen.
Je bedoelt dat ik het lijst_data verhaal vervang door de query en die mee stuur via ajax naar de php.
Ik focus me nu even op de werking van het tonen en verversen van de lijst. De punten hieronder zijn even alleen als reactie bedoelt op de aanwijzingen van Rob Doemaarwat. (wel bedankt voor de reactie.
Het is inderdaad wel een goed idee om een deel in te lezen, en de rest in te lezen als er naartoe gescrold wordt. Alleen die verfraaiing moet ik nog bedenken hoe ik dat kan doen.
Ik denk dat ik met jquery ook wel de kolommen kan definiëren. Sorteren is wel iets dat ik wil toevoegen.
Ik wil de invoer wel aan banden leggen. Om op die manier het juiste formaten te garanderen.
Een zoek scherm is zeker iets dat ik er ook in wil hebben.
[size=xsmall]Toevoeging op 04/05/2020 15:25:18:[/size]
Frits van Leeuwen op 04/05/2020 15:15:59
Mijn idee is inderdaad om een Refresh functie te maken om de tabel te plaatsen en te updaten.
Ik heb alleen geen idee hoe ik de functie kan aanroepen. Is dat gewoon de naam van de functie gebruiken? Ik wil hem dan RefreshTabel noemen. kan ik dan gewoon $("#Listed_Rows").RefreshTabel(); neerzetten?
POST omzetten naar GET ga ik doen.
Je bedoelt dat ik het lijst_data verhaal vervang door de query en die mee stuur via ajax naar de php.
Ik focus me nu even op de werking van het tonen en verversen van de lijst. Ik puzzel nog naar wat ik met deze nieuwe informatie kan en kom er dan weer op terug.
De punten hieronder zijn even alleen als reactie bedoelt op de aanwijzingen van Rob Doemaarwat. (wel bedankt voor de reactie.
Het is inderdaad wel een goed idee om een deel in te lezen, en de rest in te lezen als er naartoe gescrold wordt. Alleen die verfraaiing moet ik nog bedenken hoe ik dat kan doen.
Ik denk dat ik met jquery ook wel de kolommen kan definiëren. Sorteren is wel iets dat ik wil toevoegen.
Ik wil de invoer wel aan banden leggen. Om op die manier het juiste formaten te garanderen.
Een zoek scherm is zeker iets dat ik er ook in wil hebben.
$().ready(function() {
// functie definitie
function refreshTable() {
$().ajax({
'url': '<locatie van PHP-code voor serveren tabel-body>',
// hier kun je eventueel later nog 'data' aan toevoegen als je wilt filteren/sorteren
'dataType': 'html', // type hint van de geretourneerde data
'method': 'GET', // je haalt informatie op
'success': function(data) {
$('#<id van tbody>').html(data);
}
});
} // function refreshTable
// zet hier je overige klik events, al is er in principe dus maar 1 nodig
// roep in het success() deel refreshTable() aan voor het verversen van de tabel
// ...
// en tot slot eenmalige functie-aanroep bij het laden van de pagina
refreshTable();
});[
Uiteraard dien je <locatie van PHP-code voor serveren tabel-body> en <id van tbody> te vervangen.
Het bovenstaande is simpelweg uitgeschreven wat ik al een aantal reacties probeerde over te brengen.
Een zoek scherm is zeker iets dat ik er ook in wil hebben.
Dan moet je hier NU al over na gaan denken. Net zoals security kun je dat niet zomaar uitstellen totdat je er iets mee gaat doen, dit moet je gewoon meenemen in je ontwerp, al was het maar om te voorkomen dat je jezelf op voorhand vastprogrammeert.
Om alvast een voorzetje te geven:
De waarden voor het zoeken en filteren van data kunnen uit een apart zoekformulier komen, en die stop je dan in het 'data' attribuut van de AJAX-call in refreshTable(). Hierbij gebruik je pushState om de URL bij te werken. Deze URL gebruik je eigenlijk alleen maar om dit zoekformulier via PHP te initialiseren als je deze pagina initieel laadt. Het ophalen van de data verloopt immers via JavaScript, en niet (direct) via PHP. JavaScript plukt bij aanroep van refreshTable() de geselecteerde/ingevulde waarden uit dit formulier en geeft deze informatie door aan het PHP-bestand voor het genereren van de data.
We hebben het hier een paar pagina's later in deze thread ongetwijfeld nog over.
Moet er niets tussen de haken bij $().ready... Ik denk hierbij aan &(document).ready... En bij $().ajax
Ik zie quotes om url, datatype, method en succes.
Moet de functie in $().ready... Of mag die er ook buiten staan?
Bij mijn werkende toevoeg functie gebruikte ik die niet. Is dat toch fout? Overigens heb ik daar $.ajax , dus zonder de haken achter $.
Ik wil eigenlijk de bestanden die met action beginnen, flexibel inzetten. Dus dat ik daar later ook weer gebruik van kan maken. Dus zet ik daar geen volledige query neer. Die laat ik daar samenvoegen. Op die manier beperk ik het aantal bestanden dat ik gebruik. En blijft mijn code toch duidelijk. Daarom probeerde ik eerder 1bestand action.php te maken. Maar dat lijkt niet mogelijk.
Moet er niets tussen de haken bij $().ready... Ik denk hierbij aan &(document).ready...
Werkt prima.
Frits van Leeuwen op 04/05/2020 18:05:11
En bij $().ajax
Ik zie quotes om url, datatype, method en succes.
Mogelijk niet nodig, maar een goede gewoonte. Het is een key, geen constante/variabele/whatever.
Frits van Leeuwen op 04/05/2020 18:05:11
Moet de functie in $().ready... Of mag die er ook buiten staan?
Waarom niet? Werkt mogelijk niet als je dat niet doet vanwege scope.
Frits van Leeuwen op 04/05/2020 18:05:11
Bij mijn werkende toevoeg functie gebruikte ik die niet. Is dat toch fout? Overigens heb ik daar $.ajax , dus zonder de haken achter $.
Mja type dit ook maar uit mijn hoofd, niet getest.
Frits van Leeuwen op 04/05/2020 18:05:11
Ik wil eigenlijk de bestanden die met action beginnen, flexibel inzetten. Dus dat ik daar later ook weer gebruik van kan maken. Dus zet ik daar geen volledige query neer. Die laat ik daar samenvoegen. Op die manier beperk ik het aantal bestanden dat ik gebruik. En blijft mijn code toch duidelijk. Daarom probeerde ik eerder 1bestand action.php te maken. Maar dat lijkt niet mogelijk.
Zie mijn eerdere voorbeeld, je kunt prima een switch-statement maken op grond van $_GET['action']?
Ik ben iets verder nu. Ik krijg nu geen foutmelding door ajax te gebruiken. Maar wat er terug komt moet ik nog goed gaan regelen. Daar stoei ik nog even.
$.ajax werkt goed.
De quotes waar ik noemde heb ik weg gelaten.
Ik heb de functie buiten de $(document).ready gehaald. Dat lijkt te werken. Je zegt i.v.m. de scope werkt het mogelijk niet, die opmerking snap ik niet.
Bij het toevoegen gebruik ik POST. Als ik die nu wil samenvoegen met lijst, dan kan ik toch geen GET gebruiken? Of kan heb ik het mis?
