CODEWITHSUNDEEP
javascriptphphtml
Dean Strydom
Dean Strydom

Reputation: 305

PHP, HTML, JS conflicting execution order

I have having big issues with the execution order of my code.

HTML sample:

<div id="toast-container" class="toast-top-right"><div  id="toast-type" class="toast" aria-live="assertive" style=""><div id="snackbar">message</div></div></div>
.
.<!--Somewhere more down the line-->
.
.    
    <div class="col_half col_last">
        <label for="job-ctc-frm-heard-about">How did you find out about us?</label>
        <input type="text" id="job-ctc-frm-heard-about" name="job-ctc-frm-heard-about" value="<?php echo $discovered;?>" class="sm-form-control" />
    </div>

Javascript function:

 <script> 
  function Toast(message, messagetype) 
  {
     var cont = document.getElementById("toast-container");
     cont.classList.add("show");
     var type = document.getElementById("toast-type");
     type.className += " " + messagetype;
     var x = document.getElementById("snackbar");
         x.innerHTML = message;
     setTimeout(function(){ cont.classList.remove("show")}, 3000);
  }
</script>

PHP sample:

<?php
$discovered ="";

if($_SERVER["REQUEST_METHOD"]=="POST")
    {       
        $message = 'Let the games begin';
        echo "<script type='text/javascript'>Toast('$message', '$Success');</script>";

$discovered = test_input( $_POST["job-ctc-frm-heard-about"] );
......
?>

Now heres my problem. My php uses a function Toast. My function Toast accesses the HTML div toast-container to set a message. The other div uses the php variable $discovered to remember the entered value on a failed form submit. If i position the JS anywhere before the DOM then var cont will be null so it has to be below.

However if I position the code order as PHP -> HTML -> JS then the function is undefined in PHP so it has to be after JS. But if i position it as HTML -> JS -> PHP then the variable $discovered won't be displayed in the HTML. The orders are conflicting with one another. Is there any work around for this?

Upvotes: 0

Views: 113

Answers (1)

Jeppe
Jeppe

Reputation: 2296

The simplest would be to just move the relevant parts to where you need them. You need $discovered to be available throughout your file (when PHP is executed server-side) and you need it to echo the script specifically after your Toast-declaration:

<?php
$discovered ="";

if($_SERVER["REQUEST_METHOD"]=="POST") {       
    $message = 'Let the games begin';    
    $discovered = test_input( $_POST["job-ctc-frm-heard-about"] );
    // ...
}
?>


<!-- HTML referencing $discovered here -->


<script> 
    function Toast(message, messagetype) 
    {
        var cont = document.getElementById("toast-container");
        cont.classList.add("show");
        var type = document.getElementById("toast-type");
        type.className += " " + messagetype;
        var x = document.getElementById("snackbar");
            x.innerHTML = message;
        setTimeout(function(){ cont.classList.remove("show")}, 3000);
    }
</script>
<?php
    if($_SERVER["REQUEST_METHOD"]=="POST") {
        echo "<script type='text/javascript'>Toast('$message', '$Success');</script>";
    }    
?>

If you want to control these things from client-side, you can json_encode your PHP objects, meaning they will be sent in plain-text as if you had hard-coded them into the file. As @FZs mentions, PHP runs on the server and "prepares" the file by executing all <?php ... ?> blocks. When the result reaches the browser, it contains the resulting text and not PHP (browsers don't understand PHP).

Upvotes: 1

Related Questions