Calling a PHP function from Jquery

Question

this could be something that a lot of people ask, but, im having some troubles with something different.

Im developing a "game" section where every image is a tag, which will load a flash game .swf, the thing is, this need to be dinamically, i mean, every file.swf has different width/height, i did a function in PHP which bring from a file.swf the width/height, i tried to use javascript to do this, but i got some height troubles when the file.swf was loaded, for example, one file.swf has 720x550 using php function and the JS function gave me 720x714, So...This is the thing, i got this function in PHP:

function flash_get(){
ini_set("memory_limit","30M");
$file ="games/miniracing3d.swf";
$info = getimagesize($file);
$width = $info[0];
$height = $info[1];
echo "<script type='text/javascript'>
    $('#game_lb_loaded').flash({
     src: 'games/miniracing3d.swf',
     width:$width,
     height:$height       
      });
</script>"; 
}

It loads a JS plugin called jquery.flash.js, which is the one who load the file...but, i need this to work with Jquery, why exactly? well, i got this code in Jquery:

$body.on('click','.game_button_link',function() {
var id_game = $(this).attr('id'),
    game = 'games/'+id_game+'.swf';


$("#game_lb_loaded").lightbox_me({
  centered: true,
  closeEsc: true,
  overlayCSS: {
      background: 'black',
      opacity: .8,
      width: 750,
      height: 600
  },
  onLoad: function() {
    $("#game_lb_loaded").flash({
     src: game       
      });

  }
});
});

That code its a code what i was working before making the PHP function, well, this is it, every has the class "game_button_link" and an id in it, which every id will be the name of the .swf, example id="file" == "file.swf" id="file2" == "file2.swf"...and so on...the real thing is, i need to mix the php function to get the width/height into onclick jquery function i really dont know how to achieve this, oh i forgot, i use lightbox_me to open a lightbox with the flash file in it...but it doesnt matter right now, i want to mix the php and jquery functions T_T, please i need your help :)

I end up using this code:

Javascript

$body.on('click','.game_button_link',function() {
    var id_game = $(this).attr('id'),
    game = 'games/'+id_game+'.swf';

$("#game_lb_loaded").lightbox_me({
    centered: true,
    closeEsc: false,
    closeClick: false,
    closeSelector: ".close_button_lb",
    appearEffect: "fadeIn",
    overlayCSS: {
      background: 'black',
      opacity: .8,
      width: 800,
      height: 600
    },

  onLoad: function() {
$.post('game_dimension.php', 'game='+game,
function(data){
  var dimensions = data.split(',');
    $('#game_lb_loaded').flash({
        src: game,
        width: dimensions[0],
        height: dimensions[1]
    });
}


);

  },
    destroyOnClose: true
});
});

PHP

<?php
ini_set("memory_limit","30M");
$file = $_POST['game'];
$info = getimagesize($file);
$width = $info[0];
$height = $info[1];
echo $width.','.$height;
?>

Thanks to everyone who helped :) I really appreciated it!

Answer 1

PHP is server-side, JS is client-side. They do not mix.
You could use jQuery .ajax() to get data from the server, but you can never run PHP on the client-side.

Answer 2

I think this is what you're looking for? In your php file, instead of echoing that script

 echo $width.','.$height;

and then this would be your ajax call.

$.post('file.php',
    function(data){
        var dimensions = data.split(',');
        $('#game_lb_loaded').flash({
            src: 'games/miniracing3d.swf',
            width: dimensions[0],
            height: dimensions[1]
        });
    }
);

does that help?

Answer 3

If you know the values before the page is sent (inside the PHP code), you can write them out to the javascript in the page. In my example I'll use the case where you need to pass it to a function that is not under your PHP file's control:

<?php

$height = getHeight(); // just for example

?>
<script>
var height = <?php echo $height; ?>;

doSomethingWith( height );
</script>

If it is after the page has been sent, you'll use AJAX. You'll create a PHP page that doesn't output anything other than

<?php
$height = getHeight(); // Just for example
$width = getWidth(); // Just for example
$out = array("height"=>$height, "width"=>$width);
echo json_encode($out);
?>

Then in your javascript you either use jQuery or another JSON parser or eval() [but only when you control the output of the script and even then think twice about this].

var myObj = $.parseJson(serverOutput);

alert(myObj.height);
alert(myObj.width);

So that is the general two ways you go about this.