PHP and jQuery function—only works once?

Question

I have the following function. When I click the first time, it returns a random number, but all subsequent clicks always return the same number. How come it doesn't refresh?

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {

        $('#btn-get-random-image').click(function () {

            $('#my-img').attr('src', '<?php echo $pics[array_rand($pics, 1)]; ?>');

        });
}); 
</script>

Steve Wang · Accepted Answer · 2011-07-21 16:13:59Z

5

It's because you're using PHP to generate the random number, and it can't possibly be refreshed across calls to the JS function -- it's embedded in the HTML by that point.

answered Jul 21, 2011 at 16:13

Steve Wang

1,8241 gold badge16 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

anna Over a year ago

Ah, ok. So I need to be doing this with JS.

Sadiksha Gautam · Accepted Answer · 2011-07-21 16:33:31Z

1

May be you can also use live like instead of click

  $(document).ready(function(){
    $('#btn-get-random-image').live("click", function () {
    // your works here
    }
 });

also check out jquery live

edited Jul 21, 2011 at 16:33

answered Jul 21, 2011 at 16:26

Sadiksha Gautam

5,1826 gold badges43 silver badges71 bronze badges

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

As others have said, you are using PHP, which is executed once on the server and sent as raw output, so the image will not change. Try this!

Edit: modified code to make it suck less.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
var myPics = <?php echo json_encode($pics); ?>;
$(document).ready(function() {
    $('#btn-get-random-image').click(function () {
        var index;
        do {
            index = Math.floor(Math.random() * myPics.length);
        } while ( typeof myPics[index] == 'undefined' );
        $('#my-img')
            .attr('src', myPics[index]);
    });
}); 
</script>

This uses PHP's JSON encoder to dump your array to the javascript, then your function randomly selects an image from that array to display. The do/while loop might not be necessary, my testing shows a pretty good near-uniform distribution over thousands of iterations, but there it is nonetheless.

Alex Howansky · Accepted Answer · 2011-07-21 16:15:34Z

0

Your PHP is creating JS code, which gets sent to the browser once when the page is rendered. Each call to the JS function runs the function as it existed when the page was rendered.

answered Jul 21, 2011 at 16:15

Alex Howansky

54.1k8 gold badges85 silver badges102 bronze badges

Collectives™ on Stack Overflow

PHP and jQuery function—only works once?

4 Answers 4

1 Comment

Comments

Edit: modified code to make it suck less.

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Edit: modified code to make it suck less.

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related