How to replace a html div with another div using just PHP?

Question

I wanted a div to show after a number of seconds, thus I have made it into two parts, one is a php that echoes that div, and the second is a javascript that replaces the div with another div after some seconds. The problem is before that javascript is executed, The div code shows for 2-3 seconds. Which I do not want. May be we can do this in just PHP? This is the PHP code

if(isset($_GET['id']))
{
$slide = $_GET["id"];
$mytitle='Your id is '.$slide.' ,Welcome';
$murl='"https://example.com/?id='.$slide.'"';
echo '<div id="countdown"> </div>';
echo '<div id="loader"></div>';
echo '<div id="welcome"><a href='.$murl.'>'.$mytitle.'</a></div>';
</div>';
}

This is the javascript

<script>
window.onload = function() {
var countdownElement = document.getElementById("countdown"),
    welcomeButton = document.getElementById("welcome"),
    loader=document.getElementById("loader"),
    seconds = 30,
    second = 0,
    interval;

    welcomeButton.style.display = "none";

interval = setInterval(function() {
    countdownElement.firstChild.data = "Preparing your welcome in " + (seconds - second) + " seconds, Please wait";
    if (second >= seconds) {
        welcomeButton.style.display = "block";
        loader.style.display="none";
        clearInterval(interval);
    }

    second++;
}, 1000);
}
</script>

`countdownElement.firstChild.data` - there is no child element within that particular `DIV` so I would guess that will throw an error and `.data` should likely be either `.innerHTML` or `.textContent` — Professor Abronsius, Nov 23 '22 at 08:07

foder · Accepted Answer · 2022-11-23T12:34:24.960

2

You won't be able to do dynamic changes to your page using php.

Here, the issue is that the javascript hides your welcome div. You can add style="display: none" to the div in the php part, so that when the page loads, the div is already hidden.

You can then remove welcomeButton.style.display = "none"; from the javascript

edited Nov 23 '22 at 12:34

answered Nov 23 '22 at 03:54

foder

113
7

1

Couldn't hold myself after reading first line, so put my answer up, but your suggestions are very likely to be very sensible :) – Maxim Mazurok Nov 23 '22 at 04:01
That was very useful, But I hoped I would do all that in PHP, since I didn't want my page to be overloaded with js files. But this solved my main problem why I posted this question. – hindisong.cc Nov 23 '22 at 09:26

score 1 · Answer 2 · answered Nov 23 '22 at 04:00

Disclaimer: I'm 99.99% sure you need to use JS.

However, there is a way to dynamically replace elements after a certain timeout using only PHP. You can achieve this by redirecting the user to another page (or the same but with certain URL query params, like ?welcome=off), see Page redirect after certain time PHP which suggests using header( "refresh:5;url=wherever.php" );

But as I mentioned in the first line, in virtually any normal situation you should prefer to use JS to do this stuff. For example, if you have a form and the user starts typing - they might lose progress when the page redirects.

How to replace a html div with another div using just PHP?

2 Answers2