Displaying every messages at a global place

mythri · 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">&times;</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

requinix · April 27

:psychic:

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.

mythri · 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 .

requinix · 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".

Sign In

Displaying every messages at a global place

Recommended Posts

mythri

Link to comment

Share on other sites

requinix

Link to comment

Share on other sites

mythri

Link to comment

Share on other sites

requinix

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information