CODEWITHSUNDEEP
javascriptphphtmljquerycss
anon
anon

Reputation:

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?

EDIT ALPHA

I forgot that I used functions to create < head >. You can be sure that all the required scripts are included.

Upvotes: 0

Views: 71

Answers (1)

loa_in_
loa_in_

Reputation: 1011

When you call <?php AlertGenerator::displayModal(); AlertGenerator::showAlert();[...] you get the modal HTML and result of echo '<script>showModal("' . $title . '", "' . $content . '");</script>'; right next to each other.

When the page loads, the <script>showModal(...)</script> part gets run before the page finishes loading. showModal() accesses title but it's not set yet! title is set only after page is loaded, i.e. in jQuery's $.ready() callback.

Upvotes: 1

Related Questions