показывать php вывод эха только в специально созданном div, а не на главной странице - PullRequest
Новая
       28

показывать php вывод эха только в специально созданном div, а не на главной странице

0 голосов
/ 17 июня 2020

Я пытаюсь показать сообщения об ошибках в div (с эффектом наложения), которые отображаются эхом при возникновении ошибки на стороне сервера. Все работает нормально, за исключением того, что ошибка также отображается на главной странице в течение секунды или около того, прежде чем фактический div будет показан на главной странице. Я сослался на множество решений, но, похоже, ничто не останавливает нежелательное отображение эха на главной странице до того, как будет показан фактический div. Я использую PHP и не эксперт в этом. Помощь в этом отношении будет очень признательна. Код php, который я поместил в самом начале страницы, то есть перед тегом: 

<?php
session_start();
ob_start();
if(isset($_POST["submit"])){
$fname = filter_input(INPUT_POST, 'fname');
$lname = filter_input(INPUT_POST, 'lname');
$email = filter_input(INPUT_POST, 'email');
$concept = filter_input(INPUT_POST, 'concept');
$design = filter_input(INPUT_POST, 'design');
$pformance = filter_input(INPUT_POST, 'pformance');
$features = filter_input(INPUT_POST, 'features');
$service = filter_input(INPUT_POST, 'service');
$support = filter_input(INPUT_POST, 'support');
$ucomments = filter_input(INPUT_POST, 'message');
date_default_timezone_set("Asia/Kolkata");
$date= date("Y-m-d");
$time= date("H:i:s");
$hash= md5(rand(0,1000));
// validate inputs
if(empty($fname)){
    $errors[] = "First name left blank";
}
elseif((!preg_match('/^[A-Z][a-z]{3,19}$/',$fname))) {
    $errors[] = "Error in first name";
}
if(empty($lname)){
    $errors[] = "Last name left blank";
}
elseif((!preg_match('/^[A-Z][a-z]{2,19}$/',$lname))) {
    $errors[] = "Error in last name";
}
if(empty($email)){
    $errors[] = "Email-Id left blank";
}
elseif((!preg_match('/^[A-Za-z0-9_]+\@[A-Za-z0-9_]+\.[A-Za-z0-9_]+/',$email))) {
    $errors[] = "Invalid Email-Id";
}
if ($concept==NULL){
    $errors[] = "View on Concept reqd.";
}
if ($design==NULL){
    $errors[] = "View on Design reqd.";
}
if ($pformance==NULL){
    $errors[] = "View on Performance reqd.";
}
if ($features==NULL){
    $errors[] = "View on Features reqd.";
}
if ($service==NULL){
    $errors[] = "View on Service reqd.";
}
if ($support==NULL){
    $errors[] = "View on Support reqd.";
}
if(empty($ucomments)){
    $errors[] = "Enter suggestions";
}
elseif((!preg_match('/^[A-Z1-9][a-zA-Z0-9\s,.-]{3,}$/',$ucomments))) {
    $errors[] = "Error in suggestion";
}
if($errors){
echo '<div class="alertboxoc">';
echo '<div id="emsg" class="alertboxmain">';
echo '<div class="alertboxhdr"><i class="fa fa-exclamation-circle" style="color:#FF0000"></i>&nbsp;<span style="color:#FF0000">Error</span></div>';
echo '<div class="alertboxerrors">';
echo '<ul class="aberrors">';
foreach ($errors as $error) {
echo '<li class="aberrors">' . $error . '</li>';
}
echo '</ul>';
echo '</div>';
echo '<div class="alertboxftr">Close</div>';
echo '</div>';
echo '</div>';
}
// if no error run insert sql
elseif(!$errors) {
    echo '<div class="alertboxoc">';
    echo '<div id="emsg" class="alertboxmain">';
    echo '<div class="alertboxhdr"><i class="fa fa-check-circle" style="color:#009900"></i>&nbsp;<span style="color:#009900">Success</span></div>';
    echo '<div class="alertboxinfo">Feedback successfully submitted.<br>Thank you!</div>';
    echo '<div class="alertboxftr">Close</div>';
    echo '</div>';
    echo '</div>';
}
}
ob_end_flush();
?>

