met Ajax variabele naar php overbrengen
Pagina: « vorige 1 2 3 4 volgende »
Een button heeft wel een click event, maar je wilt niet de button-click afvangen, maar een formulier-submit.
Dit kun/kon je heel simpel testen, simpelweg door te kijken, en visueel terug te koppelen, welke events "vuren":
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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Click test</title>
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
</head>
<body>
<form id="testForm" action="" method="POST">
<button id="testButton" type="submit">submit</button>
</form>
<script type="text/javascript">
//<![CDATA[
$().ready(function() {
// vuurt niet - submit event bestaat niet voor (submit) buttons
$('#testButton').submit(function(e) {
e.preventDefault();
alert('button firing submit');
});
// vuurt wel - simpele klik
$('#testButton').click(function(e) {
// als je hier geen e.preventDefault() gebruikt gaat het submitten van het formulier door
// maar beter is dus om op de plek dat je een event wilt tegenhouden deze te stoppen
alert('button firing click, but not preventing other events from trickling through');
});
$('#testForm').submit(function(e) {
e.preventDefault(); // hier vangen we het daadwerkelijk submitten van het formulier af
alert('form firing submit, and preventing submit itself');
});
});
//]]>
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>Click test</title>
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
</head>
<body>
<form id="testForm" action="" method="POST">
<button id="testButton" type="submit">submit</button>
</form>
<script type="text/javascript">
//<![CDATA[
$().ready(function() {
// vuurt niet - submit event bestaat niet voor (submit) buttons
$('#testButton').submit(function(e) {
e.preventDefault();
alert('button firing submit');
});
// vuurt wel - simpele klik
$('#testButton').click(function(e) {
// als je hier geen e.preventDefault() gebruikt gaat het submitten van het formulier door
// maar beter is dus om op de plek dat je een event wilt tegenhouden deze te stoppen
alert('button firing click, but not preventing other events from trickling through');
});
$('#testForm').submit(function(e) {
e.preventDefault(); // hier vangen we het daadwerkelijk submitten van het formulier af
alert('form firing submit, and preventing submit itself');
});
});
//]]>
</script>
</body>
</html>
Zet anders eens tijdelijk de historie aan in je netwerktab, dan zie je ook vorige pagerequests. Waarschijnlijk wordt de pagina waar je het formulier op hebt staan gewoon meerdere keren aangeroepen omdat je dus form submits gewoon doorlaat...
Zoveel stond ook al in mijn vorige reactie:
Thomas van den Heuvel op 26/04/2020 17:23:33:
Ik zou dus in plaats van een functie eerder een submit event bij $('#Add_Row').submit(...) verwachten, waarbij je dus het default gedrag van een formulier (verzending) voorkomt...
Hierbij is #Add_Row het id van het formulier, niet van een button.
En dan al die meldingen van je JavaScript over allemaal vage velden?
Als je nu eens gewoon een minified/full versie download van de het officiële jQuery Content Delivery Network?
Gewijzigd op 27/04/2020 15:15:38 door Thomas van den Heuvel
Code (php)
1
2
2
<button id="Button_Cancel_Add" type="Submit" name="knoppena" value="Cancel" class="button_cancel" alt="annuleren"></button>
<button id="Button_Save_Add" type="Submit" name="knoppen" value="Submit" class="button_save" alt="opslaan"></button>
<button id="Button_Save_Add" type="Submit" name="knoppen" value="Submit" class="button_save" alt="opslaan"></button>
Ik heb het volgende ook over genomen:
Code (php)
1
2
3
4
2
3
4
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
maar dat maakte geen verschil met wat ik had:
Code (php)
1
<script type="text/javascript" src="jquery-3.5.0.min.js" ></script>
Ik heb direct boven </body> dit staan
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
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
<script>
$( "#Add_Row" ).submit(function(e)
{
e.preventDefault(); // hier vangen we het daadwerkelijk submitten van het formulier af
var a_action = "add";
var waarde = $("#fwaarde").val();
var subvan = $("#fsubvan").val();
var tekst = $("#ftekst").val();
var link = $("#flink").val();
var form_data = {
'action': a_action,
'tabel': "tabel_menu",
'velden': "'menu_id', 'menu_waarden', 'menu_subvan', 'menu_tekst', 'menu_link'",
'invulling': "NULL, '" + waarde + "', '" + subvan + "', '" + tekst + "', '" + link + "'"
};
jQuery.ajax
({
url: 'action.php',
method: 'POST',
data: form_data,
success:function()
{
alert ("record toegevoegd");
}
});
</script>
$( "#Add_Row" ).submit(function(e)
{
e.preventDefault(); // hier vangen we het daadwerkelijk submitten van het formulier af
var a_action = "add";
var waarde = $("#fwaarde").val();
var subvan = $("#fsubvan").val();
var tekst = $("#ftekst").val();
var link = $("#flink").val();
var form_data = {
'action': a_action,
'tabel': "tabel_menu",
'velden': "'menu_id', 'menu_waarden', 'menu_subvan', 'menu_tekst', 'menu_link'",
'invulling': "NULL, '" + waarde + "', '" + subvan + "', '" + tekst + "', '" + link + "'"
};
jQuery.ajax
({
url: 'action.php',
method: 'POST',
data: form_data,
success:function()
{
alert ("record toegevoegd");
}
});
</script>
Gewijzigd op 27/04/2020 23:36:11 door Frits van Leeuwen
Frits van Leeuwen op 27/04/2020 18:38:18:
Hoe zit het bij meerdere knoppen van het type submit?
De vraag stellen is hem beantwoorden.
Bij gebrek aan inspiratie kun je zo'n vraagstuk altijd in ome Goegel gooien, bijvoorbeeld "jquery identify button of form submit" eerste resultaat.
Dat levert wat mij betreft nogal wat bagger op. Dus dan is het toch misschien beter om terug te gaan naar de eerdere opzet waarbij je button-clicks afvangt (en daarmee de form submit).
Je geeft zelf al functioneel aan wat er moet gebeuren: je moet op een of andere manier de geklikte button (en daarmee dus de uit te voeren actie) identificeren. Dit is weer een apart vraagstuk, en kan -op legio manieren- in afzondering worden opgelost. En deze actie moet vervolgens op een of andere manier worden overgeheveld naar de AJAX-call.
Dit is in het algemeen hoe je (of in ieder geval, hoe ik) dingen in jQuery maar ook in PHP opbouw: deel het op in deelproblemen en tackle deze problemen stuk voor stuk. Maar hierbij moet je dus wel via een plan te werk gaan en ook weten hoe je data voor debugging/ontwikkeling boven water kunt halen. Anders ben je in wezen niets anders aan het doen dan trekken en duwen aan een of andere black box.
Het is (nogmaals) niet nodig om al die formulier-variabelen te kopiëren. Het enige wat je moet doen is op een of andere manier een referentie verkrijgen naar het formulier ( bijvoorbeeld var $form = $('#Add_Row'); ) binnen de AJAX-callback, en vervolgens kun je gewoon in één ruk alle data serialiseren ( 'data': $form.serialize(); ). Het verwerkende script moet verder maak uitzoeken welke informatie die hiervan kan gebruiken, dat is niet echt de taak noch de verantwoordelijkheid van het stukje JavaScript. Deze zet enkel alles op de lopende band om verder door het PHP-script verwerkt te worden.
Wederom een voorbeeld van een aanpak. Kost misschien wat moeite, maar dit kun je allemaal bij elkaar Googlen:
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
49
50
51
52
53
54
55
56
57
58
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
49
50
51
52
53
54
55
56
57
58
<?php
// https://www.phphulp.nl/php/forum/topic/met-ajax-variabele-naar-php-overbrengen/103477
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
header('Content-Type: application/json; charset=UTF-8');
echo json_encode($_POST); // dump simpelweg $_POST als test om te zien wat je ontvangen hebt
exit;
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX test</title>
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
</head>
<body>
<form id="testForm" action="" method="POST">
field: <input type="text" name="field" value=""><br>
another: <input type="text" name="another" value=""><br>
<button class="js-action" data-action="one" type="submit">een</button>
<button class="js-action" data-action="two" type="submit">twee</button>
</form>
<script type="text/javascript">
//<![CDATA[
$().ready(function() {
// hang een event op aan alle buttons met class js-action binnen het formulier
$('#testForm button.js-action').click(function(e) {
e.preventDefault(); // hiermee wordt effectief de form submit afgevangen
var $theForm = $('#testForm'); // maak referentie naar formulier
var action = $(this).data('action'); // bepaal actie, deze zit in een data-XXX attribuut, waar XXX in dit geval 'action' is
var data = $theForm.serializeArray(); // serialiseer formulier als array
data.push({'name': 'action', 'value': action}); // voeg actie toe, zorg ervoor dat je geen bestaand veld overschrijft...
console.log('This is the data I am going to send:');
console.log(data); // controleer eventueel wat je gaat versturen
$.ajax({
'url': '<?php echo $_SERVER['SCRIPT_NAME']; ?>',
'method': 'POST',
'data': $.param(data), // maak een geserialiseerde string van dit array
'dataType': 'JSON', // return type of d
'success': function(d) {
// dump alles naar je console bij wijze van test
console.log('I got this data back from the processing script:');
console.log(d);
}
});
});
});
//]]>
</script>
</body>
</html>
// https://www.phphulp.nl/php/forum/topic/met-ajax-variabele-naar-php-overbrengen/103477
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
header('Content-Type: application/json; charset=UTF-8');
echo json_encode($_POST); // dump simpelweg $_POST als test om te zien wat je ontvangen hebt
exit;
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX test</title>
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
</head>
<body>
<form id="testForm" action="" method="POST">
field: <input type="text" name="field" value=""><br>
another: <input type="text" name="another" value=""><br>
<button class="js-action" data-action="one" type="submit">een</button>
<button class="js-action" data-action="two" type="submit">twee</button>
</form>
<script type="text/javascript">
//<![CDATA[
$().ready(function() {
// hang een event op aan alle buttons met class js-action binnen het formulier
$('#testForm button.js-action').click(function(e) {
e.preventDefault(); // hiermee wordt effectief de form submit afgevangen
var $theForm = $('#testForm'); // maak referentie naar formulier
var action = $(this).data('action'); // bepaal actie, deze zit in een data-XXX attribuut, waar XXX in dit geval 'action' is
var data = $theForm.serializeArray(); // serialiseer formulier als array
data.push({'name': 'action', 'value': action}); // voeg actie toe, zorg ervoor dat je geen bestaand veld overschrijft...
console.log('This is the data I am going to send:');
console.log(data); // controleer eventueel wat je gaat versturen
$.ajax({
'url': '<?php echo $_SERVER['SCRIPT_NAME']; ?>',
'method': 'POST',
'data': $.param(data), // maak een geserialiseerde string van dit array
'dataType': 'JSON', // return type of d
'success': function(d) {
// dump alles naar je console bij wijze van test
console.log('I got this data back from the processing script:');
console.log(d);
}
});
});
});
//]]>
</script>
</body>
</html>
Bij het eerste karakter dat ik in een veld in geef volgt deze melding:
0: Unable to get property 'isPersonal' of undefined or null reference
Autoformfill_ContentScript.js (1,168)
ALs ik de submit wil doen verschijnen deze meldingen:
0: Unable to get property 'SavePersonalAndPaymentData' of undefined or null reference
Autoformfill_ContentScript.js (1,20660)
HTTP500: SERVERFOUT - De server heeft een onverwachte fout ontdekt waardoor het verzoek niet kan worden voltooid.
(XHR)POST - http://qnap/geldboom.nl/versie100/action.php
In netwerk zie ik in het rood 500 bij action.php
Of roep je URL handmatig op, met de hoop dat je een foutmelding ziet.
Gewijzigd op 28/04/2020 00:43:50 door - Ariën -
Heeft dat uberhaupt met de vraagstelling te maken?
Daar komt nergens een script Autoformfill_ContentScript.js ter sprake, noch "isPersonal" noch "SavePersonalAndPaymentData" dus geen idee wat dat allemaal voor troep is?
Het stoort in ieder geval wat je probeert te doen enorm, dus als je meer JavaScript in dat ding hebt zitten zul je dit of compatibel moeten maken of moeten verwijderen.
Ik hou nog 1 fout over voor ik verder kan.
Hoe kan ik een tabel een refresh geven anders een pagina reset zodra ik ajax z'n werk heb laten doen.
De code zoals ik die nu heb: (Edit en Delete volgen later)
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
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
<?php
// action.php
// Met dit bestand kan je toevoegen, wijzigen en verwijderen.
if(!empty($_POST['action']))
{
$query = "";
include("init.php");
include("databaseopenen.php"); // openen van de database
switch($_POST['action'])
{
case 'add':
$query = "INSERT INTO " . $_POST['tabel'] . " ( " . $_POST['velden'] . " ) VALUES ( NULL, " . $_POST['vulling'] . " )";
if (mysqli_query($connect, $query))
{
echo "New record created successfully";
}
else
{
echo "Error: " . $query . "" . mysqli_error($connect);
}
break;
case 'edit':
$query = "UPDATE " . $_POST['tabel'] . " set " . $_POST['wijzigingen'] . " WHERE id=" . $_POST['id'];
break;
case 'delete':
$query = "DELETE FROM " . $_POST['tabel'] . " WHERE id=" . $_POST['id'];
break;
}
}
?>
// action.php
// Met dit bestand kan je toevoegen, wijzigen en verwijderen.
if(!empty($_POST['action']))
{
$query = "";
include("init.php");
include("databaseopenen.php"); // openen van de database
switch($_POST['action'])
{
case 'add':
$query = "INSERT INTO " . $_POST['tabel'] . " ( " . $_POST['velden'] . " ) VALUES ( NULL, " . $_POST['vulling'] . " )";
if (mysqli_query($connect, $query))
{
echo "New record created successfully";
}
else
{
echo "Error: " . $query . "" . mysqli_error($connect);
}
break;
case 'edit':
$query = "UPDATE " . $_POST['tabel'] . " set " . $_POST['wijzigingen'] . " WHERE id=" . $_POST['id'];
break;
case 'delete':
$query = "DELETE FROM " . $_POST['tabel'] . " WHERE id=" . $_POST['id'];
break;
}
}
?>
De code waarmee ik bovenstaande aanroep is:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$( "#Add_Row" ).submit(function(e)
{
e.preventDefault(); // hier vangen we het daadwerkelijk submitten van het formulier af
var form_data =
{
'action': 'add',
'tabel': "tabel_menu",
'velden': "menu_id, menu_waarde, menu_sub_van, menu_tekst, menu_link",
'vulling': "'" + $('#fwaarde').val() + "', '" + $('#fsubvan').val() + "', '" + $('#ftekst').val() + "', '" + $('#flink').val() + "'"
};
$.ajax
({
url: 'action.php',
method: 'POST',
data: form_data
});
// formulieren en knoppen tonen of verbergen en waardes weer uitschakelen.
$('#Button_Add').show(); // toevoegknop tonen
$('#Add_Form').hide(); // toevoeg formulier verbergen
});
{
e.preventDefault(); // hier vangen we het daadwerkelijk submitten van het formulier af
var form_data =
{
'action': 'add',
'tabel': "tabel_menu",
'velden': "menu_id, menu_waarde, menu_sub_van, menu_tekst, menu_link",
'vulling': "'" + $('#fwaarde').val() + "', '" + $('#fsubvan').val() + "', '" + $('#ftekst').val() + "', '" + $('#flink').val() + "'"
};
$.ajax
({
url: 'action.php',
method: 'POST',
data: form_data
});
// formulieren en knoppen tonen of verbergen en waardes weer uitschakelen.
$('#Button_Add').show(); // toevoegknop tonen
$('#Add_Form').hide(); // toevoeg formulier verbergen
});
Die code hierboven, ik kan mij wel een paar leuke SQL-injecties voorstellen.
DELETE FROM users WHERE id = 1 OR 1=1? :/
Quote:
Hoe kan ik een tabel een refresh geven anders een pagina reset zodra ik ajax z'n werk heb laten doen.
Je bedoelt met "tabel" waarschijnlijk hier de HTML-tabel?
Ok, je hebt nu weliswaar dus alle backend code geschreven (vatbaar voor verbetering, met name qua security), maar je hebt waarschijnlijk nog niet nagedacht over hoe je de visuele zaken regelt. Zo zou het bijvoorbeeld wel handig zijn dat je een soort routine had voor het (visueel) toevoegen of verwijderen van een tabelrij, of een routine voor het verversen van de volledig lijst.
Op het moment dat je met jQuery dit soort functionaliteit in elkaar gaat zetten dan wordt zo'n lijst met AJAX-aansturing een soort van levend ding met "gedrag", dit omdat het niet langer het traditionele request-response schaakspel is wat je van webpagina's gewend bent. Je zult dus dit gedrag op een of andere manier moeten vastleggen en handig moeten bundelen zodat je ook alle visuele dingen makkelijk kunt verwezenlijken.
Als je hier nu pas over begint na te denken dan zul je mogelijk code moeten omgooien om e.e.a. te stroomlijnen.
In het callback gedeelte van de ajax-aanroep ('success': function(data) { ... } ) zou je een status kunnen teruggeven die aangeeft of het INSERTen was gelukt, en zoja, de data kunnen retourneren om de nieuwe tabelrij in te voegen. Wat je ook zou kunnen doen is een refresh-call doen op de tabel, zodat alle informatie, wederom via AJAX, opnieuw wordt binnengetrokken en de lijst wordt ververst.
Oftewel, in het 'success'-deel kun je het verwerkende PHP-script een seintje terug laten geven (deze belt terug: callback) naar de jQuery/JavaScript op het moment dat de INSERT/andere databasebewerking is afgerond. In mijn voorbeeld hierboven gebeurt dat ook, PHP dumpt alles in JSON-formaat terug naar de success-functie.
Ik zou je ook zeker aanraden om jezelf ervan te overtuigen dat je ook snapt wat er allemaal op de achtergrond gebeurt tussen webbrowser en webserver, hiertoe kan de netwerktab (onder de F12 toets) inzicht verschaffen.
Gewijzigd op 02/05/2020 02:14:18 door Thomas van den Heuvel
Klik ik op de toevoegknop, dan verschijnt er boven de html tabel een formulier om toe te voegen. De toevoeg knop verdwijnt ook. Met behulp van jquery en ajax kan ik na een druk op de opslaan knop de mysql tabel aanvullen. en verdwijnt het toevoegformulier. De toevoegknop verschijnt ook weer.
klik ik op een regel, dan krijg ik een mutatie formulier boven de html tabel. De toevoegknop verdwijnt. Dan is er de mogelijkheid om te muteren, of de knop om te verwijderen te gebruiken. Ook hier klik je op de opslaan knop om de mysql tabel te muteren.
In beide situaties is er ook een annuleer knop. Deze moet het toevoeg- of muteer-formulier weer sluiten zonder verder iets te doen.
Zodra de opslaan- of verwijder-knop is gebruikt, wil ik de html tabel opnieuw opbouwen.
Dit alles het liefst zonder het scherm te verversen.
Ik heb nu een PHP code die zorgt voor de opbouw van de html tabel.
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
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
<?php
//menu_tabel_list.php
$query_menu_beheer =
"SELECT menu_id, menu_sub_van, menu_waarde, menu_tekst, menu_link
FROM tabel_menu
ORDER BY menu_waarde, menu_sub_van";
$result_menu_beheer = mysqli_query($connect, $query_menu_beheer);
$regel_menu_beheer = array();
// *** regels vullen ***
$i = 0;
$regel = array();
foreach($result_menu_beheer as $record_menu_beheer)
{
$i = $i + 1;
// *** regel maken *** tr id='regel[$i]'
echo
"<tr id='regel' class='clickregel' onclick='SelecteerRegel( this, " . $record_menu_beheer['menu_id'] . " )'>
<td align = right>" . $record_menu_beheer['menu_waarde'] . "</td>
<td align = right>" . $record_menu_beheer['menu_sub_van'] . "</td>
<td align = left>" . $record_menu_beheer['menu_tekst'] . "</td>
<td align = left>" . $record_menu_beheer['menu_link'] . "</td>
</tr>";
// *** einde regel maken ***
}
// *** einde regels vullen ***
?>
//menu_tabel_list.php
$query_menu_beheer =
"SELECT menu_id, menu_sub_van, menu_waarde, menu_tekst, menu_link
FROM tabel_menu
ORDER BY menu_waarde, menu_sub_van";
$result_menu_beheer = mysqli_query($connect, $query_menu_beheer);
$regel_menu_beheer = array();
// *** regels vullen ***
$i = 0;
$regel = array();
foreach($result_menu_beheer as $record_menu_beheer)
{
$i = $i + 1;
// *** regel maken *** tr id='regel[$i]'
echo
"<tr id='regel' class='clickregel' onclick='SelecteerRegel( this, " . $record_menu_beheer['menu_id'] . " )'>
<td align = right>" . $record_menu_beheer['menu_waarde'] . "</td>
<td align = right>" . $record_menu_beheer['menu_sub_van'] . "</td>
<td align = left>" . $record_menu_beheer['menu_tekst'] . "</td>
<td align = left>" . $record_menu_beheer['menu_link'] . "</td>
</tr>";
// *** einde regel maken ***
}
// *** einde regels vullen ***
?>
Als ik je goed volg, moet ik deze code omzetten naar jquery om het makkelijker te maken voor mezelf.
Gewijzigd op 02/05/2020 11:44:50 door Frits van Leeuwen
Frits van Leeuwen op 02/05/2020 11:43:16:
Als ik je goed volg, moet ik deze code omzetten naar jquery om het makkelijker te maken voor mezelf.
Dat is een mogelijkheid ja.
Al meteen een "gotcha": <tr id="regel"> in een loop. Waarom verwerk je niet gewoon het menu_id in een data-veld?
En als je dan toch gebruik maakt van jQuery: verwijder onclick uit de HTML-code, hier hoeft helemaal geen JavaScript meer in voor te komen. Het koppelen van events aan HTML/de DOM regel je via jQuery zelf.
De regel hoeft niet eens een class-regel te hebben. Als je een id toekent aan de tabel-tag zelf kun je elk element daarvandaan benaderen. Op eenzelfde wijze kun je ook alle opmaak regelen.
Gewijzigd op 02/05/2020 16:33:40 door Thomas van den Heuvel
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
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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>
<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:
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
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);
}
{
$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.
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
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
$( 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
});
});
{
$('#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
});
});
Gewijzigd op 03/05/2020 00:13:59 door Frits van Leeuwen
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.
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
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
$( document ).ready(function()
{
$('#Add_Form').hide();
$('#Update_Form').hide();
$("#Listed_Rows").html(function()
{
var list_data =
{
'tabel': "tabel_menu",
'velden': "menu_id, menu_waarde, menu_sub_van, menu_tekst, menu_link",
'sortering': "menu_waarde, menu_sub_van"
};
$.ajax
({
url: 'action_list.php',
method: 'POST',
data: list_data,
succes: function()
{
},
error: function()
{
}
}); // End of ajax call
});
});
{
$('#Add_Form').hide();
$('#Update_Form').hide();
$("#Listed_Rows").html(function()
{
var list_data =
{
'tabel': "tabel_menu",
'velden': "menu_id, menu_waarde, menu_sub_van, menu_tekst, menu_link",
'sortering': "menu_waarde, menu_sub_van"
};
$.ajax
({
url: 'action_list.php',
method: 'POST',
data: list_data,
succes: function()
{
},
error: function()
{
}
}); // End of ajax call
});
});
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php
// action_list.php
$query_list ="SELECT " . $_POST['velden'] . " FROM " . $_POST['tabel'] . " ORDER BY " . $_POST['sortering']
$result_list = mysqli_query($connect, $query_list);
$total_fields = mysqli_field_count($connect); //aantal velden
$row = $result_list -> fetch_array(MYSQLI_NUM);
// *** regels vullen ***
$line = array();
foreach($line = $result_list as $record_list)
{
// *** regel maken *** tr id='regel[$i]'
$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 ***
}
?>
// action_list.php
$query_list ="SELECT " . $_POST['velden'] . " FROM " . $_POST['tabel'] . " ORDER BY " . $_POST['sortering']
$result_list = mysqli_query($connect, $query_list);
$total_fields = mysqli_field_count($connect); //aantal velden
$row = $result_list -> fetch_array(MYSQLI_NUM);
// *** regels vullen ***
$line = array();
foreach($line = $result_list as $record_list)
{
// *** regel maken *** tr id='regel[$i]'
$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 ***
}
?>
Gewijzigd op 04/05/2020 00:15:32 door Frits van Leeuwen
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.
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).
Gewijzigd op 04/05/2020 09:22:02 door Rob Doemaarwat
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.
Toevoeging op 04/05/2020 15:25:18:
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.
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.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$().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();
});[
// 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.
Quote:
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.
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.
Frits van Leeuwen op 04/05/2020 18:05:11:
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.
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']?
$.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?
Pagina: « vorige 1 2 3 4 volgende »