0

I've been looking into a new project to further learn PHP after finishing the codecademy course... However, I've run into a dead end and I think it has to do with the AJAX-part of it, but can't figure out what/where and how it's going wrong.

The Code:

<html>
    <head>
        <meta charset="utf-8">
        <script src="https://cdn.jsdelivr.net/jquery/1.11.3/jquery.min.js"></script>
        <link href="https://cdn.jsdelivr.net/jquery.roundslider/1.3/roundslider.min.css" rel="stylesheet" />
        <script src="https://cdn.jsdelivr.net/jquery.roundslider/1.3/roundslider.min.js"></script>
    </head>
    <body>
        <div id="slider"></div>
        <!-- I use the roundsliderui documentation for this: http://roundsliderui.com/ -->
        <script type="text/javascript">
            $("#slider").roundSlider({
                radius: 80,
                min: 0,
                max: 360,
                width: 9,
                startAngle: -90,
                handleSize: "+8",
                sliderType: "min-range",
                value: 180
          });

            $("#slider").on("drag", function (e) {
                var heading = e.value;
                $.post( "quicktest.php", {send: heading});
                console.log(heading);})
        </script>

        <?php
            function show(){
                $course= $_POST["send"];
                echo "Heading is: ".$course;
            } if (isset($_POST["send"])){
                show();}
        ?>
    </body>
</html>

What I'm trying to do is display a round slider on a php-page called quicktest.php. On draggin the slider, the page should update using the php function called show(). For this I use the echo statement.

What happens is the following:

  • Post works: In the developper console of chrome I see that the correct value gets send to the localhost and see a status of 200.
  • When I look in the Developer console > Network > Preview: I see that the page gets updated correctly.
  • However, the page in my browser remains unchanged.

All of this leads me to think I did something wrong with AJAX; but like I said, I can't pinpoint the error.

Dileep Kumar
  • 1,077
  • 9
  • 14
Clueless_captain
  • 420
  • 2
  • 13
  • `console.log(heading);` this will execute before your $.post completes because ajax is asynchronous. Move it inside the callback function of the $.post request. – ADyson Jul 25 '17 at 10:02
  • Try outputting the the $_POST-Variable with a simple echo $_POST['send']; die; on top of your PHP – Bernhard Jul 25 '17 at 10:03
  • Also use a Handler like ".done" https://stackoverflow.com/questions/22213495/jquery-post-done-and-success – Bernhard Jul 25 '17 at 10:04

1 Answers1

1

This is because you can't use PHP this way. PHP is evaluated on the server before gets to the browser.

The way you would do something like this is to use javascript for it. One way would be to use jQuery's after():

$("#slider").on("drag", function (e) {
    var heading = e.value;

    $('#slider').after("<p>Heading course is: " + heading + "</p>")

    $.post("quicktest.php", {send: heading});
    console.log(heading);
})

Alternatively, if you don't want the message to be displayed until after you ajax request has finished you could do:

$("#slider").on("drag", function (e) {
    var heading = e.value;

    $.post("quicktest.php", {send: heading}, function () {
        $('slider').after("<p>Heading course is: " + heading + "</p>")
    });
})

Hope this helps!

Rwd
  • 34,180
  • 6
  • 64
  • 78
  • I plan on combining the heading variable with a the shell_exec() part of PHP. I'm still figuring that part out, so I don't have code for this just yet. But is any your two methods more suited to use with shell_exec()? Thanks. – Clueless_captain Jul 25 '17 at 14:24
  • @Clueless_captain This is something that you would do in your `quickstart.php`. – Rwd Jul 25 '17 at 14:43