current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 3 down vote favorite

I am trying use an array created in PHP in my external javaScript. I have PHP code that puts images from the directory depending on the userid given via url, into an array and I want to be able to use this array in javaScript so that I can create a photo slideshow and have the images change depending on the userid. I think this is achievable as I have researched online, but somehow it just doesn't work for me. I am not sure what I am doing wrong.

In the head of my html, I have this code to add in my external javaScript and to declare the variable/array in Javascript. Not sure if it's right, I got it off here from one of the solutions:

<script src="js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">var userphoto = "<?= $galleryarray ?>";</script>
    <script type="text/javascript">var userid = "<?= $user_id ?>";</script>
    <script src="javascript.js"></script>

Here is my PHP code inside my basic HTML:

And here is my external JavaScript code:

$ (document).ready(function(){

var photodisplay = 
[
$("#photo1"),
$("#photo2"),
$("#photo3"),
$("#photo4"),
$("#photo5"),
];

var userid = "<?php echo json_encode($user_id); ?>";  // getting php variable 
var userphoto = "<?php echo json_encode(galleryarray); ?>";


// List of images for user one
/*var userphoto = new Array();
userphoto[0] = "Photos/1/1.jpg";
    userphoto[1] = "Photos/1/2.jpg";
        userphoto[2] = "Photos/1/1.jpg";
            userphoto[3] = "Photos/1/1.jpg";
                userphoto[4] = "Photos/1/1.jpg";*/

//preloading photos
function preloadingPhotos() {
for (var x=0; x<5; x++)
{
    photodisplay[x].attr("src", "Photos/" + userid + "/" + userphoto[x]);
    photodisplay[x].hide();
    console.log("preloaded photos");

}
displayPhoto();
}

function displayPhoto(){

    photodisplay[0].fadeIn(3000);
    photodisplay[0].delay(3000).fadeOut(3000, function() { //first callback func
    photodisplay[1].fadeIn(3000);
    photodisplay[1].delay(3000).fadeOut(3000, function() { //second callback func
    photodisplay[2].fadeIn(3000);
    photodisplay[2].delay(3000).fadeOut(3000, function() { //third callback func
    photodisplay[3].fadeIn(3000);
    photodisplay[3].delay(3000).fadeOut(3000, function() { // fourth callback func
    photodisplay[4].fadeIn(3000);
    photodisplay[4].delay(3000).fadeOut(3000, function() {
    setTimeout(displayPhoto(), 3000);
    });
    }); 
    });
    }); 
    });

}// end of function displayPhoto


window.onload = preloadingPhotos;
}); //end ready

PHP:

share|improve this question
    
It is unlikely that your webserver is configured to run javascript files through the PHP interpreter before sending them to the client, so the PHP is never executed/evaluated. I would suggest that it's better to fetch the data with AJAX calls in the javascript rather than writing inline PHP anyway. –  Brad Jan 20 at 0:13
    
I'm new to coding, so kind of confused to what you are saying. I think PHP if executing as it echos the user id and the array. Hi, 2 var galleryarray=new Array();galleryarray[0]="Lighthouse.jpg";galleryarray[1]="Koala.jpg";galleryarra‌​y[2]="1.jpg";galleryarray[3]="2.jpg";galleryarray[4]="Jellyfish.jpg"; Not sure why the PHP code I provided for the question is not showing. –  fondillusions Jan 20 at 11:25

3 Answers 3

up vote 0 down vote

Have your PHP define the variable(s) inside of a <script> tag like this...

<script>
    var userid = "<?php echo json_encode($user_id); ?>";
    var userphoto = "<?php echo json_encode(galleryarray); ?>";
</script>

Your following external javascript files will then be able to use the userid and userphoto variables, even though they weren't defined directly in the external file

share|improve this answer
up vote 0 down vote

In the below code userphoto & userid are now javascript variables. 

<script src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">var userphoto = "<?= $galleryarray ?>";</script>
<script type="text/javascript">var userid = "<?= $user_id ?>";</script>
<script src="javascript.js"></script>

Php code will not be executed in external javascript file. so when below lines are executed userid will be a string with "< ? php echo json_encode($user_id); ? > " as its value and similarly for userphoto.

var userid = "<?php echo json_encode($user_id); ?>";  // getting php variable 
var userphoto = "<?php echo json_encode(galleryarray); ?>";

Modify your basic HTML to

<script src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">var userphoto = <?php echo json_encode(galleryarray); ?>;     </script>
<script type="text/javascript">var userid = <?php echo json_encode($user_id); ?>;</script>
<script src="javascript.js"></script>

and you can use these variables in external javascript file provided it is loaded after these variables are assigned. So you need not assign these variables in external javascript again.

share|improve this answer
    
Thank you so much for replying! I have changed my code but it is still displaying a broken image and not the image from the directory. I am not sure how to fix this or why it is a broken image. Do you have any ideas? Thanks! –  fondillusions Jan 20 at 11:06
    
Can you give more details about it or may be start a new discussion? –  hemanth Jan 20 at 16:28
    
Hi, I have provided the link to a previous post of mine that shows the PHP code. For some reason, the code won't show in this post. Please refer to my comment for Lloyd Banks. Thanks :) –  fondillusions Jan 20 at 22:00
up vote 0 down vote

Simply rename your file named javascript.js to javascript.php and change your script tag to <script src="javascript.php"></script>

Update

You also can use .htaccess to keep your javascript.js as it is in the script tag by doing something like the following in your .htaccess file:

RewriteRule ^javascript\.js$ javascript.php

For more details about using .htaccess in such case, checkout the following question's answer:

Parsing PNG as PHP via htaccess works only on local server but not on webserver

share|improve this answer
    
This is bad practice - you can mixin your JS with PHP by doing something like this, but in a more elegant way by using MIME types. Essentially allowing you to write PHP inside of JS files. –  Adam A Jan 20 at 22:03
    
@AdamA Please check out the answer update. –  sємsєм Jan 21 at 0:05

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.