Door
Frits van Leeuwen
op 20-04-2020 00:22
gewijzigd op 20-04-2020 00:36
8.067 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.
Je zegt i.v.m. de scope werkt het mogelijk niet, die opmerking snap ik niet.
Scope is het geldigheidsgebied van variabelen en functies. Wanneer je dingen in verschillende $().ready( ... ) blokken zet dan weten deze niets van elkaar.
Frits van Leeuwen op 05/05/2020 18:05:08
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?
Dit zijn toch verschillende AJAX-calls? :/
En je hebt er dus in principe maar twee nodig:
Eén AJAX call (GET) voor het ophalen van de lijst.
Eén AJAX call (POST) voor het uitvoeren van acties (toevoegen/wijzigen/verwijderen).
Kijk... weer zo'n mooie uitleg. Dank je wel. weer wat geleerd.
Ik heb de functie refreshTable zowel binnen de $(document).ready als er buiten geplaatst, dat maakt voor mij geen verschil voor de werking.
// pagina is open
$( document ).ready(function()
{
$('#Add_Form').hide();
$('#Update_Form').hide();
// 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: 'action_list.php',
data:
{
'query': "SELECT menu_id, menu_waarde, menu_sub_van, menu_tekst, menu_link FROM tabel_menu ORDER BY menu_waarde, menu_sub_van"
},
dataType: 'html', // HTML code om een tabel te plaatsen of te refreshen
method: 'GET', // je haalt informatie op
success: function(data)
{
$('#Listed_Rows').html(data);
}
});
} // einde function refreshTable
$( "#Add_Row" ).submit(function(e)
{
e.preventDefault(); // hier vangen we het daadwerkelijk submitten van het formulier af
$.ajax
({
url: 'action_add.php',
method: 'POST',
data:
{
'query': "INSERT INTO tabel_menu ( menu_id, menu_waarde, menu_sub_van, menu_tekst, menu_link ) VALUES ( NULL, '" + $('#fwaarde').val() + "', '" + $('#fsubvan').val() + "', '" + $('#ftekst').val() + "', '" + $('#flink').val() + "' )"
},
success: function()
{
refreshTable();
}
});
// formulieren en knoppen tonen of verbergen en waardes weer uitschakelen.
$('#Button_Add').show(); // toevoegknop tonen
$('#Add_Form').hide(); // toevoeg formulier verbergen
});
Het bestand action_list.php ziet er als volgt uit:
<?php
// action_list.php
// Met dit bestand kan je een tabel tonen.
include("init.php");
include("databaseopenen.php"); // openen van de database
$result_list = mysqli_query($connect, $_GET['query']);
$field_cnt = mysqli_num_fields($result_list);
while ($row = mysqli_fetch_array($result_list, MYSQLI_NUM))
{
// *** regel maken ***
$line = "<tr id='regel" . $row[0] . "'>";
for ($i = 1; $i <= ($field_cnt-1); $i++)
{
$line = $line . "<td>".$row[$i]."</td>";
}
$line = $line . "</tr>";
// *** einde regel maken ***
echo $line;
}
?>
De volgende vraag die ik nu heb, is hoe ik de regel aanklikbaar kan maken met jquery. Want dan moet ik natuurlijk het scherm om te muteren open zetten om te gebruiken. Iedere regel heet id='regelX' waar bij X voor een id-nummer staat. Dus id='regel1',id='regel2' enz.
[size=xsmall]Toevoeging op 06/05/2020 23:36:11:[/size]
Stapje voor stapje kom ik verder.
De regels zijn aanklikbaar. De aangeklikte regel verdwijnt en er opent een formulier om te muteren.
De juiste knoppen worden aan gezet. En ik heb het ID nummer in een variabele.
de tabel hoeft niet alle velden te bevatten die het Mutatie_form bevat. Dus vraag ik me nu af, hoe krijg ik het Mutatie_Form gevuld met de informatie die in het record van het ID staat.
Hier onder de code om het formulier in te gaan, Id te pakken, formulier te openen, knoppen in te stellen, en de velden waarden te geven. Alleen nu heb ik daar 'xxxx' ingevuld. (dat moet natuurlijk anders.
$('#Listed_Rows').delegate("tr", "click", function()
{
var idstr = '#'+$(this).attr('id');
var id = idstr.substr(5);
$('#'+this.id).siblings().show(); // alle regels tonen
$('#'+this.id).hide();
$('#Mutatie_Form').show(); // formulier tonen
$('#Button_Add').hide(); // toevoegknop verbergen
$('#Button_Cancel_Add').hide();
$('#Button_Save_Add').hide();
$('#Button_Cancel_Update').show();
$('#Button_Save_Update').show();
$('#Button_Delete_Verzoek').show();
$('#Delete_Yes_No').hide(); // verwijderverzoek verbergen
// velden moeten gevuld worden
$('#fidnr').val('xxxx');
$('#fwaarde').val('xxxx');
$('#fsubvan').val('xxxx');
$('#ftekst').val('xxxx');
$('#flink').val('xxxx');
$('#fwaarde').focus();
});
Ja dat dacht ik ook wel. Maar ik moet uitzoeken hoe ik dat ga doen. Mijn gedachte hierbij is dan dat ik in een ajax opdracht zoek naar het record met dat ID.
Tot zover geen probleem denk ik. Maar hoe stop ik dan de velden van het record in de velden van het formulier?
Ik ben haar het googlen gegaan, en heb misschien een oplossing gevonden, maar ik moet me er nog toe zetten om het te proberen.
- Haal het resultaat als een HTML-puzzelstukje op.
- Spuug het resultaat uit in een JSON-formaat, zodat je die eindelijk zelf kan uitlezen met via bijv. jQuery met .parseJSON()
Dat laatste geeft mij voorkeur als het om data gaat. Als het meer om een aparte pagina gaat, dan is HTML een mogelijkheid. Maar je zorgt er wel voor dat je HTML in je request-scripts terecht komt. Niet echt handig bij onderhoud. Je zou dit eventueel als je een template-systeem gebruikt, dit als een template-file kunnen onderbrengen.
Ik heb iets in elkaar geflanst, Maar het werkt nog niet zoals ik wil.
Met de volgende code roep ik met ajax action_get.php op. Waar ik een json string maak. Deze wil ik dan via de jquery gelijkin de velden van mijn form gooien.
$('#Listed_Rows').delegate("tr", "click", function()
{
var idstr = '#'+$(this).attr('id');
var id = idstr.substr(5);
$('#'+this.id).siblings().show(); // alle regels tonen
$('#'+this.id).hide();
$('#Mutatie_Form').show(); // formulier tonen
$('#Button_Add').hide(); // toevoegknop verbergen
$('#Button_Cancel_Add').hide();
$('#Button_Save_Add').hide();
$('#Button_Cancel_Update').show();
$('#Button_Save_Update').show();
$('#Button_Delete_Verzoek').show();
$('#Delete_Yes_No').hide(); // verwijderverzoek verbergen
// velden moeten gevuld worden
$.ajax(
{
url: 'action_get.php',
data:
{
'action': 'ShowRecord',
'query': "SELECT menu_id, menu_waarde, menu_sub_van, menu_tekst, menu_link FROM tabel_menu WHERE menu_id="+id
},
dataType: 'json', // json code naar form te halen
method: 'GET' // je haalt informatie op
}).done(function( data )
{
var result = $.parseJSON(data);
$('#fidnr').val(result[menu_id]);
$('#fwaarde').val(result[menu_waarde]);
$('#fsubvan').val(result[menu_sub_van]);
$('#ftekst').val(result[menu_tekst]);
$('#flink').val(result[menu_link]);
});
$('#fwaarde').focus();
});
action_get.php ziet er als volgt uit.
<?php
// action_get.php
// Met dit bestand kan je een tabel tonen of één record inlezen.
include("init.php");
include("databaseopenen.php"); // openen van de database
$result = mysqli_query($connect, $_GET['query']);
$total_fields = mysqli_num_fields($result);
switch($_GET['action'])
{
case 'ShowList':
while ($row = mysqli_fetch_array($result, MYSQLI_NUM))
{
// *** regel maken ***
$line = "<tr id='regel" . $row[0] . "'>";
for ($i = 1; $i <= ($total_fields-1); $i++)
{
$line = $line . "<td>".$row[$i]."</td>";
}
$line = $line . "</tr>";
// *** einde regel maken ***
echo $line;
}
break;
case 'ShowRecord':
while ($row = mysqli_fetch_assoc($result)) {
$line ="{ ";
for ($i = 0; $i <= ($total_fields-1); $i++)
{
if ($i << ($total_fields-1) )
{
$line = $line . mysql_fetch_field($result, $i) . " : " . $row[$i] . " , ";
}
else
{
$line = $line . mysql_fetch_field($result, $i) . " : " . $row[$i] ;
}
}
echo $line . " }";
}
break;
}
?>
Ik krijg geen foutmeldingen, maar de velden blijven leeg.
Ik weet niet hoe ik kan zien of de ajax opdracht goed wordt uitgevoerd.
Wat als een of andere clown daar "DELETE FROM users WHERE 1" van maakt ofzo?
Daarbij, waarom zou je het resultaat handmatig bouwen? Hiervoor is json_encode().
EDIT: Ook lijkt het mij een goede gewoonte om enerzijds in de AJAX-call op te nemen wat voor data je terugverwacht (via dataType) en anderzijds aan de PHP-kant aan te geven wat voor content je terugserveert middels een header('Content-Type: ...');. Een toevoeging van de character encoding kan ook geen kwaad.
Geen SQL in Javascript? Heb je een voorstel hoe dat beter kan? Ik sta voor alles open. Dit leek me duidelijk. Ik had eerder alles via de AJAX naar de php file gestuurd, waar ik de SQL query opbouwde.
Beetje bij beetje leer ik ajax ook beter kennen. datatype altijd noemen lijkt me inderdaad een goede gewoonte. Maar dat vanuit de php terug mag je me nog wat verduidelijken. Die snap ik nog niet helemaal. Logisch lijkt het me wel.
oude mysql_fetch_field …. oeps even niet opgelet. Die kopieerde ik uit het gevonden google-resultaat
Bedankt weer voor deze feedback. Ik ga weer kijken wat ik er mee kan.
