Ajax message op result pagina

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Pagina: 1 2 volgende »

Johnny Cash

Johnny Cash

11/08/2013 22:35:28
Quote Anchor link
Hallo,

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.
 
PHP hulp

PHP hulp

29/03/2024 00:17:58
 
Erwin H

Erwin H

11/08/2013 22:42:28
Quote Anchor link
Laat de javascript functie eens zien waarmee je de data naar de server verstuurt met ajax. In die functie zal je namelijk in een callback het bericht moeten tonen.
 
Johnny Cash

Johnny Cash

11/08/2013 23:07:07
Quote Anchor link
$(document).ready( function() {
$("#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
 
Erwin H

Erwin H

11/08/2013 23:22:37
Quote Anchor link
Als je naar de Ajax documentatie kijkt: http://api.jquery.com/jQuery.ajax/
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)
PHP script in nieuw venster Selecteer het PHP script
1
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');
        }
      });
    }
  });
});

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.
 
Johnny Cash

Johnny Cash

11/08/2013 23:27:08
Quote Anchor link
Op de verwerkpagina (file_2.php) wordt het volgende ge-echo-ed:

$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));
 
Erwin H

Erwin H

11/08/2013 23:45:34
Quote Anchor link
Dan kan je in die functie (als het goed is, maar probeer het gewoon) met data.melding waarschijnlijk het bericht ophalen:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
success: function(data){
  alert(data.melding);
}
 
Johnny Cash

Johnny Cash

12/08/2013 00:16:02
Quote Anchor link
Bedankt voor je reactie, maar ik wil niet een alert box!
Ik wil een nette text/html melding in een <div> met id: result
 
Erwin H

Erwin H

12/08/2013 00:26:11
Quote Anchor link
Die alert was alleen maar om aan te geven dat je daar iets met de tekst moet doen. Als je het in een div wilt zetten moet je dit in plaats van de alert gebruiken:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
$('#result').html(data.melding);
 
Johnny Cash

Johnny Cash

12/08/2013 00:47:10
Quote Anchor link
aha! Oke het werkt wanneer ik ipv data.melding gewoon 'test' erin zet. Met data.melding wordt er niets geprint...

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
 
Ger van Steenderen
Tutorial mod

Ger van Steenderen

12/08/2013 09:24:56
Quote Anchor link
Als je toch alleen maar een tekst teruggeeft doe het dan zonder de json_encode.
En dan div.html(data)
 
Johnny Cash

Johnny Cash

12/08/2013 10:48:05
Quote Anchor link
Dat klopt. Maar als het mogelijk is om, afhankelijk van de Update query, een bericht te sturen met het resultaat wordt de berichtgeving concreter.

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
 
Ger van Steenderen
Tutorial mod

Ger van Steenderen

12/08/2013 10:57:44
Quote Anchor link
Wordt er niets anders geëchoed dan de json?
En voeg anders dataType: 'json' toe aan $.ajax
 
Erwin H

Erwin H

12/08/2013 11:02:15
Quote Anchor link
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)
PHP script in nieuw venster Selecteer het PHP script
1
$('#result').html(data);
 
Johnny Cash

Johnny Cash

12/08/2013 11:04:55
Quote Anchor link
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.
 
Machiel K

Machiel K

12/08/2013 11:07:06
Quote Anchor link
Moet je ook niet de dataType aangeven? Dat is in dit geval JSON.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
$.ajax({
   url: 'file_2.php',
   type: 'POST',
   dataType: 'JSON',
   ...
   ..
   .
});
Gewijzigd op 12/08/2013 11:07:35 door Machiel K
 
Erwin H

Erwin H

12/08/2013 11:20:06
Quote Anchor link
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.

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.
 
Ger van Steenderen
Tutorial mod

Ger van Steenderen

12/08/2013 11:38:00
Quote Anchor link
Johnny, zou je zo vriendelijk willen zijn je programmacode tussen [code] en [/code] te plaatsen, dat maakt het voor anderen beter leesbaar.

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.
 
Johnny Cash

Johnny Cash

12/08/2013 12:01:36
Quote Anchor link
Hieronder heb ik dataType: 'JSON' toevoegd! En dan wordt er op m'n resultaat pagina de melding van error: weergegeven. Vanaf de verwerkpagina (file_2.php) echo ik de volgende JSON:
echo json_encode(array('melding' => $updatemsg));

$updatemsg is dan OK of NIET OK (if constructie)


Het javascript bestand:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
$(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(){ });
  
  }
 });
}
);


Het PHP script werkt volledig goed. Alles wordt via SQL geupdate zoals bedoelt.

Het PHP script:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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));
    
}
 
Kris Peeters

Kris Peeters

12/08/2013 12:04:27
Quote Anchor link
EDIT na het zien van de laatste post:

Je mag die json_encode niet binnenin de for-lus zetten.
Wat je moet doen, is zo-iets:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
<?php
$meldingen
= array();
for ($i = 0; $i < count($menu); $i++) {
  ...

  $meldingen[] = $updatemsg;
}

echo json_encode(array('melding' => $meldingen));
?>



----

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)
PHP script in nieuw venster Selecteer het PHP script
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
<!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>


file_2.php
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  $data = array();
  // boodschap toevoegen
  $data['message'] = 'Het bericht is aangepast...';
  $data['order'] = $_POST['order'];
  echo json_encode($data);
}

?>
Gewijzigd op 12/08/2013 12:10:32 door Kris Peeters
 
Erwin H

Erwin H

12/08/2013 12:12:55
Quote Anchor link
En in navolging van Kris, dit kan je dus absoluut niet in je php script hebben staan:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
<?php
$resultaat
= mysql_query($sql) or die ("Query mislukt: " . mysql_error());
?>

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.
 
Johnny Cash

Johnny Cash

12/08/2013 12:29:16
Quote Anchor link
Alles werkt bijna zoals het hoort.

Het javascript bestand:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
$(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(){ });
  
  }
 });
}
);


En het PHP bestand:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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));


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)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
error: function(data){
  $('#falseresult').html(data.melding);
},


Toevoeging op 12/08/2013 12:44:24:

Dit werkt dus niet:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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);
    }    
   });
Gewijzigd op 12/08/2013 12:35:43 door Johnny Cash
 

Pagina: 1 2 volgende »



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.