Tijden veranderen
Ajax message op result pagina
Ik heb de volgende situatie:
op file_1.php heb ik een lijst (ul / li) waarbij ul een id bevat (#lijst)
Deze lijst bestaat uit menubuttons die ik kan verslepen om de positie van het menu te wijzigen.
Dit werkt!!
Maar wat ik wil is dat wanneer een menu-item succesvol is gewijzigd, dat de gebruiker een message krijgt (geen pop/alert message) dat het gelukt is. Zoiets als: De menustructuur is succesvol aangepast!
De update query voor de menu structuur wordt uitgevoerd op file_2.php
Op file_2.php echo ik vervolgens de json_encode() functie met daarin het bericht of het opslaan gelukt is of niet.
In het bestand functions.js moet dit vervolgens worden omgetoverd naar een html bericht in file_1.php
Ik heb daar een <div id='result'></div>
Hoe kan ik dit doen? Ik heb al veel javascript/json/ajax pagina bekeken, maar ik heb daar nog te weinig ervaring in.
$("#lijst").sortable({
update : function () {
serial = $('#lijst').sortable('serialize');
$.ajax({
url: "file_2.php",
type: "POST",
data: serial,
error: function(){
alert("theres an error with AJAX");
},
});
}
});
}
);
De sortable() function wordt overigens in een ander extern .js gemaakt.
Alles werkt dus eigenlijk zoals het moet. Echter wil ik een melding weergeven dat het wijzigen is gelukt. En dan geen pop-up alert of iets dergelijks, maar gewoon een text melding in de DIV (#result)
Gewijzigd op 11/08/2013 23:22:45 door Johnny Cash
dan zie je dat er naast de error() callback, ook een success callback is. Die wordt aangeroepen als de ajax call is voltooid en goed is gegaan. Daarin zal je dus je bericht moeten verwerken:
Code (php)
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
$(document).ready( function() {
$("#lijst").sortable({
update : function () {
serial = $('#sortme').sortable('serialize');
$.ajax({
url: "file_2.php",
type: "POST",
data: serial,
error: function(){
alert("theres an error with AJAX");
},
success: function(data){
alert('call completed');
}
});
}
});
});
$("#lijst").sortable({
update : function () {
serial = $('#sortme').sortable('serialize');
$.ajax({
url: "file_2.php",
type: "POST",
data: serial,
error: function(){
alert("theres an error with AJAX");
},
success: function(data){
alert('call completed');
}
});
}
});
});
In data komt de output van de server terecht. Ik kan niet zien hoe je het verstuurt, dus ook niet hoe je het hier nu moet gebruiken. Als je daar hulp bij nodig hebt moet je even de precieze echo die je doet in php laten zien.
$updatemsg = "Updaten is gelukt...";
Deze echo wordt uitgevoerd wanneer de Update query is gelukt. Als het om welke reden dan ook niet gelukt is komt deze melding:
$updatemsg = "Updaten is NIET gelukt!";
Dus afhankelijk van het resultaat wordt het volgende via json_encode() teruggestuurd:
echo json_encode(array('melding' => $updatemsg));
Code (php)
1
2
3
2
3
success: function(data){
alert(data.melding);
}
alert(data.melding);
}
Ik wil een nette text/html melding in een <div> met id: result
Code (php)
1
$('#result').html(data.melding);
En eigenlijk zou ik die melding dan ook nog automatisch moet laten uit-faden?
Toevoeging op 12/08/2013 00:57:01:
De fade functie heb ik nu met:
$('body').append('<div id="result"></div>');
$('#result').fadeIn(300);
$('#result').fadeOut(5000 , function(){ });
Maar alleen de juiste melding via data.melding heb ik nog niet.
Voor de rest werkt het zoals gewenst. Bedankt Erwin H
En dan div.html(data)
Het zou moeten kunnen met data.melding maar deze geeft bij mij niets terug.
---------------------------------------------------------
Op file_2.php (de sql verwerking) heb ik in een if structuur:
IF
$updatemsg = "De wijzigingen zijn opgeslagen";
ELSE
$updatemsg = "De wijzigingen zijn NIET opgeslagen";
echo json_encode(array('melding' => $updatemsg));
---------------------------------------------------------
In het .js bestand heb ik nu:
$(document).ready( function() {
$("#sortme").sortable({
update : function () {
serial = $('#sortme').sortable('serialize');
$.ajax({
url: "file_2.php",
type: "POST",
data: serial,
error: function(data){
$('#falseresult').html('De wijziging kon niet worden opgeslagen!!');
},
success: function(data){
$('#trueresult').html('De wijzigingen zijn succesvol opgeslagen!');
}
});
$('body').append('<div id="falseresult"></div>');
$('#falseresult').fadeIn(300);
$('#falseresult').fadeOut(5000 , function(){ });
$('body').append('<div id="trueresult"></div>');
$('#trueresult').fadeIn(300);
$('#trueresult').fadeOut(5000 , function(){ });
}
});
}
);
---------------------------------------------------------
Die twee meldingen die er nu in staan moet dus worden vervangen met wat JSON doorstuurt vanaf de file_2.php
En voeg anders dataType: 'json' toe aan $.ajax
Johnny Cash op 12/08/2013 10:48:05:
Dat klopt. Maar als het mogelijk is om, afhankelijk van de Update query, een bericht te sturen met het resultaat wordt de berichtgeving concreter.
Dat kan nog steeds, ook als je de methode van Ger gebruikt (die overigens wel de meest handige is voor deze situatie).
In plaats van echo json_encode(array('melding' => $updatemsg)); doe je gewoon echo $updatemsg; Daarmee heb je nog steeds de mogelijkheid om een aparte message te sturen afhankelijk van de query en de uitkomsten. Vervolgens in javascript gewoon:
Code (php)
1
$('#result').html(data);
Ik heb m'n file_2.php al nagelopen en die klopt helemaal. Het zit hem dus echt in het stukje javascript waar de json niet wordt gevalideerd.
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
$.ajax({
url: 'file_2.php',
type: 'POST',
dataType: 'JSON',
...
..
.
});
url: 'file_2.php',
type: 'POST',
dataType: 'JSON',
...
..
.
});
Gewijzigd op 12/08/2013 11:07:35 door Machiel K
Johnny Cash op 12/08/2013 11:04:55:
Dat had ik al geprobeerd, maar dan wordt steeds de error: melding weergegeven terwijl alles wel correct wordt opgeslagen.
Ik heb m'n file_2.php al nagelopen en die klopt helemaal. Het zit hem dus echt in het stukje javascript waar de json niet wordt gevalideerd.
Ik heb m'n file_2.php al nagelopen en die klopt helemaal. Het zit hem dus echt in het stukje javascript waar de json niet wordt gevalideerd.
Sorry, maar dat geloof ik niet. Dat probleem kan niet aan javascript liggen, want javascript toont alleen wat er van de server terugkomt. Als je dus de verkeerde melding ziet, dan komt dat omdat je vanaf de server de verkeerde melding terugkrijgt.
Maar (als ik het goed lees) kom je in de error functie van $.ajax terecht.
En dat zou dan betekenen dat er een (fatale) fout in je php script zit.
echo json_encode(array('melding' => $updatemsg));
$updatemsg is dan OK of NIET OK (if constructie)
Het javascript bestand:
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
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
$(document).ready( function() {
$("#sortme").sortable({
update : function () {
serial = $('#sortme').sortable('serialize');
$.ajax({
url: "../module_navigatie/sort_menu.php",
type: "POST",
dataType: 'JSON',
data: serial,
error: function(data){
$('#falseresult').html('De wijziging kon niet worden opgeslagen!!');
},
success: function(data){
$('#trueresult').html('De wijzigingen zijn succesvol opgeslagen!');
}
});
// Add the mask to body
$('body').append('<div id="falseresult"></div>');
$('#falseresult').fadeIn(300);
$('#falseresult').fadeOut(5000 , function(){ });
$('body').append('<div id="trueresult"></div>');
$('#trueresult').fadeIn(300);
$('#trueresult').fadeOut(5000 , function(){ });
}
});
}
);
$("#sortme").sortable({
update : function () {
serial = $('#sortme').sortable('serialize');
$.ajax({
url: "../module_navigatie/sort_menu.php",
type: "POST",
dataType: 'JSON',
data: serial,
error: function(data){
$('#falseresult').html('De wijziging kon niet worden opgeslagen!!');
},
success: function(data){
$('#trueresult').html('De wijzigingen zijn succesvol opgeslagen!');
}
});
// Add the mask to body
$('body').append('<div id="falseresult"></div>');
$('#falseresult').fadeIn(300);
$('#falseresult').fadeOut(5000 , function(){ });
$('body').append('<div id="trueresult"></div>');
$('#trueresult').fadeIn(300);
$('#trueresult').fadeOut(5000 , function(){ });
}
});
}
);
Het PHP script werkt volledig goed. Alles wordt via SQL geupdate zoals bedoelt.
Het PHP script:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$menu = $_POST['menu'];
for ($i = 0; $i < count($menu); $i++) {
$sql = "UPDATE tbl_menu SET position=" . $i . " WHERE menu_id='" . $menu[$i] . "'";
$resultaat = mysql_query($sql) or die ("Query mislukt: " . mysql_error());
if($resultaat) {
$updatemsg = "OK";
}else{
$updatemsg = "NOT OK";
}
echo json_encode(array('melding' => $updatemsg));
}
for ($i = 0; $i < count($menu); $i++) {
$sql = "UPDATE tbl_menu SET position=" . $i . " WHERE menu_id='" . $menu[$i] . "'";
$resultaat = mysql_query($sql) or die ("Query mislukt: " . mysql_error());
if($resultaat) {
$updatemsg = "OK";
}else{
$updatemsg = "NOT OK";
}
echo json_encode(array('melding' => $updatemsg));
}
Je mag die json_encode niet binnenin de for-lus zetten.
Wat je moet doen, is zo-iets:
Code (php)
----
Ik volg beide heren boven mij (EDIT: toen stond de laatste post hier nog niet).
Als je in error terecht komt, is het waarschijnlijk omdat file_2.php geen geldige JSON levert.
Merk op: als je met Ajax met JSON werkt, mag de respons van file_2.php niets anders genereren dan die JSON.
----
Ik denk dat je ongeveer dit probeert te maken
index.htm
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>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
var ul = $( "#sortme" );
var items = ul.find('li');
ul.sortable({
update: function() {
var order = new Array();
$( "#sortme li" ).each(function(index) {
order.push($(this).data('index'));
});
$.ajax({
url: "file_2.php",
type: "POST",
dataType: 'json',
data: {order: order},
error: function(data) {
$('#falseresult').html('De wijziging kon niet worden opgeslagen!!');
},
success: function(data) {
$('#trueresult').html(data.message + '<br>' + data.order);
}
});
}
});
});
</script>
</head>
<body>
<ul id="sortme">
<li data-index="0">item 0</li>
<li data-index="1">item 1</li>
<li data-index="2">item 2</li>
<li data-index="3">item 3</li>
<li data-index="4">item 4</li>
<li data-index="5">item 5</li>
<li data-index="6">item 6</li>
</ul>
<div id="trueresult"></div>
</body>
</html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
var ul = $( "#sortme" );
var items = ul.find('li');
ul.sortable({
update: function() {
var order = new Array();
$( "#sortme li" ).each(function(index) {
order.push($(this).data('index'));
});
$.ajax({
url: "file_2.php",
type: "POST",
dataType: 'json',
data: {order: order},
error: function(data) {
$('#falseresult').html('De wijziging kon niet worden opgeslagen!!');
},
success: function(data) {
$('#trueresult').html(data.message + '<br>' + data.order);
}
});
}
});
});
</script>
</head>
<body>
<ul id="sortme">
<li data-index="0">item 0</li>
<li data-index="1">item 1</li>
<li data-index="2">item 2</li>
<li data-index="3">item 3</li>
<li data-index="4">item 4</li>
<li data-index="5">item 5</li>
<li data-index="6">item 6</li>
</ul>
<div id="trueresult"></div>
</body>
</html>
file_2.php
Code (php)
Gewijzigd op 12/08/2013 12:10:32 door Kris Peeters
Nu is 'or die()' altijd al een zeer foute manier van foutafhandeling, maar in dit geval helemaal. Zoals Kris terecht aangeeft moet je een volstrekt correcte JSON string terugsturen naar de browser en dat gebeurt met zo'n or die constructrie natuurlijk niet.
Het javascript bestand:
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
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
$(document).ready( function() {
$("#sortme").sortable({
update : function () {
serial = $('#sortme').sortable('serialize');
$.ajax({
url: "../module_navigatie/sort_menu.php",
type: "POST",
dataType: 'JSON',
data: serial,
error: function(data){
$('#falseresult').html('De wijziging kon niet worden opgeslagen!!');
},
success: function(data){
$('#trueresult').html(data.melding);
}
});
// Add the mask to body
$('body').append('<div id="falseresult"></div>');
$('#falseresult').fadeIn(300);
$('#falseresult').fadeOut(5000 , function(){ });
$('body').append('<div id="trueresult"></div>');
$('#trueresult').fadeIn(300);
$('#trueresult').fadeOut(5000 , function(){ });
}
});
}
);
$("#sortme").sortable({
update : function () {
serial = $('#sortme').sortable('serialize');
$.ajax({
url: "../module_navigatie/sort_menu.php",
type: "POST",
dataType: 'JSON',
data: serial,
error: function(data){
$('#falseresult').html('De wijziging kon niet worden opgeslagen!!');
},
success: function(data){
$('#trueresult').html(data.melding);
}
});
// Add the mask to body
$('body').append('<div id="falseresult"></div>');
$('#falseresult').fadeIn(300);
$('#falseresult').fadeOut(5000 , function(){ });
$('body').append('<div id="trueresult"></div>');
$('#trueresult').fadeIn(300);
$('#trueresult').fadeOut(5000 , function(){ });
}
});
}
);
En het PHP bestand:
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
$menu = $_POST['menu'];
for ($i = 0; $i < count($menu); $i++) {
$sql = "UPDATE tbl_menu SET position=" . $i . " WHERE menu_id='" . $menu[$i] . "'";
$resultaat = mysql_query($sql) or die ("Query mislukt: " . mysql_error());
}
if($resultaat2) {
$updatemsg = "OK";
}else{
$updatemsg = "NOT OK";
}
echo json_encode(array('melding' => $updatemsg));
for ($i = 0; $i < count($menu); $i++) {
$sql = "UPDATE tbl_menu SET position=" . $i . " WHERE menu_id='" . $menu[$i] . "'";
$resultaat = mysql_query($sql) or die ("Query mislukt: " . mysql_error());
}
if($resultaat2) {
$updatemsg = "OK";
}else{
$updatemsg = "NOT OK";
}
echo json_encode(array('melding' => $updatemsg));
De foutmelding wordt dus nog niet weergegeven als er een fout optreed in de SQL.
Dit heb ik ook al proberen toe te voegen zonder resultaat:
Code (php)
1
2
3
2
3
error: function(data){
$('#falseresult').html(data.melding);
},
$('#falseresult').html(data.melding);
},
Toevoeging op 12/08/2013 12:44:24:
Dit werkt dus niet:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
$.ajax({
url: "../module_navigatie/sort_menu.php",
type: "POST",
dataType: 'JSON',
data: serial,
error: function(data){
$('#falseresult').html(data.melding);
},
success: function(data){
$('#trueresult').html(data.melding);
}
});
url: "../module_navigatie/sort_menu.php",
type: "POST",
dataType: 'JSON',
data: serial,
error: function(data){
$('#falseresult').html(data.melding);
},
success: function(data){
$('#trueresult').html(data.melding);
}
});
Gewijzigd op 12/08/2013 12:35:43 door Johnny Cash