How to pass PHP variable value to jquery function?

i have this JQuery Script in WordPress /js folder and i need to change some values that i store in the Database.

$( "#slider-range2" ).slider({
    range: true,
    min: 18,
    max: 90,
    values: [ 35, 50 ],
    slide: function( event, ui ) {
        $( "#amount2" ).val( ui.values[ 0 ] + "-" + ui.values[ 1 ] );
    }
});
$( "#amount2" ).val( $( "#slider-range2" ).slider( "values", 0 ) + "-" + $( "#slider-range2" ).slider( "values", 1 ) );

The Jquery documentation is not clear to me.
Values that i need to change are [35 , 50]. These values ​​are stored in the database.
How can i do this from the js file? How can i pass a PHP variable value to jquery function?

Read More

Thanks.

Related posts

Leave a Reply

7 comments

  1. Assuming you want to keep the external js file and not embed it into your php script, have php write out two global js vars, and modify the js file to use those instead.

    e.g. in php:

    echo "<script>var val1 = $var1; var val2 = $var2;</script>";
    

    and in your js file:

    values: [val1, val2]
    


    But if you can change your js file to be a php file instead, you can do something like:

    <?php header('Content-type: text/javascript'); ?>
    ... // your regular js code  here
    values: <?php echo $var1 ?> , <?php echo $var2 ?>
    ...
    

    Now, you can use on your page:

    <script type="text/javascript" src="yourfile.js.php">
    
  2. I’d say you just do it like this:

    $( "#slider-range2" ).slider({
        range: true,
        min: 18,
        max: 90,
        values: [ <?php echo $value1; ?>, <?php echo $value2; ?> ],
        slide: function( event, ui ) {
            $( "#amount2" ).val( ui.values[ 0 ] + "-" + ui.values[ 1 ] );
      }
    

    });

    where of course $value1 and $value2 are the values you get from the database.

    -edit- or what the other guy said, you can use a php for loop to make the size of your array dynamic that way 🙂

  3. PHP code runs on the server and jQuery code runs in the browser, so you can’t directly pass PHP variables to jQuery functions because you can’t directly call jQuery functions from PHP code.

    What you need to do is make the PHP code generate JavaScript code that, when it runs later in the browser, will set some JavaScript variables to the values you want. For example, you could make the PHP code generate a <script> element in the page’s header that contains JavaScript assignment statements, and then modify your .js file so that instead of the numbers 35 and 50, it refers to those variables.

    You can also put PHP code in your .js file itself, as other answers have suggested, but only if it’s actually a PHP script rather than a static file. My recommendation would be to keep the majority of the JavaScript code in static files (so that browsers can cache them) and have the PHP just generate assignments for a few global variables that the rest of the scripts can refer to.

  4. Well you could make an ajax request to the server before you define your slider.

    eg.
    var myValues = function(){
    //do ajax call to php script that returns values
    return value};

    $( "#slider-range2" ).slider({     
       range: true,     
       min: 18,
       max: 90,
       values: myValues(),
       slide: function( event, ui ) {
           $( "#amount2" ).val( ui.values[ 0 ] + "-" + ui.values[ 1 ] );
       } 
    }); 
    $( "#amount2" ).val( $( "#slider-range2" ).slider( "values", 0 ) + "-" + $( "#slider-range2" ).slider( "values", 1 ) ); 
    
  5. Just echo it out, like this.

    $( "#slider-range2" ).slider({
        range: true,
        min: 18,
        max: 90,
        values: <?php echo $your_variable ?> ,
        slide: function( event, ui ) {
            $( "#amount2" ).val( ui.values[ 0 ] + "-" + ui.values[ 1 ] );
        }
    });
    
  6. It depends on the value. If it’s a simple numeric value, you can just echo it. If it’s complex or a string, you might echo it in JSON format via json_encode (since JSON is a subset of JavaScript literal syntax), since that will handle escaping and such for you.

    Note in both cases that the PHP is happening on the server as the page request is satisfied, and JavaScript is using it later on the client-side.

  7. One of my favorite tricks is naming your javascript file somename.js.php and then sending a javascript header:

    Header("content-type: application/x-javascript");
    

    Now, you can use full php functionality (including db calls) inside your javascript.

    However, you’ll want to ensure that you’re properly caching your file with the server, so it’s not downloaded on every page. Something like:

    header("Expires: Sat, 26 Jul 2012 05:00:00 GMT")
    

    As a rule of thumb, I generally keep any changing JS variables in the main php file, and pass them to functions declared in an external JS file.