change php variable with AJAX slider??

gazzamc · August 12, 2010

Hey guys i need some help on this.. i'm pretty new to php and really foreign to AJAX ..

Can anyone tell me how i can change a php variable with a ajax slider without refreshing the page (meaning instantly)...

i'll try give you a example if your not getting what i'm saying or need more info...

ok say i have a normal php file with a ajax slider on it...

and the php goes :

$num1 = $_GET['number'];
$num2 = 3;
$num3 = 5;

$total = $num1 + $num2 * $num3;

echo "".$num1." + ".$num2." * ".$num3." = ".$total;

now how could i set number which will be from the slider...

If you still dnt understand just let me know and i'll try clear it up...

Any help is appreciated.

trq · August 12, 2010

A simple example using jQuery UI's slider plugin.

$(document).ready(function() {
    $('#scrollbar').slider({
        value: center*between,
        slide: function(event, ui) {
            $('#scrollbar').slider('value', ui.value);
            $.ajax({
                type: 'post',
                url: 'yourphpscript.php',
                data: {slider: ui.value}
            });
        }
    });
});

yourphpscript.php

<?php

if (isset($_POST['slider'])) {
    $variable = $_POST['slider'];
}

trq · August 12, 2010

And just because I was bored. Here is a complete stand alone working example.

<?php
if (isset($_POST['slider'])) {
    @header("Content-type: application/json");
    echo json_encode(array('data' => $_POST['slider']));
    die();
} else {
?>
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/themes/base/jquery-ui.css" type="text/css" />
    </head>
    <body>
        <div id="foo">Data returned from php will show here.</div>
        <div id="scrollbar"></div>
    </body>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#scrollbar').slider({
                value: 0,
                slide: function(event, ui) {
                    $('#scrollbar').slider('value', ui.value);
                    $.ajax({
                        type: 'post',
                        url: '#',
                        datatype: 'json',
                        data: {'slider': ui.value},
                        success: function(fromphp) {
                            $('#foo').html(fromphp.data);
                        }
                    });
                }
            });
        });
    </script>
</html>
<?php } ?>

trq · August 12, 2010

Just to prove the data is actually coming back from php.

In this example, the slider sends the numbers 0-26 to php, php now responds with the corresponding letter of the alphabet.

<?php
if (isset($_POST['slider'])) {
    @header("Content-type: application/json");
    $alpha = range('A','Z');
    echo json_encode(array('data' => $alpha[$_POST['slider']]));
    die();
} else {
?>
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/base/jquery-ui.css" type="text/css" />
    </head>
    <body>
        <div id="foo">Data returned from php will show here.</div>
        <div id="scrollbar"></div>
    </body>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#scrollbar').slider({
                value: 0,
                max: 25,
                slide: function(event, ui) {
                    $('#scrollbar').slider('value', ui.value);
                    $.ajax({
                        type: 'post',
                        url: '#',
                        datatype: 'json',
                        data: {'slider': ui.value},
                        success: function(fromphp) {
                            $('#foo').html(fromphp.data);
                        }
                    });
                }
            });
        });
    </script>
</html>
<?php } ?>

gazzamc · August 12, 2010

all i can say is thank god you got bored lol ... Thanks so much for this...

Do you know of any tutorials that i can look at to understand AJAX more???

Thanks again...

gazzamc · August 12, 2010

i couldn't find a way to edit my post... but anyway how do i put that number from the slider into the php variable?? (from the first complete code u posted).

Thanks..

trq · August 12, 2010

If you wanted to put it into a variable called $foo....

<?php
if (isset($_POST['slider'])) {
  $foo = $_POST['slider'];
}

gazzamc · August 12, 2010

ok i've tried that but when i try to use the variable i get a php error. unknown variable.. but i'll keep trying...

trq · August 13, 2010

Post your code.

gazzamc · August 13, 2010

Here it is... using your first complete example..

<?php
if (isset($_POST['slider'])) {
  $ptz = $_POST['slider'];
} else {
?>
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/themes/base/jquery-ui.css" type="text/css" />
    </head>
    <body>
        <div id="foo">Data returned from php will show here.</div>
        <div id="scrollbar"></div>
    </body>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#scrollbar').slider({
                value: 0,
                slide: function(event, ui) {
                    $('#scrollbar').slider('value', ui.value);
                    $.ajax({
                        type: 'post',
                        url: '#',
                        datatype: 'json',
                        data: {'slider': ui.value},
                        success: function(fromphp) {
                            $('#foo').html(fromphp.data);
                        }
                    });
                }
            });
        });
    </script>
