Shuffle the elements from database after clicking on a button

Question

The code I have done below was that it only shuffle the elements every once I refresh the page. For example: ' I play to play the piano'. I want it to be ' I play to play the piano', only when I click on the 'scramble' button it will then shuffle the elements.

thirdChineseSentence.php

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8" />
 <title>Sentence Scramble and Sequencer</title>
 <link rel="stylesheet" type="text/css" href="Second.css" />
 <script src="https://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript">       
 </script>
 <script src="chinesesentence.js" type="text/javascript"></script>

 </head>

 <body>
 <center>
 <img src = "http://imageshack.com/a/img842/1461/otd4.jpg"/>
 <h1>Hello world</h1>


 <?php
 // Connect to database server
 mysql_connect("localhost", "root", "password") or die (mysql_error ());

 // Select database
 mysql_select_db("login") or die(mysql_error());

// Get data from the database depending on the value of the id in the URL
$strSQL = "SELECT * FROM sentences WHERE id 
ORDER BY RAND() LIMIT 1;";

//create an array with numbers 1-4
$order = array(1,2,3,4);

//shuffle them in random order
shuffle($order);

 $rs = mysql_query($strSQL);

// Loop the recordset $rs
while($row = mysql_fetch_array($rs)) {
// Write the data of the person
//Display all the array values from 0-3 (array index starts from 0)
echo "<dt>Sentence:</dt><dd>" . $row[$order[0]] . " " . $row[$order[1]] . " " .  
$row[$order[2]] . " " . $row[$order[3]] ."</dd>";
}
// Close the database connection
mysql_close();
?>

<button id="showcontent">Scramble</button>
<div id="content"></div>
</center>

</body>
</html>

chinesesentence.js

 $(document).ready(function() {

 $('#showcontent').click( function(e) {
 e.preventDefault();

 url = 'thirdChineseSentence.php';
    $.ajax({
        type: 'POST',
        url: url, 
        dataType: 'html',

        beforeSend: function() {
                $( "#content" ).html( "Requesting.." );
        },
        success: function(html) {
                document.getElementById("content").innerHTML=html;
        }
    });

    });

  }

There is no error message. Just that the scramble button is not functioning. It will only scramble after every once i refresh the page. @Mahasish Shome — user3678617, May 30 '14 at 06:19
As @konghou mentioned your web page is cached by the browser. Try clearing your browser cache from browser settings & try reloading the web page, I hope the problem will be resolved. — Riq, May 30 '14 at 06:25
I tried clearing already but it does not work. @ Mahasish Shome — user3678617, May 30 '14 at 06:47
Your code seems to be correct. After reloading whether you are getting the expected result? — Riq, May 30 '14 at 06:54
When i reload the page, the sentence will scramble but i want it to be the exact sentence in the database and will only scramble after i click on the 'scramble' button. @Mahasish Shome — user3678617, May 30 '14 at 06:58

score 0 · Answer 1 · answered May 30 '14 at 06:10

0

thirdChineseSentence.php may have been cached by browser. Either setting a correct http header to make it not cached or add a random parameter such as thirdChineseSentence.php?dummy=42567499823 to make it refresh every time.

answered May 30 '14 at 06:10

konghou

557
7
20

I dont get what you mean and ive tired clearing my browser cache from setting but it cannot work. May i know is there something wrong with my js file that cause the button not functioning? @konghou – user3678617 May 30 '14 at 06:49
clearing the browser cache will only make it work on the first click but not on the second click, if the problem is because of cache. Either you add no-cache http headers to the php, add a random parameter, or simply shuffle the thing with javascript instead. – konghou May 30 '14 at 06:51
May i know how to i do it with javascript? @konghou – user3678617 May 30 '14 at 06:59
see http://stackoverflow.com/questions/6274339/how-can-i-shuffle-an-array-in-javascript – konghou May 30 '14 at 07:05

score 0 · Answer 2 · answered May 30 '14 at 07:04

you are sending ajax request to self(thirdChineseSentence.php).

so first cut your php code from thirdChineseSentence.php and paste in new php file (server.php).

now change your chinesesentence.js to this

$(document).ready(function() {

 var url = 'server.php';
 $.ajax({
    type: 'POST',
    url: url, 
    dataType: 'html',

    beforeSend: function() {
        $( "#content" ).html( "Requesting.." );
    },
    success: function(html) {
        document.getElementById("content").innerHTML=html;
    }
 });

 $('#showcontent').click( function(e) {
     // randomize your code locally here no need to send server request
});

}

Shuffle the elements from database after clicking on a button

2 Answers2