using setvalue to run a loop

Question

HTML:

<section class="clientbox">
    <div class="container">
        <div class="col-lg-10 col-lg-offset-1">
            <h2>WHAT CLIENT SAYS</h2>
            <h4>POSITIVE REVIEWS FOR LOVING PROBLAM.COM </h4>
            <p id="testimonial"><?php echo $alldata[0]['text'] ?></p>
         </div>
    </div>    
</section>

javascript:

<script type="text/javascript">
<?php $i = 1; ?>
    setInterval(function()
        {
            document.getElementById('testimonial').innerHTML = "<?php echo $alldata[$i]['text'] ?>";
            <?php $i++; ?>
        }, 3000);

What actually I am trying to do is change the text of 'testimonial' from values stored in $alldata array every 3 secs.

The problem is that the php variable $i is not getting updated. It stays 1 only.

Write the data held in php array into a javascript array and then refer to that javascript array with your javascript function. — Professor Abronsius, Jul 25 '15 at 13:05
@RamRaider- That is something m working on. will get back to you if I face a problem in that. — Nick, Jul 25 '15 at 13:22
@RamRaider- I am not able to do the conversion. Can you tell me how to do it.? — Nick, Jul 25 '15 at 13:33
Hi @Nick, some of the guys below have given alternative solutions and they also stated that you are unable to mix server side with client side! Take a look at the code by Marcos Segovia - looks like it will fit your needs — Professor Abronsius, Jul 25 '15 at 13:38

score 0 · Answer 1 · answered Jul 25 '15 at 13:08

You can't mix PHP and Javascript like that. PHP runs first, producing some data for Javascript to interpret. From Javascript's perspective, it can only see this:

<script type="text/javascript">
    setInterval(function()
        {
            document.getElementById('testimonial').innerHTML = "some data";
        }, 3000);
</script>

You would need to pass all of the data to Javascript so it can iterate over it.

See this answer for how to mix PHP and Javascript.

That is something I am currently working on. But I asked the question out of curiosity. — Nick, Jul 25 '15 at 13:14

score 0 · Accepted Answer · answered Jul 25 '15 at 13:13

You mixed the server side logic (PHP) with the client side logic (JavaScript).

When the client request your web page, PHP render the contents which contains HTML, CSS, JavaScript and some other contents and the web server send these contents to the client side.

The web browser receives these contents and then execute the JavaScript and render the HTML according to the styles.

You need to generate all the contents needed by the JavaScript setInterval on the server side, and adjust your JavaScript logic to iterate on these data.

The logic may looks like the following. I'm not familiar with PHP, not sure if this is valid. The JavaScript doesn't check if all data has been consumed.

<script type="text/javascript">
    <?php
    function get_data($e) {
        return($e['text']);
    }
    $data = array_map("get_data", $alldata);
    ?>
    var js_alldata = <?php echo json_encode($data) ?>;
    var i = 1;
    setInterval(function()
        {
            document.getElementById('testimonial').innerHTML = js_alldata[i % js_alldata.length];
            i++;
        }, 3000);

score 0 · Answer 3 · answered Jul 25 '15 at 13:21

I've made this code and it is working. As people above told you, server side cannot work with the client-side iterations or setIntervals, therefore you should send the whole data beforehand.

Example:

$array = array();
$array[0]['text'] = 'hi';
$array[1]['text'] = 'hey';
$array[2]['text'] = 'hou';
$js_array = json_encode($array);

?>

<p id="testimonial"><?php echo $array[0]['text'] ?></p>

<script>
    var json;
    var i=1;

    json = <?php echo $js_array; ?>

    setInterval(function()
    {
        document.getElementById('testimonial').innerHTML = json[i]['text'];
        i++;
    }, 3000);
    console.log(json);
</script>

this was really helpful. thank you so much buddy. Now I again to want reset i to 1 if its value reaches greater than 4. I am using this code just after i++ :- if(i > 4) {i = 1;} — Nick, Jul 25 '15 at 14:15

using setvalue to run a loop

3 Answers3