</html>
<?php } ?>
<?php

/// Grabs user input.
$prce = 500;
$points = 2000;


// Sets discount.
$price = $prce;
$dis = '0.01';
$price2 = $price * $dis; // gets discount from price

// sets percentage per x amount of ptz.
$pts = $ptz;
$perc1 = '100'; // above 1% = 100 ptz
$total = $pts / $perc1; // users ptz divided by 100 ptz
$mtotal = $price2 * $total; // discount multiplied by result above.

// Subtracts discount from price.
$ftotal = $price - $mtotal;

echo "Points = ".$points."<br />";
echo "Price = ".$prce."<br />";
echo "Discount Price = ".$ftotal."<br />";

?>

trq · August 13, 2010

The reason is that the variable doesn't actually exist until you use the slider.

Just move all your php into the first if statement.

if (isset($_POST['slider'])) {
  $ptz = $_POST['slider'];
  // rest of your code
}

gazzamc · August 13, 2010

The reason is that the variable doesn't actually exist until you use the slider.

Just move all your php into the first if statement.
if (isset($_POST['slider'])) {
  $ptz = $_POST['slider'];
  // rest of your code
}

ok i'll give that a try...

EDIT: After doing that the slider shows no output only "Data returned from php will show here."

trq · August 13, 2010

Sorry but, you might want to start actually thinking about what's going on for yourself. So far you haven't done anything that actually requires php, are you going to save this data to a database or something?

Anyway, you need to have the data echo'd from php back to the javascript.

<?php
if (isset($_POST['slider'])) {
  $ptz = $_POST['slider'];

  /// Grabs user input.
  $prce = 500;
  $points = 2000;

  // Sets discount.
  $price = $prce;
  $dis = '0.01';
  $price2 = $price * $dis; // gets discount from price

  // sets percentage per x amount of ptz.
  $pts = $ptz;
  $perc1 = '100'; // above 1% = 100 ptz
  $total = $pts / $perc1; // users ptz divided by 100 ptz
  $mtotal = $price2 * $total; // discount multiplied by result above.

  // Subtracts discount from price.
  $ftotal = $price - $mtotal;

  $arr = array(
    "Points" => $points,
    "Price" => $prce,
    "Discount" => $ftotal
  );

  @header("Content-type: application/json");
  echo json_encode($arr);

?>
}
?>
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/themes/base/jquery-ui.css" type="text/css" />
    </head>
    <body>
        <div id="foo">Data returned from php will show here.</div>
        <div id="scrollbar"></div>
    </body>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#scrollbar').slider({
                value: 0,
                slide: function(event, ui) {
                    $('#scrollbar').slider('value', ui.value);
                    $.ajax({
                        type: 'post',
                        url: '#',
                        datatype: 'json',
                        data: {'slider': ui.value},
                        success: function(fromphp) {
                            $('#foo').html("Points = " + fromphp.Points + "<br />Price = " + fromphp.Price + "<br />Discount Price = " + fromphp.Discount + "<br />");
                        }
                    });
                }
            });
        });
    </script>
</html>

Actually study this example and try and figure out whats going on. It would probably be easier to see whats going on if the php was in a separate file.

gazzamc · August 13, 2010

I know what i want.. i want the value from the slider to be put into the variable $ptz.. then i want php to do the math and output the results... if i put it into a separate file would i need to refresh the page.. i want to achieve this without refreshing the page..

Thanks..

Sorry but, you might want to start actually thinking about what's going on for yourself. So far you haven't done anything that actually requires php, are you going to save this data to a database or something?

Anyway, you need to have the data echo'd from php back to the javascript.

<?php
if (isset($_POST['slider'])) {
  $ptz = $_POST['slider'];

  /// Grabs user input.
  $prce = 500;
  $points = 2000;

  // Sets discount.
  $price = $prce;
  $dis = '0.01';
  $price2 = $price * $dis; // gets discount from price

  // sets percentage per x amount of ptz.
  $pts = $ptz;
  $perc1 = '100'; // above 1% = 100 ptz
  $total = $pts / $perc1; // users ptz divided by 100 ptz
  $mtotal = $price2 * $total; // discount multiplied by result above.

  // Subtracts discount from price.
  $ftotal = $price - $mtotal;

  $arr = array(
    "Points" => $points,
    "Price" => $prce,
    "Discount" => $ftotal
  );

  @header("Content-type: application/json");
  echo json_encode($arr);

?>
}
?>
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/themes/base/jquery-ui.css" type="text/css" />
    </head>
    <body>
        <div id="foo">Data returned from php will show here.</div>
        <div id="scrollbar"></div>
    </body>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#scrollbar').slider({
                value: 0,
                slide: function(event, ui) {
                    $('#scrollbar').slider('value', ui.value);
                    $.ajax({
                        type: 'post',
                        url: '#',
                        datatype: 'json',
                        data: {'slider': ui.value},
                        success: function(fromphp) {
                            $('#foo').html("Points = " + fromphp.Points + "<br />Price = " + fromphp.Price + "<br />Discount Price = " + fromphp.Discount + "<br />");
                        }
                    });
                }
            });
        });
    </script>
