PHP variable within css doesn't update / refresh

Question

I've encountered this very annoying and weird problem. It started suddenly and worked as it should before.

I am using a PHP variable named 'visibility' in my (in-document) css code.
The 'visibility' changes depending on specific situations, this happens, ofcourse within the PHP code.
The visibility is declared as a global PHP variable, and is correclty implemented within the css code.
At a sudden moment without making any changes as far as I know, my css didn't change anymore when the used PHP variable changed.
However when I echo or dump the visibility variable it gives it's correct value but the css stays how it was when the page first loaded.

I've allready added PHP headers and HTML meta tags to prevent caching without any further success.

I'll add all the code of my PHP file below, to give a clear image of the situation.

Thanks for the help!

<?php

header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

$workMail  = '***';
$workNumber = '***';
$visibility = 'hidden';

$errorMessage = array();
$mailOK = false;
$mailDone = false;

$mail = isset($_POST['mail']) ? $_POST['mail'] : null;
$tel = isset($_POST['tel']) ?  $_POST['tel'] : null;
$firstName = isset($_POST['firstName']) ? $_POST['firstName'] : null;
$lastName = isset($_POST['lastName']) ? $_POST['lastName'] : null;
$subject = isset($_POST['subject']) ? $_POST['subject'] : null;
$message = isset($_POST['text']) ? $_POST['text'] : null;

if (isset($_POST['moduleAction']) && ($_POST['moduleAction'] == 'send')) {
    if ($mail == null || strpos($mail, '@') == false) {
        $errorMessage[] = 'Gelieve een correct emailadres op te geven';
    }
    if ($firstName == null) {
        $errorMessage[] = 'Gelieve jouw voornaam te vermelden in het formulier';
    }
    if ($lastName == null) {
        $errorMessage[] = 'Gelieve jouw achternaam te vermelden in het formulier';
    }
    if ($subject == null) {
        $errorMessage[] = 'Gelieve een onderwerp te selecteren in het formulier';
    }
    if ($message == null) {
        $errorMessage[] = 'Gelieve een mededeling te typen in het formulier';
    }

    if (sizeof($errorMessage) == null) {
        $headers = 'From: ' . $mail . "\r\n" . 'Reply-To: '. $mail . "\r\n" . 'X-Mailer: PHP/' . phpversion();
        if ($tel != null) {
            $message .= "\r\n\r\n" . 'Telefoonnummer: ' . $tel;
        }
        var_dump($workMail, $subject, $message, $headers);
        if (mail($workMail, $subject, $message, $headers)) {
            $mailOK = true;
        }
        else {
            $mailOK = false;
        }
        $mailDone = true;
    }
}

$confirmationMessage;
if ($mailOK === true) {
    $confirmationMessage = 'Danku voor uw mededeling! <br> Ik heb deze goed ontvangen, <br> en zal deze zo spoedig mogelijk beantwoorden';
}
else {
    $confirmationMessage = 'Er is een fout opgetreden bij het verzenden van jouw mededeling, onze welgemeende excuses hiervoor! <br> u kan de mededeling opnieuw proberen verzenden of telefonisch contact opnemen met mij op het nummer ' . $workNumber;
}
if ($mailDone === true) {
    $visibility = 'visible';
    var_dump($visibility);
}

?>

<!DOCTYPE html>
<html lang="nl">
<head>
    <title>MaximumRepair - Maak een afspraak</title>
    <meta charset="uTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="cache-control" content="max-age=0" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
    <meta http-equiv="pragma" content="no-cache" />
    <link rel="stylesheet" type="text/css" href="css/start.css">
    <link rel="stylesheet" type="text/css" href="css/styles.css">
    <link rel="stylesheet" type="text/css" href="css/afspraak.css">
