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

Move your PHP after the JS function. PHP will parse the entire page and deliver it to the browser, where the JS is then evaluated. The problem you're having above is that the page that's delivered to the browser tries to execute a function that hasn't been created yet. — j08691
– j08691, Commented Oct 25, 2021 at 20:03
usually, if you're trying to pair client-side logic with server-side logic in this way, it means you have an architectural flaw and are thinking about the logic in the wrong way. Perhaps if you explain the principle as why and when you want this "error warning" to happen specifically, we could push you in the right direction. I would urge you to look into AJAX, in which case you might even be able to think of a solution all by yourself. Also as a note, try not to simplify your problem, but present it "as is", unless you are extremely confident in what you are presenting. — Martin
– Martin, Commented Oct 25, 2021 at 20:04
@sebtheoo you can store the value of the error message to a variable and check for that variable at the bottom of your page after your js files are initialized then print the script tag . also your script tag should be inside of the HTML tag before </body> or in <head> . — pfndesign
– pfndesign, Commented Oct 25, 2021 at 21:17

Mohammed Khurram · Accepted Answer · 2021-10-26 07:33:23Z

2

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 .js file 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 .php file 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/[email protected]/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.

answered Oct 26, 2021 at 7:33

Mohammed Khurram

6361 gold badge8 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sebtheoo Over a year ago

I've decided to put the php after the js and it's worked now. Thanks, although I'd rather use my own notifications but the sweetalert does seem like a nice option.

Tschogge · Accepted Answer · 2021-10-26 07:47:52Z

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>";

?>

Collectives™ on Stack Overflow

How to call a javascript function script from php

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related