PHP random values from array without reload page

Question

I've been exploring the possibilities of using PHP for the first time in a project lately, but now I've stumbled upon a problem I can't seem to quite wrap my head around – even after looking through various questions here on Stack Overflow.

Basically I have an array which I'd like to randomize values from, and update these values by the click of a link without having to reload the entire page.

data.php

<?php
$var = array(  
array("Hello", "0wLljngvrpw", "10", "15"),   
array("Hey", "TINASKjjNfw", "20", "25"),  
array("Hi", "rzU_fLcxIN0", "30", "35"),
);  
// array_rand returns the INDEX to the randomly 
// chosen value, use that to access the array. 
$finalVar = $var[array_rand($var)];  
?>

I tried to borrow an example from Ajax button click that triggers a php file / link, but I haven't got it to work.

index.php

<html>
<body>

<!-- Works, but reloads entire page -->
<?php include('data.php'); ?>
<form>
    <input type="submit" action="data.php" method=post value="Randomize">
</form>
<hr>
<?php echo $finalVar[0];?>
<br>
<?php echo $finalVar[1];?>
<br>
<?php echo $finalVar[2];?>


<!-- Borrowed code, can't seem to get it working though -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script type="text/javascript">
function doSomething() {
    $.get("data.php");
    return false;
}
</script>

<a href="#" onclick="doSomething();">Randomize without reload</a>


</body>
</html>

I've tried using the example from the previous mentioned question without luck, all I get is /?# at the end of the url (which also seem to break the first working submit action?) and no change in the random strings. I'm very new to this so I'm sorry if this isn't really a valid question, but it feels like there must be something pretty fundamental I've messed up or misunderstood here, no?

I can't help you with the href but this <input type=submit action="data.php" method=post value="Randomize"> is missing quotes. So do <input type="submit" action="data.php" method="post" value="Randomize"> and it will work. — Funk Forty Niner
– Funk Forty Niner, Commented Aug 20, 2014 at 16:01

Gabor · Accepted Answer · 2014-08-20 16:34:30Z

What you're looking to do here is call your data.php with a jquery call (get or post), and via ajax mechanics get your updated content (in this case, random element from your array).

This way, your files would look as follows:

data.php

$var = array(  
    array("Hello", "0wLljngvrpw", "10", "15"),   
    array("Hey", "TINASKjjNfw", "20", "25"),  
    array("Hi", "rzU_fLcxIN0", "30", "35"),
);  

$finalVar = $var[array_rand($var)];  

echo $finalVar[0] . '<br/> ' . $finalVar[1] . '<br/>' . $finalVar[2];

index.php

<html>
<body>

<button class="randomizerButton" data-href="data.php">Randomize</button>
<hr>
<div id="results">
<?php include('data.php'); ?>

</div>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script type="text/javascript">
    $(document).ready(function(){
        $('button.randomizerButton').click(function(){
            scriptUrl = $(this).attr('data-href');
            $.post(scriptUrl, function(response){
                $('#results').html(response);
            });
        });
    });
</script>

</body>
</html>

Explanation: $(document).ready(function(){.. means you will be defining jQuery stuff here. $('button.randomizerButton').click(function(){... says you want something to happen, when you click a button element, which has the class "randomizerButton" on it. I've got your data.php link encoded into the button element in its data-href attribute, which we retrieve with $(this).attr('data-href'); and put its value into a variable (scriptUrl). After that, we make an AjaxPost call to the script file (data.php in our case), and with function(response) we say, "lets do something with the stuff we get back, and lets call that stuff response". And the magic happens with $('#results').html(response); as we've added a div with an id of "results" - with this line, we're telling, put that response stuff into our results container div.

**Update

You can convert your data output to form links as follows in data.php:

....
echo $finalVar[0] . '<br/> ' . $finalVar[1] . '<br/>' . $finalVar[2];
echo '<a href="http://www.youtube.com/v/' . $finalVar[1] . '">Youtube link</a>';
....

Dmitry Bezik · Accepted Answer · 2014-08-20 15:58:44Z

0

for this $.get("data.php"); working your data.php must output something in output stream, for example json, echo $finalVar[0]; and by this $.get("data.php"); you doing ajax get request, better open you firebug or development tools in chrome and look at the tab with networking for you requests

answered Aug 20, 2014 at 15:58

Dmitry Bezik

4193 silver badges6 bronze badges

Comments

jwatts1980 · Accepted Answer · 2014-08-20 16:06:47Z

0

Try something like this. Have the data.php return HTML.

data.php

<?php
$var = array(  
array("Hello", "0wLljngvrpw", "10", "15"),   
array("Hey", "TINASKjjNfw", "20", "25"),  
array("Hi", "rzU_fLcxIN0", "30", "35"),
);  
// array_rand returns the INDEX to the randomly 
// chosen value, use that to access the array. 
$finalVar = $var[array_rand($var)]; 
?> 

<?php echo $finalVar[0];?>
<br>
<?php echo $finalVar[1];?>
<br>
<?php echo $finalVar[2];?>

Then insert it into your document, and you can call it with jQuery $.get().

index.php

<html>
<body>

<hr>
<div id="randvalues">
<?php include('data.php'); ?>
</div>
<a href="#" onclick="doSomething();">Randomize without reload</a>

<!-- Borrowed code, can't seem to get it working though -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script type="text/javascript">
    function doSomething() {
        $.get("data.php", function(data) {
            $("#randvalues").html(data);
        });
    }
</script>

</body>
</html>

answered Aug 20, 2014 at 16:06

jwatts1980

7,3742 gold badges31 silver badges46 bronze badges

2 Comments

Lenny Over a year ago

Thanks, this seems to help me in the right direction – is there any way to easily output the randomized content individually and possibly in urls? (For example, earlier i used http://www.youtube.com/v/<?php echo $finalVar[1];?>)

jwatts1980 Over a year ago

Any HTML that you can create in the data.php file will be 1st) dumped into the index.php because of the include statement, then loaded by the $.get() call when you click the button. You can create URLs, drop downs, whatever you need.

Azeem Hassni · Accepted Answer · 2014-08-20 16:08:17Z

change your code to this

data.php

<?php
$var = array(  
array("Hello", "0wLljngvrpw", "10", "15"),   
array("Hey", "TINASKjjNfw", "20", "25"),  
array("Hi", "rzU_fLcxIN0", "30", "35"),
);  
// array_rand returns the INDEX to the randomly 
// chosen value, use that to access the array. 
 $finalVar = $var[array_rand($var)];
 echo json_encode($finalVar);  
?>

index.php

<html>
<body>

<!-- Works, but reloads entire page -->
<?php include('data.php'); ?>
<form>
    <input type=submit action="data.php" method=post value="Randomize">
</form>
<div class='vars'>
    <hr>
        <?php echo $finalVar[0];?>
    <br>
        <?php echo $finalVar[1];?>
    <br>
        <?php echo $finalVar[2];?>
</div>


<!-- Borrowed code, can't seem to get it working though -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script type="text/javascript">
function doSomething() {
    $.get("data.php", function(data){
        data = JSON.parse(data);
        console.log(data);
        string = "<hr />";
        string += data[0];
        string += "<br />";
        string += data[1];
        string += "<br />";
        string += data[2];
        $('.vars').html(string);
    });
    return false;
}
</script>

<a href="#" onclick="doSomething();">Randomize without reload</a>


</body>
</html>

Collectives™ on Stack Overflow

PHP random values from array without reload page

4 Answers 4

Comments

Comments

2 Comments

data.php

index.php

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

data.php

index.php

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related