Geek Answers Handbook

How to dynamically call php function in javascript

I have index.php with the following js function:

function returnImageString() { return "<?php include 'inc/image.functions.php'; echo getRandomImages(7); ?>"; //This isn't dynamic; this will always return the same images. How do I fix this? }

However, when the page loads, the php script is called and the result is added to the source code as follows:

 function returnImageString() { return "images/20.11.A1B9.jpg|images/8.14.47683.jpg|images/19.10.FBB9.jpg|images/21.12.9A.jpg|images/8.11.1474937909.jpg|images/8.15.99404.jpg|images/8.10.jpg|"; //This isn't dynamic; this will always return the same images. How do I fix this? }

What I want to do is when I call the js function (returnImageString), I want it to call the php function every time (since the php function returns a string of random image locations) instead of the string being hardcoded in js.

Can someone point me in the right direction? Thanks!

+4
source share
6 answers

This is not possible because you mix client-side behavior with server-side behavior. What you need to do is create an AJAX request to the server.

If you used a library like jQuery (which you really want, because AJAX does it a breeze), you will do something like this:

PHP code (maybe randomImages.php?)

 // query for all images // $_GET['limit'] will have the limit of images // since we passed it from the Javascript // put them all in an array like this: $images = array('images/20.11.A1B9.jpg','images/20.11.A1B9.jpg',...); print json_encode($images); // return them to the client in JSON format. exit;

Client side Javascript

 function getRandomImages(limit) { // make request to the server $.getJSON('/path/to/randomImages.php', {limit: limit}, function(data) { // data is now an array with all the images $.each(data, function(i) { // do something with each image // data[i] will have the image path }); }); }

Alternatively, if the number of images is limited, you can skip all this madness and just have an array with all the images and generate 8 random ones from Javascript itself. This is likely to be better for small datasets and even some larger ones.

+19
source

You cannot do this directly because PHP is interpreted on the server and you are using JavaScript on the client. However, if you create the random-image.php page on your server, you can get the data using AJAX and manipulate it on the server side when it returns.

+2
source

You have two options:

  • Use AJAX
  • Use PHP to echo the JavaScript array (possible image values) inside the script tags, and then create a JavaScript function to randomly select one when called.

The second option seems to be the best, in my opinion.

+1
source

I did this a while ago ... maybe this can help you. This is an example of php function call inside javascript with ajax. (I used gzcompress) The php file must be named foo.php to work with this demo.

JavaScript:

 //lib (function(a){for(var b in a)(function(c){a[b]=function(){c.apply(this,arguments);return this}})(a[b])})(XMLHttpRequest.prototype); XMLHttpRequest.prototype.$p=function(a,b){for(b in a)this[b]=a[b];return this}; (function(a,d,i){for(i in d=document.getElementsByTagName('*'))a[d[i].id]=d[i]})(document); //lib function gzcompress(s,c){ var buffer; (new XMLHttpRequest) .$p({onreadystatechange:function(){if(this.readyState>3){ buffer = this.responseText; }}}) .open("POST","foo.php",!1) .setRequestHeader("Content-type","application/x-www-form-urlencoded") .send( "s="+s +"&"+ "c="+c ); return buffer; } //look! it gzcompress inside javascript! it magical! document.myDiv.innerHTML = gzcompress("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",2)

PHP:

 <?php echo gzcompress($_POST['s'], $_POST['c']); ?>
0
source

you can use my mwsX library to use your PHP functions in Javascript.

MwsX library: https://github.com/loureirorg/mwsx

0
source

This is commonly called Ajax. Google for this.

-2
source

More articles:


All Articles