Problem with displaying a modal using PHP script

I have a problem with the modal system on my website. Now I will provide you some code:

MODALS ARE MADE WITH W3.CSS LIB

modal.js (with some debug)

let modal = null;
let title = null;
let content = null;

$(document).ready(() =>
{
    modal = $('#modal');
    title = $('#modal-title');
    content = $('#modal-content');

    if(modal == null)
    {
        console.log('aa');
    }
    if(title == null)
    {
        console.log('bb');
    }
    if(content == null)
    {
        console.log('cc');
    }
});

function showModal(modalTitle, modalText)
{
    title.text(modalTitle);
    content.text(modalText);
    modal.show();
}

function hideModal()
{
    modal.hide();
}

Modal HTML template

<div id="modal" class="w3-modal">
    <div class="w3-modal-content">
        <div style="display: block;" class="fir-light-purple">
            <div class="w3-container">
                <h2 id="modal-title">{TITLE}</h2>
            </div>
        </div>
        <br>
        <div class="w3-container">
            <span id="modal-content">{CONTENT}</span>
        </div>
        <br>
        <div style="text-align: center" class="fir-light-purple">
            <div class="w3-container">
                <h4><button class="w3-button w3-round-medium fir-white" onclick="hideModal();">Dismiss</button><br>
            </div>
        </div>
    </div>
</div>

AlertGenerator.php (a script that displays a modal)

<?php

//Current modal code
//<div id="modal" class="w3-modal"><div class="w3-modal-content"><div style="display: block;" class="fir-light-purple"><div class="w3-container"><h2 id="modal-title">{TITLE}</h2></div></div><br><div class="w3-container"><span id="modal-content">{CONTENT}</span></div><br><div style="text-align: center" class="fir-light-purple"><div class="w3-container"><h4><button class="w3-button w3-round-medium fir-white" onclick="hideModal();">Dismiss</button><br></div></div></div></div>

/*
Pretty code:

<div id="modal" class="w3-modal">
    <div class="w3-modal-content">
        <div style="display: block;" class="fir-light-purple">
            <div class="w3-container">
                <h2 id="modal-title">{TITLE}</h2>
            </div>
        </div>
        <br>
        <div class="w3-container">
            <span id="modal-content">{CONTENT}</span>
        </div>
        <br>
        <div style="text-align: center" class="fir-light-purple">
            <div class="w3-container">
                <h4><button class="w3-button w3-round-medium fir-white" onclick="hideModal();">Dismiss</button><br>
            </div>
        </div>
    </div>
</div>

 */

class AlertGenerator
{
    public static function createAlert(string $title, string $content)
    {
        self::validateSession();
        $_SESSION['alert']['title'] = $title;
        $_SESSION['alert']['content'] = $content;
    }

    public static function displayModal()
    {
        echo '<div id="modal" class="w3-modal"><div class="w3-modal-content"><div style="display: block;" class="fir-light-purple"><div class="w3-container"><h2 id="modal-title">{TITLE}</h2></div></div><br><div class="w3-container"><span id="modal-content">{CONTENT}</span></div><br><div style="text-align: center" class="fir-light-purple"><div class="w3-container"><h4><button class="w3-button w3-round-medium fir-white" onclick="hideModal();">Dismiss</button><br></div></div></div></div>' . PHP_EOL;
    }

    public static function showAlert()
    {
        self::validateSession();
        if(array_key_exists('alert', $_SESSION))
        {
            if(!array_key_exists('title', $_SESSION['alert']) || !array_key_exists('content', $_SESSION['alert'])) return;

            $title = addslashes($_SESSION['alert']['title']);
            $content = addslashes($_SESSION['alert']['content']);

            if(empty($title) || empty($content)) return;

            echo '<script>showModal("' . $title . '", "' . $content . '");</script>';
        }
    }

    private static function validateSession()
    {
        session_start();
    }
}

Example usage:

<html>
<head>
    <?php HeadGenerator::generate('Login', true); ?>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <script src="/includes/js/loginForm.js"></script>
</head>
<body>

<?php AlertGenerator::displayModal(); AlertGenerator::showAlert(); NavBarGenerator::defaultNav(); ?>

<div class="w3-container">
    [... website content ...]
</div>

<script>showModal('test', 'test of modal');</script>

</body>
</html>

Example usage creates modal only using at the bottom.

This is an error I receive: Uncaught TypeError: can't access property "text", title is null

My debug functions in the .js file don't send any output.

My expectations

I'd like to make the modal visible right after the showModal(x, y) function.

Additional notes:

When modal code is created by a PHP script, the console error mentioned above appears. When I include the modal code manually (commented modal template in the Example usage), a console error doesn't appear.

Does anyone know how can I resolve this issue?



Read more here: https://stackoverflow.com/questions/65043693/problem-with-displaying-a-modal-using-php-script

Content Attribution

This content was originally published by Scope12 at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: