Div weergeven
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function SubmitForm() {
var content = $("#content").val();
var naam = $("#naam").val();
$.post("shared/saveItem.php", { content: content, naam: naam },
function(data) {
alert("Data Loaded: " + data);
});
}
</script>
<script>
function SubmitForm() {
var content = $("#content").val();
var naam = $("#naam").val();
$.post("shared/saveItem.php", { content: content, naam: naam },
function(data) {
alert("Data Loaded: " + data);
});
}
</script>
En ik wil in plaats van de alert de volgende div weergeven:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<div id="opslaan">
<div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true"></button>
<h4> <i class="icon fa fa-check"></i>Opgeslagen!</h4>
Het onderwerp is succesvol opgeslagen.
</div>
</div>
<div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true"></button>
<h4> <i class="icon fa fa-check"></i>Opgeslagen!</h4>
Het onderwerp is succesvol opgeslagen.
</div>
</div>
Hoe krijg ik dat voor elkaar?
Code (php)
1
alert("Data Loaded: " + data);
doe je:
Code (php)
1
$( "#opslaan" ).show();
Heb ik iets fout gedaan?
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
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function SubmitForm() {
var content = $("#content").val();
var naam = $("#naam").val();
$.post("shared/saveItem.php", { content: content, naam: naam },
function(data) {
$( "#opslaan" ).show();
});
}
</script>
<div id="opslaan">
<div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true"></button>
<h4> <i class="icon fa fa-check"></i>Opgeslagen!</h4>
Het onderwerp is succesvol opgeslagen.
</div>
</div>
<script>
function SubmitForm() {
var content = $("#content").val();
var naam = $("#naam").val();
$.post("shared/saveItem.php", { content: content, naam: naam },
function(data) {
$( "#opslaan" ).show();
});
}
</script>
<div id="opslaan">
<div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true"></button>
<h4> <i class="icon fa fa-check"></i>Opgeslagen!</h4>
Het onderwerp is succesvol opgeslagen.
</div>
</div>
Gewijzigd op 03/02/2016 22:06:27 door - Ariën -
- Ariën - op 03/02/2016 22:05:52:
Is dit je hele code? Want je start jQuery niet op door te controleren of de pagina geladen is.
@TS:
Wordt de data wel opgeslagen?
Gewijzigd op 03/02/2016 22:26:43 door Randy vsf
De volgende code werkt namelijk wel:
Code (php)
1
2
3
4
5
2
3
4
5
<script>
setTimeout(function(){
document.getElementById('opslaan').innerHTML = '';
}, 3000);
</script>
setTimeout(function(){
document.getElementById('opslaan').innerHTML = '';
}, 3000);
</script>
Kan ik dat op een of andere manier combineren met het volgende?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function SubmitForm() {
var content = $("#content").val();
var naam = $("#naam").val();
$.post("shared/saveItem.php", { content: content, naam: naam },
function(data) {
$( "#opslaan" ).show();
});
}
</script>
<script>
function SubmitForm() {
var content = $("#content").val();
var naam = $("#naam").val();
$.post("shared/saveItem.php", { content: content, naam: naam },
function(data) {
$( "#opslaan" ).show();
});
}
</script>
Je kunt beter een onsubmit listener aan een formulier hangen...
Code (php)
1
<p><input type="button" onclick="SubmitForm();" name="save" class="btn btn-primary" value="OPSLAAN"></p>
Hoe moet ik dat veranderen dan, Thomas? Ik snap niet precies wat je bedoelt...
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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>show dialog after post</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<form id="theForm">
<p><label for="naam">naam</label><input type="text" name="naam" id="naam"></p>
<p><label for="content">content</label><textarea name="content" id="content"></textarea></p>
<div>
<button type="submit">verzenden</button>
</div>
</form>
<div id="postResult" style="display: none;"></div>
<script type="text/javascript">
//<![CDATA[
// als je document klaar is met laden...
$().ready(function() {
// als het formulier #theForm wordt gesubmit...
$('form#theForm').submit(function(e) {
// vang het submit event af, jQuery/AJAX handelt dit immers af
e.preventDefault(); // het default gedrag is dat het formulier gePOST wordt, en dat willen we niet
$('#postResult').hide();
$.post(
'post.php', // het script waar je naartoe POST
$('#theForm').serialize(), // verzamel alle form data in 1x (naam, content)
function(ok) { // callback functie die wordt uitgevoerd na terugontvangen (JSON) resultaat
if (ok) {
$('#postResult').css('background-color', '#ccffcc').text('Success! :)');
} else {
// doe ook iets voor als het misgaat...
$('#postResult').css('background-color', '#ffcccc').text('Fail! :(');
}
$('#postResult').show();
}, // einde callback functie
'json' // geef een "hint" over het type van de terug te ontvangen data
);
});
});
//]]>
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>show dialog after post</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<form id="theForm">
<p><label for="naam">naam</label><input type="text" name="naam" id="naam"></p>
<p><label for="content">content</label><textarea name="content" id="content"></textarea></p>
<div>
<button type="submit">verzenden</button>
</div>
</form>
<div id="postResult" style="display: none;"></div>
<script type="text/javascript">
//<![CDATA[
// als je document klaar is met laden...
$().ready(function() {
// als het formulier #theForm wordt gesubmit...
$('form#theForm').submit(function(e) {
// vang het submit event af, jQuery/AJAX handelt dit immers af
e.preventDefault(); // het default gedrag is dat het formulier gePOST wordt, en dat willen we niet
$('#postResult').hide();
$.post(
'post.php', // het script waar je naartoe POST
$('#theForm').serialize(), // verzamel alle form data in 1x (naam, content)
function(ok) { // callback functie die wordt uitgevoerd na terugontvangen (JSON) resultaat
if (ok) {
$('#postResult').css('background-color', '#ccffcc').text('Success! :)');
} else {
// doe ook iets voor als het misgaat...
$('#postResult').css('background-color', '#ffcccc').text('Fail! :(');
}
$('#postResult').show();
}, // einde callback functie
'json' // geef een "hint" over het type van de terug te ontvangen data
);
});
});
//]]>
</script>
</body>
</html>
post.php (het script dat de AJAX POST verwerkt):
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<?php
// Declareer Content-Type en character encoding van het resultaat.
header('Content-Type: application/json; charset=UTF-8');
$success = false;
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
// voer controles uit, verwerk formulier, wat mogelijk resulteert in
// ...
$success = true;
}
// Of wat voor informatie je allemaal terug wilt sturen, voor nu enkel een boolean (true of false)
echo json_encode($success);
?>
// Declareer Content-Type en character encoding van het resultaat.
header('Content-Type: application/json; charset=UTF-8');
$success = false;
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
// voer controles uit, verwerk formulier, wat mogelijk resulteert in
// ...
$success = true;
}
// Of wat voor informatie je allemaal terug wilt sturen, voor nu enkel een boolean (true of false)
echo json_encode($success);
?>
Gewijzigd op 07/02/2016 23:19:22 door Thomas van den Heuvel
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function SubmitForm() {
var content = $("#content").val();
var naam = $("#naam").val();
$.post("shared/saveItem.php", { content: content, naam: naam },
function(data) {
$( "#opslaan" ).show();
});
}
</script>
<script>
function SubmitForm() {
var content = $("#content").val();
var naam = $("#naam").val();
$.post("shared/saveItem.php", { content: content, naam: naam },
function(data) {
$( "#opslaan" ).show();
});
}
</script>
Moet ik het dan toch helemaal ombouwen? Want in de <div id="opslaan"> staat alleen maar de melding: de gegevens zijn opgeslagen.
Dus ik hoef niks terug te roepen van een andere save-pagina.
Of begrijp ik je uitleg verkeerd?
Het punt is dus alleen dat de melding niet zichtbaar wordt. Het formulier saved wel keurig....
Een reactie geleden plaats ik de remedie.
Ik zou zeggen, lees beide nog eens aandachtig door.
Ook lijkt het mij handig dat je save-pagina expliciet terugcommuniceert of alles goed is gegaan, anders krijg je misschien ten onrechte een boodschap te zien dat dit het geval zou zijn. Omdat alles op de achtergrond gebeurt lijkt het mij Nogal Belangrijk dat je precies weet wat de status is.
Wat ik alleen nog voor elkaar moet krijgen is dat m'n post.php-pagina een ID moet meekrijgen, zodat het formulier onder de juiste regel wordt opgeslagen.
Op de formulierpagina krijg ik dat ID via een GET, dus ID = $_GET['id'].
Hoe post ik dat ID door naar de post-pagina?
shared/saveItem.php?id=X
:/
Gewijzigd op 11/02/2016 22:07:36 door Thomas van den Heuvel
Ergens loopt m'n formulier toch nog vast...
Hoe kan ik een melding terug sturen naar de formulierpagina? Zodat ik zie wat er gebeurt?
Maar achter succes: komt dan niks te staan. Ik zal toch ergens iets moeten terugsturen?
De "respons" van het PHP script vang je op met de callback functie in jquery - begin je het nu te vatten?
Gewijzigd op 12/02/2016 00:41:38 door Thomas van den Heuvel
Laatste vraag: ik wil graag de melding in m'n eigen stijl weergeven, als volgt:
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<div id="postResult" style="display: none;">
<div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true"></button>
<h4> <i class="icon fa fa-check"></i>Opgeslagen!</h4>
Het onderwerp is succesvol opgeslagen.
</div>
</div>
<div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true"></button>
<h4> <i class="icon fa fa-check"></i>Opgeslagen!</h4>
Het onderwerp is succesvol opgeslagen.
</div>
</div>
Nu heb ik al de css weggehaald, maar er komt nu alleen tekst te staan, ipv mijn opmaak:
Code (php)
1
$('#postResult').text('Success! :)');
Het zal vast heel simpel zijn, maar hoe zorg ik ervoor dat ik de melding in m'n eigen stijl te zien krijg?