$_POST Werkt niet (blijft niet staan in box)

Door Olivier Peeters op 31-10-2012 20:15

2.117 views

Hallo allen,

ik heb een beetje een nare vraag, maar dat moet kunnen op dagen als vandaag ;-)
In navolging van een vorig topic & enkele vorige projectjes heb ik volgend test-script geschreven...

index.php


<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
	<title>Overzicht prestaties</title>
		<script src="http://code.jquery.com/jquery-latest.js"></script>
		<script type="text/javascript" src="http://tablesorter.com/__jquery.tablesorter.min.js"></script> 
		<script type="text/javascript">
		$(document).ready(function(){ 
		    $("#klik").click(function() { 
			 $.ajax({
				   type: "POST",
				   url: "melding.php",
				   data: "tekst=overzicht",
					async: false,
					success : function(text) {
				        $('#login').html(text);  
				      }
				 });
		    
			});	
		</script>
</head>
<body>
<div id="login" style="width: 500px; height: 400px"></div>
<a id="klik" href="">Klik!</a>
</body>
</html>

melding.php


<?php
echo 'Olivier Peeters';
print_r($_POST);
?>

Nu dit werkt slechts deels, want..... Als ik op de link 'Klik!' druk, dan verschijnt het resultaat slechts tijdelijk (praktische halve seconde) in de box 'login'. Dus het blijft er niet staan zoals ik wel zou willen. Enige persoon die de fout ziet en kan rechtzetten/oplossen?

Vriendelijke groeten,
Olivier

Reshad F

31-10-2012 21:22

Wat wil je precies bereiken?

Olivier Peeters

31-10-2012 21:25

Dat het de gegevens 'tekst=overzicht' gePOST worden in melding.php. Dit resultaat zou dan getoond moeten worden in het divje '#login'.

Dit lukt wel, zoals aangegeven, maar het resultaat verdwijnt terug uit het divje vanzodra de pagina geladen is (tijden het laden toont dit het resultaat wel). Waarschijnlijk een fout ergens?

Alvast bedankt

Mr Beronne

31-10-2012 21:53 gewijzigd op 31-10-2012 21:58

Ik heb 1 foutje ontdekt in je jquery gedeelde je was dit vergegen }); ik plaats het hieronder even dan kan je zien wat ik bedoel:


        <script type="text/javascript" src="http://tablesorter.com/__jquery.tablesorter.min.js"></script> 
        <script type="text/javascript">
        $(document).ready(function(){ 
			$("#klik").click(function() { 
            	$.ajax({
					type: "POST",
					url: "melding.php",
					data: "tekst=overzicht",
					async: false,
					success : function(text) {
						$('#login').html(text);  
					}
				});
			}); // <-- Deze was je vergeten
		});    
        </script>

Ik krijg ook telkens 1 sec maar de waarde terug maar als
je iets beter uitlegd hoe je aan de waarde komt die je mee post
in ajax kan ik je verder helpen

Olivier Peeters

31-10-2012 22:07

Oorspronkelijk was het script zo gebouwd (ben het daarna gaan gaan veranderen om te kijken of het aan mij lag) =>


		<script type="text/javascript">
		$(document).ready(function(){ 
		$("#klik").click(function() { 
			var overzicht = $("#myTable").html();
				 $.ajax({
					type: "POST",
					url: "exemple00.php", // Laad pagina exemple00.php
					data: "tekst="+ escape(overzicht), //Data verzenden, met variabele overzicht (ge-escaped omdat deze vrij lang is)
					async: false,
					success : function(text) {
				        $('#login').html(text);  // = steek tekst als innerHTML van het element met id="login"
				      }
				 });
		    
			});
		});
</script>

De variabele die ik dus wil posten, haal ik via de $().html manier uit een div '#myTable' (zeer lange variabele trouwens, maar dat doet er niet toe)...
Daarna wil ik ze posten, maar dit lukt dus niet om het resultaat vast te houden.

Op andere pagina's/websites waar ik dit gebruik, lukt dit wel dus ik snap het niet (misschien kun jij een voorbeeld posten van een goede POST AJAX?)?

Vriendelijke groeten

Mr Beronne

01-11-2012 15:58 gewijzigd op 01-11-2012 16:01

Ik heb het werkend gekregen heb tevens een paar dingen toegevoegd als je data terug krijgt:
het login vak krijg dan een rode achtergrond en heeft een slideDown. Wil je alleen de data hebben moet je
.css("background","red").slideDown("slow"); weglaten + de if else statement en in div id login de display: none weghalen.

Ik heb op index.php een div aangemaakt als voorbeeld waar ik dus zeg maar data uithaal.
deze wordt dan gestuurd naar melding.php die een echt terug doet en in id$login zet.
Hoop dat je weer verder kan.

index.php


<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Overzicht prestaties</title>
     <script src="http://code.jquery.com/jquery-latest.js"></script>
	<script>
    $(document).ready(function() {
        
        $("#klik").click(function(){
			var overzicht = "overzicht=" + $("#myTable").html();
           	//alert(overzicht);
            $.ajax({
                type: "POST",
                url: "melding.php",
                data: overzicht,
                cache: false,
                success: function(data){
					if($("#login").is(":hidden")){
						$("#login").html(data).css("background","red").slideDown("slow");	
					} else {
						$("#login").hide();	
					}                    
                }
            });			
        });			
    });
    </script>
</head>
<body>

<div id="myTable">Voorbeeld...Voorbeeld...Voorbeeld...</div>
<a href="#" id="klik">Klik!</a>
<div id="login" style="width: 500px; height: 400px; display: none"></div>
	
</body>
</html>

melding.php


<?php
// Waarde vanuit ajax
// wordt terug gegeven in div#login
echo $_POST["overzicht"];

Olivier Peeters

01-11-2012 16:24

Super! Het werkt perfect, waarvoor mijn dank ;-)

Reageren

Inloggen om te reageren