<?php
echo "<script type='text/javascript'>error_warning('Error!'); </script>";
?>
<!DOCTYPE html>
<html stuff>
<div id="alert_box" class="alert"></div>
</html stuff>
<script type="text/javascript">
function error_warning(warning){
var div = document.getElementById('alert_box')
div.style.display='block';
div.textContent=warning;
setTimeout(function(){ div.style.display = "none"; }, 5000);
}
</script>
This code is heavily simplified down but the key values are presented. I am trying to run a Javascript function at the bottom of the code from php. In the full code, the php echoes that script when something occurs. I have tried similar code:
echo "<script> alert('Error!') </script>";
This works but I'd rather create my own alert message which occurs in the top right corner of the page. The div is set to display: none, but I'm trying to run call the function which sets the display: block. All the css is dealt with and I have tested it works with a button.
I am running my code on XAMPP apache mysql. This is the error type when loading the page:
Uncaught ReferenceError: error_warning is not defined
at account.php:1
What I've gathered is that as the php is running server side, that the function is not defined so it can't see it hence returning the error. I've tried several solutions like putting the script before the php and they haven't worked.
Can anyone help?
Thanks
The solutions for this problem are...
for this you can use some server side variable to active the function call at the end of the page.
<script> function popAlert(errorType){//do something} </script>
<?php if($error == 1) echo "<script>popAlert(1);</script>";?>
.js file and include it in your page.<?php
if($error == 1) echo "<script>popAlert(1);</script>";
?>
<script src="errors.js"></script>
.php file and then determine what needs to be popped upEx:-
$.post("url", "data", function(data, status){
if(status == "success"){
if(data == 1) popAlert(1);
if(data == 2) popAlert(2);
}
});
Extras
I recommend you to use Sweat alerts reference here
Ex:-
function popAlert(type){
if(type == 1){
Swal.fire({
icon: 'success',
title: 'You did it...!'
})
}
if(type == 2){
Swal.fire({
icon: 'error',
title: 'Oops, something went wrong...!'
})
}
}<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10.10.1/dist/sweetalert2.all.min.js"></script>
<h1>Click on buttons to pop alert</h1>
<button onclick='popAlert(1)'> success </button><br/>
<button onclick='popAlert(2)'> error </button><br/>For any queries comment down.
There are multiple options to do this. Ajax or a simple echo. But for your problem, it is enough to simply add the onload function to the script echo.
<?php
echo "<script type='text/javascript'>window.onload = () => {error_warning('Error!')}; </script>";
?>
Another possible option would be to call the function after it has been declared.
<!DOCTYPE html>
<html stuff>
<div id="alert_box" class="alert"></div>
</html stuff>
<script type="text/javascript">
function error_warning(warning){
var div = document.getElementById('alert_box')
div.style.display='block';
div.textContent=warning;
setTimeout(function(){ div.style.display = "none"; }, 5000);
}
</script>
<?php
echo "<script type='text/javascript'>error_warning('Error!'); </script>";
?>