HamburgIsNice HamburgIsNice - 5 months ago 10
Ajax Question

Building a table with AJAX based on a PHP file

I have a "draw-table.php" File, which is built up like this:

<?php

function build_table($draw-me) {

$html_output = "<html><tr><td>".$draw-me."</td></tr></html>";

echo $html_output;

}

?>


Now with my jquery html id like to put this table exact on a distinct Position. Do do this I have to Hand over the variable $draw-me, which contains a number. To do this I used the following code:

<html>
<div id="ajaxtest"></div>
<div id="button" style="background-color:#00FFFF">klick me</div>

<script type="text/javascript">
$hand-over = 1;
$(document).ready(function(){
$("#ajaxtest").click(function(){

$.ajax({
type: 'POST',
url: 'draw-table.php',
success: function(data) {
$("ajaxtest").html($hand-over);
}
});
});
});
</script>
</html>


I also don't actually know is the echo command is the best way of solving this or should I use a return value?

Thank for your help.

Answer

Try this and pay attention to @Rory McCrossan what he said

draw-table.php

<?php

    $drawme = $_POST['handover'];
    echo $html_output = "<table border='1'><tr><td>".$drawme."</td></tr></table>";

?>

html codes :

<!DOCTYPE html>
<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

</head>
<body>
<button>Klick Me !</button>
<div id="ajaxtest"></div>
<script>
    $(document).ready(function () {
        $("button").click(function () {
            var handover = 1;
            $.ajax({
                type: 'POST',
                url: 'draw-table.php', //compare this line with yours
                data: {handover : 1},
                success: function (data) {
                    $("#ajaxtest").html(data); // and look at this line
                }
            });
        });
    });
</script>
</body>
</html>
Comments