javascript - Running a serverside PHP with JQuery slider -
i've been looking new project further learn php after finishing codecademy course... however, i've run dead end , think has ajax-part of it, can't figure out what/where , 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> <!-- use roundsliderui documentation 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 display round slider on php-page called quicktest.php. on draggin slider, page should update using php function called show(). use echo statement.
what happens following:
- post works: in developper console of chrome see correct value gets send localhost , see status of 200.
- when in developer console > network > preview: see page gets updated correctly.
- however, page in browser remains unchanged.
all of leads me think did wrong ajax; said, can't pinpoint error.
this because can't use php way. php evaluated on server before gets browser.
the way use javascript it. 1 way 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 don't want message displayed until after ajax request has finished 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 helps!
Comments
Post a Comment