De bedoeling is dat er dan een popup opent met een aanpaspagina, daarvoor moet ik dus de data-id attribute meesturen en dat doe ik in de javascript. Dit alles werkt prima.
Nu wil ik daaronder nog een link zetten om hetzelfde te doen:
Die popup opent ook maar hij past mijn pagina niet aan. Bij de eerste wel. Voor beide gebruik ik aanpas-modal.php:
<?php
$id = $_GET['id'];
echo 'ID: '.$id;
require ('config.php');
$conn = mysql_connect($host,$user,$pass) or die (mysql_error());
mysql_select_db($dbnm) or die (mysql_error());
$sql = "SELECT * FROM historiek WHERE id = '". $id ."'";
$res = mysql_query($sql) or die (mysql_error());
while($row = mysql_fetch_assoc($res))
{
?>
<div class="row">
<form role="form" method="post" id="historiek">
<div class="form-group">
<textarea class="form-control ckeditor" id="editor10" name="historiek" rows="10"><?php echo $row['historiek']; ?></textarea>
</div>
<div class="form-group">
<button id="Submit1234" type="submit" name="Submit" class="btn btn-info">Wijzigen</button>
</div>
<input type="hidden" name="id" value="<?php echo $id; ?>">
</form>
</div>
<script>
$(function(){
$('#Submit1234').click(function(e){
e.preventDefault();
//alert($('#editor10').val());
$.post('aanpas-modal-process.php',
$('#historiek').serialize(),
function(data, status, xhr){
//alert('Gelukt!');
//$("#thanks").html(data) //hide button and show thank you
alert('Opgeslagen... Sluit popup!');
});
});
});
</script>
<script type="text/javascript">
jQuery(function($){
$('#editor10').ckeditor();
});
</script>
<?php } ?>
Op die pagina krijg ik wel iedere keer de juiste id waarde mee.
Hoe zou dit komen? Iemand een idee?
Voor alle duidelijkheid nog even de aanpas-modal-process.php:
<?php
//grab named inputs from html then post to #thanks
if (isset($_POST['historiek'])) {
$id = strip_tags($_POST['id']);
$historiek = strip_tags($_POST['historiek']);
require ('config.php');
$conn = mysql_connect($host,$user,$pass) or die (mysql_error());
mysql_select_db($dbnm) or die (mysql_error());
$sql = "UPDATE historiek SET historiek = '$historiek' WHERE id = '". $id ."'";
$res = mysql_query($sql) or die (mysql_error());
}
?>
Ik heb al 3 keer gezegd dat je alles wat met die modal te maken heeft in de html van dezelfde pagina als waar die links staan moet zetten. Dus het formulier en alle javascript die daar bij hoort. Dus NIET in aanpas-modal.php
Als ik dat doe krijg ik op mijn background een lichte zwarte filter (bepaalde opacity) te zien met de modal op de achtergrond waar ik niet kan op klikken. Ik heb dat maanden geleden ook gehad vandaar had ik een aparte file gemaakt had genaamd 'aanpas-modal' en de data via de javascript daarnaartoe gestuurd had.
Wel, wat krijgen we nu? Ik eigenwijs? Ik heb gedaan wat je hebt gevraagd maar het resultaat heb ik hierboven beschreven... En ik herinner mij dit probleem van een aantal maanden geleden ook. Ik denk dat het aan de bootstrap modal ligt dat dat niet lukt.
Ik zal eens even toelichten wat ik heb gedaan:
Pagina met link:
<a href="#" data-id="<?php echo $hist_id2; ?>" class="showme2 btn btn-orange btn-single btn-xs">Aanpassen</a>
<script type="text/javascript">
<script>
$(".showme2").on("click", function(e) {
e.preventDefault();
var uid = $(this).data("id");
$.ajax({
url: 'aanpas-modal.php',
type: 'get',
dataType: 'html',
data: {id: uid}
})
.done(function(html) {
$("#uid").val(uid);
// Als deze regel hieronder er staat komt de popup niet te voorschijn.
$("#editor10").ckEditor().editor.setData(html);
// Moet er bij om de modal juist te laten verschijnen
$('#modal-7 .modal-body').html(html);
$('#modal-7').modal('show');
})
.fail(function() {
alert('AJAX heeft verloren');
});
});
</script>
<script type="text/javascript">
jQuery(function($){
$('#editor10').ckeditor();
});
</script>
<!-- Start modal -->
<div class="modal fade" id="modal-7">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Historiek item aanpassen</h4>
</div>
<div class="modal-body">
<?php
$id = $_GET['id'];
echo 'ID: '.$id;
require ('config.php');
$conn = mysql_connect($host,$user,$pass) or die (mysql_error());
mysql_select_db($dbnm) or die (mysql_error());
$sql = "SELECT * FROM historiek WHERE id = '". $id ."'";
$res = mysql_query($sql) or die (mysql_error());
while($row = mysql_fetch_assoc($res))
{
?>
<div class="row">
<form role="form" method="post" id="historiek">
<div class="form-group">
<textarea class="form-control ckeditor" id="editor10" name="historiek" rows="10"><?php echo $row['historiek']; ?></textarea>
</div>
<div class="form-group">
<button id="Submit1234" type="submit" name="Submit" class="btn btn-info">Wijzigen</button>
</div>
<input type="hidden" name="id" id="uid" value="<?php echo $id; ?>">
</form>
</div>
</div>
<?php } ?>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Als alles op de pagina staat waar de links staan zit er niks meer in aanpas-modal.php. Dus de inhoud van deze file zal waarschijnlijk de inhoud worden van de aanpas-modal-process.php file vermoed ik?
Dit helpt inderdaad om regel 18 goed te krijgen want het is met kleine e. Wat moet er nu op de aanpas-modal.php staan aangezien ik alles daaruit heb gekopiëerd naar de pagina met de links.
Die hoofdletter komt van mij (macht der gewoonte), maar het moet dus zonder de hoofdletter.
@Brecht
Je hebt een pagina met een formulier in een popup, in dat formulier staan een textarea en een hidden input.
Als er op een link geklikt wordt wil je die popup tonen maar dan met gegevens van die link.
Met mijn code wordt de hidden input gevuld met de data-id van de link en aan de hand van die id wordt de inhoud voor de editor opgehaald via aanpas-modal.php. Dus wat daarin moet komen moet daarvan komen, maar alleen die inhoud niets anders.
Heel dat php gedeelte heb je dus niet in de pagina met de links nodig, bij het laden van de pagina is de textarea leeg en de value van de input ook.
Daarnaast moet je ook je javascript wat beter organiseren, in een apart bestand of onderaan je html voor </body> en in één jQuery(function(){}) block.
Vergeet niet om ook het posten van het formulier daarin te regelen.
Tot slot, waarom heb je 2 verschillende klassenamen (showme en showme2) voor die links?
<?php
$id = $_GET['id'];
echo 'ID: '.$id;
require ('config.php');
$conn = mysql_connect($host,$user,$pass) or die (mysql_error());
mysql_select_db($dbnm) or die (mysql_error());
$sql = "SELECT * FROM historiek WHERE id = '". $id ."'";
$res = mysql_query($sql) or die (mysql_error());
while($row = mysql_fetch_assoc($res))
{
echo $row['historiek'];
}
?>
De ID is mooi meegegeven aan de aanpas-modal page. Tot hier zitten we goed.
Nu nog het gedeelte om de data op te slaan in de database.
In de modal heb ik daarvoor een stukje javascript gezet, maar er past niks aan in de db.
In de pagina aanpas-modal-process.php staat het volgende:
<?php
if (isset($_POST['historiek'])) {
$id = $_POST['id'];
$historiek = $_POST['historiek'];
echo $id;
echo '<br> - '.$historiek;
require ('config.php');
$conn = mysql_connect($host,$user,$pass) or die (mysql_error());
mysql_select_db($dbnm) or die (mysql_error());
$sql = "UPDATE historiek SET historiek = '$historiek' WHERE id = '$id'";
$res = mysql_query($sql) or die (mysql_error());
}
?>
[size=xsmall]Toevoeging op 25/01/2015 16:46:04:[/size]
showme en showme2 mogen eigenlijk naar dezelfde aanpas-modal pagina dus kan ik die beter samen zetten:
$(".showme, .showme2").on("click", function(e) {
[size=xsmall]Toevoeging op 25/01/2015 16:50:40:[/size]
En alle ajax/jquery code moet ik ook nog allemaal samen zetten in 1 blok onderaan de pagina. Doe ik als alles werkt ineens.
Als je zeker weet dat aanpas-modal-process.php wordt aangeroepen, maar er wordt vervolgens niets aangepast in je database, dan betekent dit dat er ergens iets mis gaat in dit script.
Heb je de volgende dingen gecontroleerd:
- weet je ZEKER dat aanpas-modal-process.php wordt aangeroepen (zie je dit in je network-tab van je browser debug-tool voorbij komen)?
- staat er iets in een errorlog die aangeeft dat er ergens iets misgaat in dit script?
- heb je de waarde van $('#historiek').serialize() al eens gedumpt naar de console? Als $_POST['historiek'] niet bestaat zal er namelijk inderdaad niets opgeslagen worden
- is #historiek UNIEK binnen je pagina?
Met die dingen te controleren heb ik volgende dingen vastgesteld:
- ik weet niet zeker of aanpas-modal-process.php wordt aangeroepen, nee. In de console kan ik dat wel zien, maar als ik vaste waarden voor $id en $historiek op die pagina zet ipv hetgeen er nu staat past hij dit ook niet aan. Dus gebeurd daar wel iets eigenaardig.
- in errorlog staat niks fout op het eerste zicht.
- #historiek is uniek op die pagina want heb het aangepast naar #historiek123 en in het form (id) natuurlijk ook.
Kan het javascript niet op een andere manier dingen doorposten naar aanpas-modal-process.php?
[size=xsmall]Toevoeging op 25/01/2015 19:21:59:[/size]
Ik heb het gevonden. Ik heb de javascript om de database te updaten uit de form gehaald (moest daar niet staan, kon evengoed onderaan de pagina samengezet worden met de andere javascript in één blok (Thanks Ger voor de tip)). Het script zelf heb ik werkende gekregen. Ik heb ook toastr toegevoegd (de popup die verschijnt als het gelukt is).
Zie hieronder de nieuwe versie:
<script>
$(function () {
$('#historiek123').on('submit', function (e) {
e.preventDefault();
$.ajax({
type: 'post',
url: 'aanpas-modal-process.php',
data: $('#historiek123').serialize(),
success: function () {
var opts = {
"closeButton": true,
"debug": false,
"positionClass": "toast-top-full-width",
"onclick": null,
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
};
toastr.success("Aanpassingen in database zijn geslaagd. U kan nu de popup sluiten.", null, opts);
}
});
});
});
</script>
Toelichting voor anderen die ook op zoek zijn naar iets dergelijks:
De pagina aanpas-modal.php en aanpas-modal-process.php zijn zo goed als ongewijzigd gebleven. Enkel de javascript hierboven moet op de pagina van de links staan onderaan ter vervanging van het eerder geposte javascript die in de modal staat.
Bedank aan iedereen die mij hiermee verder geholpen heeft.
