views:

4486

answers:

4

Hi guys, I have an 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 like this:

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 happen is whenever I call the js function (returnImageString), I want it to call the php function each time (since the php function returns a string of random image locations) instead of having the string hardcoded in the js function.

Can someone point me in the right direction? Thanks!

A: 

That is commonly known as Ajax. Google for it.

troelskn
+2  A: 

You're not going to able to do this directly because PHP is interpreted on the server and you're using JavaScript on the client. However, you if you create a page random-image.php on you server you could fetch the data using AJAX and manipulate it server side when it returns.

nickohrn
+1  A: 

You have two choices:

  1. Use AJAX
  2. Use PHP to echo a JavaScript array (of possible image values) inside the script tags and then build a JavaScript function to randomly choose one of them when called.

The second option seems the best, in my opinion.

Ionuț G. Stan
Hey, I actually like that second option. Will try that out, thanks!
bryan
Actually, scratch that. I'm not sure if that will work. When the function is called, I want it to pull x random images from the database. I don't think it will be feasible to build a JS array with all iamges and then randomly pick one; will be too much load on my db.
bryan
Depends how many images you store in your DB. Is better building a JS array from which to fetch elements than making an Ajax call for each JS function call. In the latter example there are more access to the DB than in the former.
Ionuț G. Stan
+6  A: 

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

If you were using a library like jQuery (which you really want to, because it makes AJAX a breeze) you would 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 amount of images is finite, you can skip all this crazyness and simply have an array with all the images and generate 8 random ones from the Javascript itself. This would probably be better for smaller data sets and even some bigger ones.

Paolo Bergantino
thanks, this is very helpful.
bryan
unfortunately, the number of images is not finite. I'm just grabbing x random images from the database and want to pass them to the JS to create an array.
bryan
In that case, you're going to have to query the server everytime you want a new set.
Paolo Bergantino