CODEWITHSUNDEEP
javascriptphpjqueryhtmltime
skapaid
skapaid

Reputation: 169

how to make random text change without reloading the page

right now i have this script that gives users a random word.. however the only way to get a new word is to refresh the page...

i would like to be able to set the words to change at a specific interval rather then having to reload the page or browser but i have no idea how to do the and ive been reading forever and cant seem to figure it out

here is my php code

<?php
/* File, where the random text/quotes are stored one per line */
$settings['text_from_file'] = 'quotes.txt';
/*
 * If you prefer you can list quotes that RanTex will choose from here.
 * In this case set above variable to $settings['text_from_file'] = '';
 */
$settings['quotes'] = array(
    'First quote',
    'Multi
line
quote',
    'Second quote',
    'Third quote',
    'Some text with <b>HTML</b> code!',
    'Any single quotes \' must be escaped with a backslash',
    'A quote with a <a href="http://www.phpjunkyard.com">link</a>!'
);
/*
 * How to display the text?
 * 0 = raw mode: print the text as it is, when using RanTex as an include
 * 1 = Javascript mode: when using Javascript to display the quote
 */
$settings['display_type'] = 1;
/* Allow on-the-fly settings override? 0 = NO, 1 = YES */
$settings['allow_otf'] = 1;
// Override type?
if ($settings['allow_otf'] && isset($_GET['type'])) {
    $type = intval($_GET['type']);
} else {
    $type = $settings['display_type'];
}
// Get a list of all text options
if ($settings['text_from_file']) {
    $settings['quotes'] = file($settings['text_from_file']);
}
// If we have any text choose a random one, otherwise show 'No text to choose from'
if (count($settings['quotes'])) {
    $txt = $settings['quotes'][array_rand($settings['quotes'])];
} else {
    $txt = 'No text to choose from';
}
// Output the image according to the selected type
if ($type) {
    // New lines will break Javascript, remove any and replace them with <br />
    $txt = nl2br(trim($txt));
    $txt = str_replace(array(
        "\n",
        "\r"
    ), '', $txt);
    // Set the correct MIME type
    header("Content-type: text/javascript");
    // Print the Javascript code
    echo 'document.write(\'' . addslashes($txt) . '\')';
} else {
    echo $txt;
}
?>

here is the javascript on my .html page that calls the php code

<script type="text/javascript" src="randomword.php?type=1"></script>

Right now i get a new word evertime the page reloads but i would like the word to change every 5 seconds without having to refresh the page..... can anyone show me what my code should like?

Upvotes: 0

Views: 1425

Answers (2)

Iansen
Iansen

Reputation: 1268

Try something like this:

In your HTML add a tag like so: <div id="myrandomtext"></div> where you want it to show up and then at this bit of JavaScript to your site:

setInterval(function() {

  $("#myrandomtext").load("randomword.php?type=1");

}, 5000);

5000 is 5 seconds. You can change it to what ever you want (1 second = 1000). You will need to change:

header("Content-type: text/javascript");
// Print the Javascript code
echo 'document.write(\''.addslashes($txt).'\')';

to

echo $txt;

and remove <script type="text/javascript" src="randomword.php?type=1"></script>

Note: This uses jQuery.

Upvotes: 1

Doug Vann
Doug Vann

Reputation: 1

I would write the PHP file so that it return a JSON string. The, I would write a function that used jQuery.get to parse the result from the PHP file. Then call that function with the seTimeout function. So your Javascript would look like:

function getword(){
  $.get( "randomword.php", function( data ) {
  $( "body" )
    .append( "Word: " + data.word ) 
}, "json" );
}
setTimeout(getword, 2000);

Upvotes: 0

Related Questions