Javascript probleem
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
<a href="#" data-id="<?php echo $hist_id; ?>" class="showme btn btn-orange btn-single btn-xs">Aanpassen</a>
<script type="text/javascript">
jQuery(function($){
$('a.showme').click(function(ev){
ev.preventDefault();
var uid = $(this).data('id');
$.get('aanpas-modal.php?id=' + uid, function(html){
$('#modal-7 .modal-body').html(html);
$('#modal-7').modal('show');
});
});
});
</script>
<script type="text/javascript">
jQuery(function($){
$('a.showme').click(function(ev){
ev.preventDefault();
var uid = $(this).data('id');
$.get('aanpas-modal.php?id=' + uid, function(html){
$('#modal-7 .modal-body').html(html);
$('#modal-7').modal('show');
});
});
});
</script>
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:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
<a href="#" data-id="<?php echo $hist_id2; ?>" class="showme2 btn btn-orange btn-single btn-xs">Aanpassen</a>
<script type="text/javascript">
jQuery(function($){
$('a.showme2').click(function(ev){
ev.preventDefault();
var uid = $(this).data('id');
$.get('aanpas-modal.php?id=' + uid, function(html){
$('#modal-7 .modal-body').html(html);
$('#modal-7').modal('show');
});
});
});
</script>
<script type="text/javascript">
jQuery(function($){
$('a.showme2').click(function(ev){
ev.preventDefault();
var uid = $(this).data('id');
$.get('aanpas-modal.php?id=' + uid, function(html){
$('#modal-7 .modal-body').html(html);
$('#modal-7').modal('show');
});
});
});
</script>
Die popup opent ook maar hij past mijn pagina niet aan. Bij de eerste wel. Voor beide gebruik ik aanpas-modal.php:
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
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
<?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 } ?>
$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:
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
<?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());
}
?>
//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());
}
?>
Dit topic is ook gepost op http://www.pfz.nl/forum/topic/11071-javascript-probleem/
Gewijzigd op 16/01/2015 11:01:51 door Brecht S
Want een event zoals .click() kun je pas aan een html-element koppelen als die bestaat. Anders gezegd: Als je later dynamisch elementen toevoegt dan moet je ook dynamisch de events toevoegen (en pas nadat je het element hebt toegevoegd).
Verder heb je per pagina in principe maar één .ready() functie nodig. Deze wordt éénmalig automatisch aangeroepen als de pagina geladen is.
Toevoeging op 23/01/2015 12:52:53:
http://codepen.io/anon/pen/KwqgNj
helpt dat nog iets?
2x 8 regels code met als enige verschil een nummertje kan veel eenvoudiger.
Je hebt in de response van de AJAX-request javascript staan, maar dat staat daar niets te doen want dat wordt gezien als tekst. Waarschijnlijk staat er ergens al een gedeelte van dat script al in de bron bij het laden van de pagina, anders kan het de eerste keer ook niet werken.
Het simpelste is om de modal, en het benodigde JS, alvast in de html te plaatsen, en de inhoud van de benodigde velden
dynamisch te wijzigen. Bv
Code (js)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(".showMe").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);
$("#editor10").ckEditor().editor.setData(html);
$('#modal-7').modal('show');
})
.fail(function() {
alert('AJAX heeft verloren');
});
});
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);
$("#editor10").ckEditor().editor.setData(html);
$('#modal-7').modal('show');
})
.fail(function() {
alert('AJAX heeft verloren');
});
});
Toevoeging op 23/01/2015 13:26:25:
Vergeet niet om uid als id mee te geven aan de hidden input
Gewijzigd op 23/01/2015 21:59:19 door Ger van Steenderen
@Frank: De 2 links werken onafhankelijk van elkaar. Als ik die samenzet in 1 javascript past hij de gegevens ook niet aan in de database. Als ik ze in 2 links zet zoals nu, werkt de eerste link met aanpassen in db wel (dus zoals het moet zijn) en bij de 2de link werkt enkel de verschijning van de popup wel maar past niks aan in de db.
Dus ik denk dat er ergens iets is tussen de aanpas-modal.php en de aanpas_modal-proces.php Zou dat kunnen? Maar waarom werkt het dan wel bij de eerste link?
Toevoeging op 23/01/2015 14:19:21:
@Ger: er staat een javascipt op de aanpas-modal.php die de aanpas-modal-proces.php oproept en zo de gegevens in de database kan aanpassen. Wat jij wil zeggen is dat ik het script bij de link moet aanpassen met jouw versie en de javascript op de aanpas-modal.php gewoon mag laten staan? Of kan daar ook nog iets aan veranderen?
Gewijzigd op 24/01/2015 17:41:11 door Brecht S
Quote:
Je hebt in de response van de AJAX-request javascript staan, maar dat staat daar niets te doen want dat wordt gezien als tekst.
Met andere woorden het wordt niet uitgevoerd, en is dus volslagen nutteloos.
Het enige wat varieert in aanpas-modal.php is de inhoud van de textarea en van de hidden input.
Die laatste kan je direct vanuit javascript wijzigen. Ik ga ervan uit dat je ze alle vijf op rijtje hebt, en als ze niet in ploegendienst werken, moet het niet zo moeilijk zijn om te kunnen bepalen wat er nog aanpas-modal.php moet staan.
Al het andere neem je gewoon mee in de html/javascript van de pagina die wordt aangeroepen.
Code (js)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
.done(function(html){
// uid heb je eerder verkregen uit het data-id attribuut
// en dit je ze in de value van de hidden
$("#uid").val(uid);
// zet de gegevens verkregen uit de response in de
// in de inhoud van de editor (NIET de textarea)
$("#editor10").ckEditor().editor.setData(html);
// toon de popup
$('#modal-7').modal('show');
})
// uid heb je eerder verkregen uit het data-id attribuut
// en dit je ze in de value van de hidden
$("#uid").val(uid);
// zet de gegevens verkregen uit de response in de
// in de inhoud van de editor (NIET de textarea)
$("#editor10").ckEditor().editor.setData(html);
// toon de popup
$('#modal-7').modal('show');
})
Wat ik niet begrijp is dat je ckEditor gebruikt en bij de post door striptags heen haalt.
Die striptags hoeven er niet te staan bij de post voor de ckeditor.
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<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>
$(".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>
De modal verschijnt als ik die ene regel weglaat in de javascript (zie comments). Maar in de aanpas-modal.php moet ik wel de code hieronder laten staan anders krijg ik geen ckeditor te zien maar enkel een textarea:
Code (php)
1
2
3
4
5
2
3
4
5
<script type="text/javascript">
jQuery(function($){
$('#editor10').ckeditor();
});
</script>
jQuery(function($){
$('#editor10').ckeditor();
});
</script>
Maar met dit alleen gebeurd er ook geen aanpassing van de data in de database.
Gewijzigd op 24/01/2015 15:32:46 door Brecht S
Gewijzigd op 24/01/2015 16:14:08 door Ger van Steenderen
Gewijzigd op 24/01/2015 17:16:19 door Ger van Steenderen
Ik zal eens even toelichten wat ik heb gedaan:
Pagina met link:
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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<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>
<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?
$("#editor10").ckEditor() (regel 18, hoofdletter)
$('#editor10').ckeditor() (regel 31, kleine letter)
JavaScript is zeer HoOfDlEtTeRgEvOeLiG.
Heb je alle caching uit staan?
Heb je geprobeerd e.e.a. te debuggen met console.log() om de fout(en) verder te isoleren?
Praat je met de goede scripts?
En praat je op de juiste manier met deze scripts?
Zijn al de scripts bijgewerkt en opgeslagen?
(om maar wat derps uit te sluiten :))
Gewijzigd op 24/01/2015 17:59:47 door Thomas van den Heuvel
Gewijzigd op 24/01/2015 18:34:19 door Brecht S
Thomas van den Heuvel op 24/01/2015 17:58:57:
Mijn 2c:
$("#editor10").ckEditor() (regel 18, hoofdletter)
$('#editor10').ckeditor() (regel 31, kleine letter)
$("#editor10").ckEditor() (regel 18, hoofdletter)
$('#editor10').ckeditor() (regel 31, kleine letter)
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?
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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<a href="#" data-id="<?php echo $hist_id23; ?>" class="showme2 btn btn-orange btn-single btn-xs">Aanpassen</a>
<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);
$("#editor10").ckeditor().editor.setData(html);
$('#modal-8').modal('show');
})
.fail(function() {
alert('AJAX heeft verloren');
});
});
</script>
<div class="modal fade" id="modal-8">
<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">
<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"></textarea>
</div>
<div class="form-group">
<input type="hidden" name="id" id="uid" value="<?php echo $_GET['id']; ?>">
<button id="Submit1234" type="submit" name="Submit" class="btn btn-info">Wijzigen</button>
</div>
</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>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<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);
$("#editor10").ckeditor().editor.setData(html);
$('#modal-8').modal('show');
})
.fail(function() {
alert('AJAX heeft verloren');
});
});
</script>
<div class="modal fade" id="modal-8">
<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">
<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"></textarea>
</div>
<div class="form-group">
<input type="hidden" name="id" id="uid" value="<?php echo $_GET['id']; ?>">
<button id="Submit1234" type="submit" name="Submit" class="btn btn-info">Wijzigen</button>
</div>
</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>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
En hieronder de code voor de aanpas-modal.php:
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
<?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'];
}
?>
$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:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?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());
}
?>
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());
}
?>
Toevoeging op 25/01/2015 16:46:04:
showme en showme2 mogen eigenlijk naar dezelfde aanpas-modal pagina dus kan ik die beter samen zetten:
Code (php)
1
$(".showme, .showme2").on("click", function(e) {
Toevoeging op 25/01/2015 16:50:40:
En alle ajax/jquery code moet ik ook nog allemaal samen zetten in 1 blok onderaan de pagina. Doe ik als alles werkt ineens.
Gewijzigd op 25/01/2015 16:48:38 door Brecht S
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?
Gewijzigd op 25/01/2015 17:12:20 door Thomas van den Heuvel
- 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?
Toevoeging op 25/01/2015 19:21:59:
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:
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
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
<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>
$(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.
Gewijzigd op 25/01/2015 19:25:53 door Brecht S