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

Popular posts from this blog

networking - Vagrant-provisioned VirtualBox VM is not reachable from Ubuntu host -

c# - ASP.NET Core - There is already an object named 'AspNetRoles' in the database -

ruby on rails - ArgumentError: Missing host to link to! Please provide the :host parameter, set default_url_options[:host], or set :only_path to true -