0

I am making a website where you can random throw dices. First I made the function to throw in JavaScript. Now I want it in PHP. Everything works, but the whole Site is always reloading if I try to throw it in PHP.

So I read I must use AJAX. But it doesen't work. The Site uses jQuery, so it should be an easy task. I tried it for hours but it doesen't work. Can you see where the problem is?

The code is as following:

<form name="imageForm">
<table border=0>
<tr>
<td>
<img src="<?php echo $randomImage; ?>" name="canvas" width="50%" height="auto"/>
</td>
</tr>
<tr>
<td>
<br>
<form method="post"><input type="submit" name="random" id="randomImage" value="random" class="btn type--uppercase"/><br/></form>
<a onclick="displayImage();" class="btn btn--lg type--uppercase" href="#random"><span class="btn__text">
Random Dice Roll
</span>
</td>

</tr>
</table>
</form>
</div>
</div>
</div>
</div>
</section>

 
<!-- Scripts -->
<script>
function displayImage(){
$.ajax({
url: "random.php",
success: function(data){
$('img[name="canvas"]').attr('src', data);
}
});
return false;
}
</script>
<script src="js/parallax.js"></script>
<script src="js/smooth-scroll.min.js"></script>
<script src="js/scripts.js"></script>
<script src="js/random-dice-6-sides/random.js"></script>
</body>
</html>

And the random.php 

<?php
    $imagesDir = 'img/random-dice-6-sides/';
    $images = glob($imagesDir . '*.{jpg,jpeg,png,gif}', GLOB_BRACE);
    $randomImage = $images[array_rand($images)];
    echo $randomImage;
?>

You can see the whole process on https://randomster.com/random-dice-6-sides.php

The orange button is the php call, and the white is the Javascript call.

Thanks for your help! Greetings

Improve this question
1
  • 1
    Don't obfuscate your question please. Commented Apr 8, 2018 at 14:34

2 Answers 2

Reset to default
1

Since you have already attached an event handler onclick="displayImage();" with the anchor tag, your jQuery/AJAX code should be like this:

<script>
    function displayImage(){
        $.ajax({
            url: "YOUR_PAGE.php",
            success: function(data){
                $('img[name="canvas"]').attr('src', data);
            }
        });
        return false;
    }
</script>

Don't forget to replace YOUR_PAGE.php with your actual page i.e. the page where you want to send the AJAX request.

And in the backend PHP code, you just have to echo the $randomImage, 

<?php
    $imagesDir = 'img/random-dice-6-sides/';
    $images = glob($imagesDir . '*.{jpg,jpeg,png,gif}', GLOB_BRACE);
    $randomImage = $images[array_rand($images)];
    echo $randomImage;
?>
Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

Hey there! Thanks for your help. I added the code, but the same page is always reloading and I'm not sure why. And now the echo is shown at top of the page instead of the dice. I updated my original post with the complete source code. Can you review it and see the problem? Thank you so much!
@JohnNoe May be you should return false from displayImage() function to avoid reloading/redirection. I've updated my answer, please test your application with the updated code snippet.
@JohnNoe Ah, I can see now. You have to segregate your jQuery/AJAX code and backend PHP code i.e. put your PHP code in a different page and change the url setting, url: "YOUR_PAGE.php", in the AJAX request accordingly.
Hey there! I put the php code in random.php and included it. But no way, always the same error. I updated my question again. Its driving me crazy :/
@JohnNoe You didn't change the url setting of your AJAX request, change it to url: "random.php",
|
0

I suggest moving jquery script link to as right now it's at the bottom of and I get ReferenceError: $ is not defined.

A few changes were made. Your target file (which should return new image) I added:

<?php
$imagesDir = 'img/random-dice-6-sides/';
$images = glob($imagesDir . '*.{jpg,jpeg,png,gif}', GLOB_BRACE);
echo $images[array_rand($images)];

And your index file:

<?php
$imagesDir = 'img/random-dice-6-sides/';
$images = glob($imagesDir . '*.{jpg,jpeg,png,gif}', GLOB_BRACE);
$randomImage = $images[array_rand($images)];
// Display initial image
?>

<section class="text-center page-title bg--dark">
<div class="container">
<div class="row">
<div class="col-md-10 col-lg-8">
<h1>Welcome to Randomster.com</h1>
<p class="lead"> Blah </p>
<form name="imageForm">
<table border=0>
<tr>
<td>
<!-- Result displayed here -->
<img id="canvas" src="<?php echo $randomImage; ?>" name="canvas" width="50%" height="auto"/>                                                        </td>
</tr>
<tr>
<td>
<br>
<!--PHP Call-->
<form method="post">
    <input type="submit" name="random" id="randomImage" value="random" class="btn type--uppercase"/><br/>
</form>
<!--Javascript Call-->
<a onclick="displayImage();" class="btn btn--lg type--uppercase" href="#random"><span class="btn__text">Random Dice Roll
</span>
</td>
</tr>
</table>
</form>
</div>
</div>
</div>
</div>
</section>

<script>
$(document).ready(function(){
    // AJAX to target file (in this case, index2.php)
    $("#randomImage").click(function(e) {
        e.preventDefault();

        $.ajax({
            method: "POST",
            url: "index2.php",
        })
        .done(function(results) {
            $("#canvas").attr('src', results);
        })
    });
});
</script>

The PHP part to show initial image. The image element has an ID now because jQuery needs it (in my case) and AJAX was added.

Improve this answer

2 Comments

Hey there! Thanks for your help. I added the code, but the same page is always reloading and I'm not sure why. And now the echo is shown at top of the page instead of the dice. I updated my original post with the complete source code. Can you review it and see the problem? Thank you so much!
@JohnNoe True. Updated. You need to stop event from using default action. Check for e.preventDefault();.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.