mythri Posted April 27 Share Posted April 27 In a php script i am trying to display all messages include error, info, warning and success messages inside a <div> tag at starting of every page after <header></header> and inside <body> tag as used in WebERP. In my script, its displays above the footer which is end of the page. Here are my code Php function for message include('MiscFunctions.php'); <?php function prnMsg($Msg, $Type = 'info', $Prefix = '') { global $Messages; $Messages[] = array($Msg, $Type, $Prefix); } ?> in footer.php i have these lines to collect all the messages <?php if (isset($Messages) and count($Messages) > 0) { foreach ($Messages as $Message) { $Prefix = ''; switch ($Message[1]) { case 'error': $Class = 'error'; $Prefix = $Prefix ? $Prefix : 'ERROR' . ' ' . 'Report'; echo '<div class="alert alert-custom alert-danger fade show mb-5 ' . $Class . '" role="alert"> <div class="alert-icon"> <i class="flaticon-warning"></i> </div> <div class="alert-text"><strong>' . $Prefix . '</strong> : ' . $Message[0] . '</div> <div class="alert-close"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true"> <i class="ki ki-close"></i> </span> </button> </div> </div>'; break; case 'warn': case 'warning': $Class = 'warn'; $Prefix = $Prefix ? $Prefix : 'WARNING' . ' ' . 'Report'; echo '<div class="alert alert-custom alert-warning fade show mb-5 Message ' . $Class . ' noPrint" role="alert"> <div class="alert-icon"> <i class="flaticon2-warning"></i> </div> <div class="alert-text"><strong>' . $Prefix . '</strong> : ' . $Message[0] . '</div> <div class="alert-close"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true"> <i class="ki ki-close"></i> </span> </button> </div> </div> '; break; case 'success': $Class = 'success'; $Prefix = $Prefix ? $Prefix : 'SUCCESS' . ' ' . 'Report'; echo '<div class="alert alert-custom alert-success fade show mb-5 Message ' . $Class . ' noPrint" role="alert"> <div class="alert-icon"> <i class="flaticon-like"></i> </div> <div class="alert-text"><strong>' . $Prefix . '</strong> : ' . $Message[0] . '</div> <div class="alert-close"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true"> <i class="ki ki-close"></i> </span> </button> </div> </div> '; break; case 'info': default: $Prefix = $Prefix ? $Prefix : 'INFORMATION' . ' ' . 'Message'; $Class = 'info'; echo '<div id="MessageContainerFoot"> <div class="Message ', $Class, ' noPrint"> <span class="MessageCloseButton">×</span> <b>', $Message[2], '</b> : ', $Message[0], ' </div> </div>'; } } } ?> <footer class="content-footer footer bg-footer-theme bg-dark">---- </footer> To display messages on top of the page i append messages from footer to header i have - MiscFunctions.js function initial() { document.getElementById('MessageContainerHead').appendChild( document.getElementById('MessageContainerFoot') ); document.getElementById('MessageContainerFoot').style["display"] = "block"; var close = document.getElementsByClassName("MessageCloseButton"); var i; for (i = 0; i < close.length; i++) { close[i].onclick = function(){ var div = this.parentElement; div.style.opacity = "0"; setTimeout(function(){ div.style.display = "none"; }, 600); } } } window.onload=initial; in css i have a line #MessageContainerFoot { display: none; } initial function is called like this <body onLoad="initial();"> After body tag i use <div id="MessageContainerHead"></div> to display message. In any page if i call prnMsg function like this prnMsg('The account name already exists in the database','error'); message displays in footer area/ end of the page. it is not getting displayed in <div id="MessageContainerHead"></div> i am not getting what is wrong. Can somebody help Quote Link to comment Share on other sites More sharing options...
requinix Posted April 27 Share Posted April 27 Have you checked for Javascript errors? Are you sure your initial function is running? Is it possible the element did move after all and it's just not displaying how you expect it to? You have a process for doing the work. Check it, step by step, to find out where it stops working. Quote Link to comment Share on other sites More sharing options...
mythri Posted April 28 Author Share Posted April 28 Yes, I tried console.log() and alert() to check each line and function. In initial function it is giving Quote Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'. at document.getElementById('MessageContainerHead').appendChild( document.getElementById('MessageContainerFoot') ); i tried doing var d= document.createElement("div"); d.classList.add("MessageContainerFoot"); document.getElementById("MessageContainerHead").appendChild(d); But from next part document.getElementById('MessageContainerFoot').show["display"] = "block"; won't work . Quote Link to comment Share on other sites More sharing options...
requinix Posted April 28 Share Posted April 28 Looking closer, 1. You only use a #MessageContainerFoot for info-level messages. 2. You repeat that for every info message, which means you'll potentially use the same "MessageContainerFoot" ID for more than one element, which is wrong. Think about exactly what you want to do, then check your code from top to bottom to make sure that it is working the way you wanted it to. Because there's clearly some disconnect between "put #MessageContainerFoot into #MessageContainerHead" and "only use #MessageContainerFoot for info messages". Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.