</html>

Actually study this example and try and figure out whats going on. It would probably be easier to see whats going on if the php was in a separate file.

trq · August 14, 2010

I know what i want.. i want the value from the slider to be put into the variable $ptz.. then i want php to do the math and output the results...

I'm not sure you understand what Ajax is. In this example, data is sent via Javascript back to the server to php, php then does some calculations and sends the data back to Javascript, Javascript then displays the results.

if i put it into a separate file would i need to refresh the page.. i want to achieve this without refreshing the page..

No.

Have you looked at the last example I have posted? Its does what your after.

gazzamc · August 14, 2010

To be honest i don't , sorry. so in the last example if i just split them up into two file it will work?

I know what i want.. i want the value from the slider to be put into the variable $ptz.. then i want php to do the math and output the results...

I'm not sure you understand what Ajax is. In this example, data is sent via Javascript back to the server to php, php then does some calculations and sends the data back to Javascript, Javascript then displays the results.

if i put it into a separate file would i need to refresh the page.. i want to achieve this without refreshing the page..

No.

Have you looked at the last example I have posted? Its does what your after.

trq · August 14, 2010

so in the last example if i just split them up into two file it will work?

It should work as is. I haven't tested it though.

gazzamc · August 14, 2010

ok i tried it and i took 2 screens...

There is no change on move..

[attachment deleted by admin]

trq · August 14, 2010

Post the exact code you are using.

gazzamc · August 14, 2010

Post the exact code you are using.

ok here it is..


<?php
if (isset($_POST['slider'])) {
  $ptz = $_POST['slider'];

  /// Grabs user input.
  $prce = 500;
  $points = 2000;

  // Sets discount.
  $price = $prce;
  $dis = '0.01';
  $price2 = $price * $dis; // gets discount from price

  // sets percentage per x amount of ptz.
  $pts = $ptz;
  $perc1 = '100'; // above 1% = 100 ptz
  $total = $pts / $perc1; // users ptz divided by 100 ptz
  $mtotal = $price2 * $total; // discount multiplied by result above.

  // Subtracts discount from price.
  $ftotal = $price - $mtotal;

  $arr = array(
    "Points" => $points,
    "Price" => $prce,
    "Discount" => $ftotal
  );

  @header("Content-type: application/json");
  echo json_encode($arr);
}
?>

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/themes/base/jquery-ui.css" type="text/css" />
    </head>
    <body>
        <div id="foo">Data returned from php will show here.</div>
        <div id="scrollbar"></div>
    </body>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#scrollbar').slider({
                value: 0,
                slide: function(event, ui) {
                    $('#scrollbar').slider('value', ui.value);
                    $.ajax({
                        type: 'post',
                        url: '#',
                        datatype: 'json',
                        data: {'slider': ui.value},
                        success: function(fromphp) {
                            $('#foo').html("Points = " + fromphp.Points + "<br />Price = " + fromphp.Price + "<br />Discount Price = " + fromphp.Discount + "<br />");
                        }
                    });
                }
            });
        });
    </script>
</html>

trq · August 14, 2010

You need to remove all the whitespace from around the <?php and ?> tags. This might be playing up with the returned json.

Do you have firebug? If not, install it and post the output from the console.

trq · August 14, 2010

Oh, and I just noticed. Within the php, on the line after echo, you need die.

@header("Content-type: application/json");
echo json_encode($arr);
die();

gazzamc · August 14, 2010

ok tnx i'll install firebug and do that...

Edit : OMG it worked.. tnx so much.... now how can i change the numbers from 1 - 100 to something else like 1 - 1000 or something...

tnx again.

gazzamc · August 14, 2010

i dnt no if you were waiting for a notification on this but i edited the post above.. didn't want to double post.. and sorry for doing it now..

trq · August 14, 2010

Instead of me explaining everything, I'll just point you to the manual from here.

http://jqueryui.com/demos/slider/

The bottom of that page lists all the options, events and methods available. for the slider.

Sign In

change php variable with AJAX slider??

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information