css блока div, который должен отображаться эхом при возникновении ошибок, помещается в и выглядит следующим образом: 

<style>
        .alertboxoc {
            position:fixed;
            width:100%;
            height:100%;
            margin:0 auto;
            top:0;
            left:0;
            opacity:1;
            background-color:rgba(0, 0, 0, 0.5);
            z-index:2;
            box-sizing: border-box;
        }
        .alertboxmain {
            position:relative;
            top:5%;
            margin: 0 auto;
            padding:5px;
            width:280px;
            height:auto;
            overflow: auto;
            background-color:#FFFFFF;
            border:1px solid #021812;
            border-radius:4px;
            box-shadow: 1px 1px 1px #333333;
            box-sizing: border-box;
        }
        .alertboxhdr {
            margin:5px auto;
            width:96%;
            height:30px;
            text-align:left;
            line-height: 24px;
            font-family:"Arial";
            font-size: 16px;
            font-weight: normal;
            border-bottom:1px solid #333333;
            box-sizing: border-box;
        }
        .alertboxerrors {
            margin:5px auto;
            width:96%;
            min-height:160px;
            height:auto;
            overflow:auto;
            text-align:left;
            line-height: 22px;
            font-family:"Arial";
            font-size: 14px;
            font-weight: normal;
            height: 22px;
            color:#333333;
            box-sizing: border-box;
        }
        .alertboxinfo {
            margin:5px auto;
            width:96%;
            min-height:130px;
            height:auto;
            overflow:auto;
            text-align:center;
            line-height: 22px;
            vertical-align:middle;
            font-family:"Arial";
            font-size: 14px;
            font-weight: normal;
            height: 22px;
            color:#333333;
            box-sizing: border-box;
        }
        .alertboxftr {
            margin: 5px auto;
            width:96%;
            /*margin-bottom:5px;*/
            line-height: 24px;
            text-align:center;
            font-family:"Arial";
            font-size: 14px;
            font-weight: normal;
            color: #FFFFFF;
            cursor: pointer;
            background-color: #05920F;
            -webkit-transition: color 0.2s ease-in-out;
            -moz-transition: color 0.2s ease-in-out;
            -o-transition: color 0.2s ease-in-out;
            transition: color 0.2s ease-in-out;
            border:1px dotted #077A0F;
            border-radius: 3px;
            box-sizing: border-box;
        }
        .alertboxftr:hover {
            color: #FFFF66;
        }
        ul.aberrors {
            list-style-type: square;
            list-style-position: inside;
            padding-left: 5px;
            margin-top: 2px;
            margin-left: 5px;
            font-family: "Arial";
            font-size: 14px;
            color: #333333;
            padding-right:5px;
            text-align:justify;
        }
        ul li.aberrors {
            text-align: justify;
            line-height: 22px;
        }
</style>

1 Ответ

0 голосов
/ 17 июня 2020

Если вы выводите содержимое <body> level HTML до того, как будут проанализированы теги <head> и <style> документа, это приведет к ошибке sh нестилизованного содержимого, продолжительность которого будет зависеть от страницы. время рендеринга. Сначала вы выпаливаете кучу HTML (в пространстве, которое ему не принадлежит), а затем говорите: «О, эй, PS, пожалуйста, сделайте это так». Результатом будет структурно искаженный / недействительный документ HTML, который может отображаться в зависимости от используемого браузера.

Вы захотите скопировать HTML для своего div с ошибкой, и выводить его только как часть содержимого <body> (к которому относится вывод, видимый пользователем). Затем вместо следующего: 

if($errors){
    echo '<div class="alertboxoc">';
    echo '<div id="emsg" class="alertboxmain">';
    ...

После процедуры проверки вы должны сделать что-то вроде этого: 

if($errors){
    $error_html = '';
    $error_html .= '<div class="alertboxoc">';
    $error_html .= '<div id="emsg" class="alertboxmain">';
    ...

... а также избавиться от процедуры ob. И затем, в том месте вашего кода, где вы начинаете выводить <body> level HTML, просто: 

if (!empty($error_html)) {
    echo $error_html;
}

Не зная точно, как вы обрабатываете остальную часть вывода вашей страницы, это столько же в качестве ответа будет способ исправить глюк. Я верю, что это указывает вам правильное направление.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...