</head>
<body>
    <div id="wrapper">
        <header>
            <h1><a href="index.html" class="ir">MaximumRepair_Logo</a></h1>
            <nav class="clearfix">
                <h2 class="structural">Main navigation</h2>
                <div class="left">
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li class="active"><a href="afspraak.php">Maak een afspraak</a></li>
                    </ul>
                </div>
                <div class="right">
                    <ul>
                        <li><a href="diensten.html">Diensten</a></li>
                        <li><a href="tarieven.html">Standaard tarieven</a></li>
                    </ul>
                </div>
            </nav>
        </header>

        <div id="content">
            <h2>Maak een afspraak</h2>
            <section id="contactgegevens">
                <h3 class="structural">Contactgegevens</h3>
                <div>
                    <h4>Neem telefonisch contact op</h4>
                    <p>
                        SMS of bel naar het nummer: <br>
                        <span class="ir tel">tel_icon</span> <?php echo htmlentities($workNumber) ?>
                    </p>
                </div>
                <div>
                    <h4>Stuur een e-mail</h4>
                    <p><span class="ir mail">mail_icon</span> <a href="mailto:<?php echo htmlentities($workMail) ?>?" target="_blank"><?php echo htmlentities($workMail) ?></a></p>
                    <p>Of vul onderstaand formulier in</p>
                </div>
                <div>
                    <h4>Kom langs</h4>
                    <p>Mijn adres:</p>
                    <p>Kalkenstraat 14, 9255 Buggenhout</p>
                </div>
            </section>

            <section>
                <h3 class="structural">Contactformulier</h3>
                <form action="<?php $_SERVER['PHP_SELF'] ?>" method="post">
                    <ul>
                        <li>
                            <label>Naam <span class="required">*</span></label>
                            <input type="text" name="firstName" class="field-divided" placeholder="Voornaam" value="<?php echo htmlentities($firstName) ?>" />&nbsp;<input type="text" name="lastName" class="field-divided" placeholder="Achternaam" value="<?php echo htmlentities($lastName) ?>" />
                        </li>
                        <li>
                            <label>Emailadres <span class="required">*</span></label>
                            <input type="email" name="mail" class="field-long" value="<?php echo htmlentities($mail) ?>" />
                        </li>
                        <li>
                            <label>Telefoonnummer</label>
                            <input type="tel" name="tel" class="field-long" value="<?php echo htmlentities($tel) ?>" />
                        </li>
                        <li>
                            <label>Onderwerp</label>
                            <select name="subject" class="field-select">
                                <option value="Herstelling" <?php if ($subject == 'Herstelling') echo 'selected' ?>>Herstelling</option>
                                <option value="Aankoop" <?php if ($subject == 'Aankoop') echo 'selected' ?>>Aankoop</option>
                                <option value="Opmerking website" <?php if ($subject == 'Opmerking website') echo 'selected' ?>>Opmerking website</option>
                                <option value="Andere" <?php if ($subject == 'Andere') echo 'selected' ?>>Andere</option>
                            </select>
                        </li>
                        <li>
                            <label>Jouw mededeling <span class="required">*</span></label>
                            <textarea rows="10" name="text" class="field-textarea"><?php echo htmlentities($message) ?></textarea>
                        </li>
                        <li>
                            <input type="submit" name="submit" value="Submit" />
                            <input type="hidden" name="moduleAction" id="moduleAction" value="send" />
                        </li>
                    </ul>
                </form>
            </section>
        </div>

        <footer>
            <h2 class="structural">Footer</h2>
            <ul>
                <li>
                    <ul>
                        <li>Maximum Repair</li>
                        <li><img src="images/logo.png" alt="Maximum Repair logo"></li>
                    </ul>
                <li>
                    <ul>
                        <li>Adres</li>
                        <li>Kalkenstraat 14</li>
                        <li>9255 Buggenhout</li>
                    </ul>
                </li>
                <li>
                    <ul>
                        <li>Contact</li>
                        <li>werknummer</li>
                        <li>werkemail</li>
                    </ul>
                </li>
            </ul>
        </footer>

        <div class="error">
            <div id="errorMessage">
                <span onclick="closeAndRefresh();">&#10006;</span>
                <p id="message">
                    <?php echo $confirmationMessage ?>
                </p>
            </div>
        </div>
    </div>
    <script>
        function closeAndRefresh() {
            <?php $visibility = 'hidden' ?>
            window.location.reload(true);
            alert('refreshed');
            var_dump('clicked');
        }
    </script>
</body>

<style type="text/css">
    /* Error */

    .error {
        visibility: <?php echo htmlentities($visibility) ?>;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(80, 80, 80, 0.8);
        z-index: 2;
    }

    #errorMessage {
        background-color: #fff;
        width: 40%;
        padding: 5rem;
        margin: 20% auto;
        border: 3px solid #94618E;
        z-index: 3;
        text-align: center;
        position: relative;
    }

    #errorMessage span {
        display: block;
        width: 2rem;
        height: 2rem;
        line-height: 2rem;
        font-size: 1.4rem;
        background-color: #94618E;
        color: #F4DECB;
        position: absolute;
        top: 0;
        right: 0;
        cursor: pointer;
    }
</style>
</html>

FYI I've edited out your email and phone, you probably don't want those posted to the internet. — Alex Howansky
– Alex Howansky, Commented Apr 15, 2017 at 13:20

ItsShowtime · Accepted Answer · 2017-04-23 13:52:58Z

2

The problem seemed to be CSS-Caching like Jesse de gans indicated before.

The only solutions that I found for this case scenario was,
1: Use Twig and disable CSS-Caching (But working with Twig seemed a bit overkill in this case).
2: Place the HTML that has to be shown when the needed condition is fulfilled, right in the PHP if statement, that way no CSS updates are needed.

answered Apr 23, 2017 at 13:52

ItsShowtime

1932 gold badges3 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jesse de gans · Accepted Answer · 2017-04-15 12:53:43Z

0

This is because of the browser cache. Adding a unique query string to the resource's URI will force the client to fetch a "fresh" version (since the client doesn't know that it's merely an update of a previously cached resource). This is known as fingerprinting and you typically use a timestamp or an incrementing version number1 of the CSS file like so.

<link rel="stylesheet" type="text/css" href="style.css?<?php echo date('l jS \of F Y h:i:s A'); ?>" />

answered Apr 15, 2017 at 12:53

Jesse de gans

1,6541 gold badge16 silver badges28 bronze badges

1 Comment

ItsShowtime Over a year ago

The problem with this type of refresh to avoid browser cache is that this seems to (only) refresh an external css file that's linked by that stylesheet link. But I am using in document CSS, so that way my css is in the main php file. I am doing it that way because I'm using php variables within that css and those variables seem to not be recognized anymore in another document.

Collectives™ on Stack Overflow

PHP variable within css doesn't update / refresh

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related