How to call a javascript function script from php
Question
<?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
2 answers
solution1
1 2021-10-26 07:33:23
The solutions for this problem are...
- Call function after it is defined.
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>";?>
- Put your function in a separate
.jsfile and include it in your page.
<?php
if($error == 1) echo "<script>popAlert(1);</script>";
?>
<script src="errors.js"></script>
- Use Ajax to get response from
.phpfile and then determine what needs to be popped up
Ex:-
$.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.
solution2
1 2021-10-26 07:47:52
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>";
?>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.