Refresh image by button click, without page-refresh

1
votes

I have a div class for an image search button:

<div class="form-group">
    <button onclick="myFunction()">Click me</button>
    <p id="demo"></p>
    <script>
        function myFunction() {

        <?php
            $link = "https://source.unsplash.com/all/?";
            $c=$link.$article->title;
            ?>
         document.getElementById("demo").innerHTML ="
        <?php echo "
            <img src=".$c." height='100' width='100'/>"?>"
        }

    </script>
</div>

If I click on this button I get an image from this url by my keyword:

https://source.unsplash.com/all/?

But if I want to choose another image by clicking on this button, I have to refresh my page. So the question is: Can I choose another image without page-refresh just by clicking the same search button? Sorry for my english.

2
javascriptjqueryhtmlbutton
The way your function works, you can't change the image. The src attribute of the img only depends of your php. The $article->title value. And, since you didn't show this part of the code, i'm assuming that's the page you are. Just refreshing it, will not work. – Clyff
This value '$article->title' is my keyword (the title of my article). When I send this request 'source.unsplash.com/all/?apple' every time i get a new image associated with apple. The same action I want to do in my code. Each time when I click on my button I want a new image without page refresh(because when I refresh my page and click again on that button I really get a new image). – Andrew Loser
yeah you can....but only if you are willing to stop using PHP in javascript. – Vineet 'DEVIN' Dev
Weird. I'm making some tests here and it really doesn't changes the image as it should. But if you do change the variable to another word, loads, and change it again it does change ( ? ).... There must be something in their API for what you are trying to accomplish. If this question not solved, i will try check that later. – Clyff

2 Answers

0
votes

Re-evaluating your question, it seems more of a caching issue. I will still keep my previous answer posted as it may be helpful to someone else. As shown below, try adding a timestamp to the url, which should get you a new image:

<div class="form-group">
    <button onclick="myFunction()">Click me</button>
    <p id="demo"></p>
    <script>
        var link = "https://source.unsplash.com/all/?";
        var articleTitle = <?php echo "'" . $article->title . "'"; ?>;
        function myFunction() {
            var d = new Date();
            var c = link + articleTitle + "&" + d.getTime();
            document.getElementById("demo").innerHTML = "<img src=" + c + " height='100' width='100'/>";
        }

    </script>
</div>
0
votes

For the sake of the simplicity let's assume you have a variable called $articleList that contains each of your $article objects

<div class="form-group">
     <button onclick="myFunction()">Click me</button>
     <p id="demo"></p>
     <script>
         var articleList = <?php echo json_encode($articleList); ?>;
         var counter = 0;
         var link = "https://source.unsplash.com/all/?";
         function myFunction() {
             var c = link + articleList[counter++].title;
             document.getElementById("demo").innerHTML = "<img src=" + c + " height='100' weidth='100'/>";
         }
     </script>
 </div>