CODEWITHSUNDEEP
javascriptphpjqueryhtml
Dranreb
Dranreb

Reputation: 313

Javascript Function to be called in PHP

I have this javascript function which allows me to create my custom alerts by calling it using this <script>Alert.render('message goes here');</script>

Javascript:

<script>
function CustomAlert(){
    this.render = function(dialog){
      var winW = window.innerWidth;
      var winH = window.innerHeight;
      var dialogoverlay = document.getElementById('dialogoverlay');
      var dialogbox = document.getElementById('dialogbox');
      dialogoverlay.style.display = "block";
      dialogoverlay.style.height = winH+"px";
      dialogbox.style.left = (winW/2) - (550 * .5)+"px";
      dialogbox.style.top = "200px";
      dialogbox.style.display = "block";
      document.getElementById('dialogboxhead').innerHTML = "Image Upload Error!";
      document.getElementById('dialogboxbody').innerHTML = dialog;
      document.getElementById('dialogboxfoot').innerHTML = '<button id = "buttonclose" onclick="Alert.ok()">ok</button>';

    }
    this.ok = function(){
      document.getElementById('dialogbox').style.display = "none";
      document.getElementById('dialogoverlay').style.display = "none";
    }
}
var Alert = new CustomAlert();

HTML:

<div id = "dialogoverlay"></div>
<div id = "dialogbox">
  <div>
    <div id = "dialogboxhead"></div>
    <div id = "dialogboxbody"></div>
    <div id = "dialogboxfoot"></div>
  </div>
</div>

Inside the html, I tried calling in the function(Alert.render...) and worked. However, when I tried calling it in the php above the html :

echo "<script>Alert.render('message goes here');</script>";

It doesn't work at all. Any ideas?

UPDATE

Here's the php code:

<?php

if(isset($_POST['btn_sample'])){
  echo "<script>Alert.render('sample message');</script>";
}

I added this on the html:

<form action = "" method = "post">
  <input type = "submit" name = "btn_sample" value = "sample">
</form>

Upvotes: 1

Views: 58

Answers (2)

prasanth
prasanth

Reputation: 22510

Check this ,

  1. I think you are execute the php script before document load .
  2. Or php included html not containing the link of the this js script file.

And call the Js function after window.onload like this.They will prevent the first one

echo "<script>window.onload=function(){Alert.render('message goes here');}</script>";

Upvotes: 1

Jonas Zell
Jonas Zell

Reputation: 126

Your render function relies on the elements "dialogoverlay", "Dialogbox", etc. already existing, which they don't if you call the function above your HTML.

You need to either bind your Alert.render() call to the DOMContentLoaded event or just put your scripts at the bottom of your body, which tends to be the preferred practice nowadays.

Upvotes: 0

Related Questions