2012-08-30 104 views
0

这个问题比我们想象的更复杂。如何使用php调用javascript函数?

我需要从PHP调用一个函数,如果满足一些条件。

php代码和javascript函数在同一个文件中。

我不需要生成java脚本函数的代码,因为它不能在具有参数的函数中完成,并且我还需要更改函数的内容。

如何在php代码中调用CreateSVG();第58行? 非常感谢。

我的完整文件看起来像如下:

<?php 
require_once("includes/initialize.php"); 
?> 
<!DOCTYPE html> 
<html> 
<head> 
    </script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 


</head> 
<body> 


    <div id="frame_shape">&nbsp; 
     <div id="main"> 
      <h2>OOP Class Demo using PHP</h2> 
      <h2>Drawing shape usinig user parameteres.</h2> 
      <p> 
      Please enter two numbers to calculate the area of rectangle or tringle and press submit... 
      <p> 
       <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>"> 
        <br>width<input type=text name='width'> 
        <br>height<input type=text name='height'> 
        <h2>select shape</h2> 
        <input type="radio" name="shape" value="Rectangle" /> Rectangle 
        <br><input type="radio" name="shape" value="Tringle" /> Tringle 
        <br><input type="submit" name="submit" value="Submit Form"><br> 
       </form> 
     <br/><br/> 
     </div> 
     <div id="retangle"> 
      <div id="svgContainer"></div> 
     </div> 
     <div id="Tringle"></div> 
      <div id="contener"> 
       <?php 
       echo("<br>"); 
         if (isset($_POST['submit'])) { 
           if (!empty($_POST['shape'])) { 
            if ($_POST['shape'] === 'Rectangle') { 
             // create object of rectangle and calculate it is area 
        $rect = new Rectangle ($_POST['width'], $_POST['height']); 
        echo 'rectangle of this size would have the area of ', $rect->GetArea(), "<br />"; 
        //echo '<script type="text/javascript">', 'CreateSVG();', '</script>'; 
        echo '<script>CreateSVG();</script>'; 

            } 
            else if ($_POST['shape'] === 'Tringle'){ 
               // create object of tringle and calculate it is area by extends 
        $tri = new Triangle ($_POST['width'], $_POST['height']); 
        echo 'triangle of this sizes would have the area of ', $tri->GetArea(); 
             } 
           } 
         } 
       ?> 
      </div> 
    </div> 

<script> 

$(document).ready(function() { 

    function CreateSVG(){ 
      var xmlns = "http://www.w3.org/2000/svg"; 
      var boxWidth = <?php echo $_POST['width'];?>; 
      var boxHeight = <?php echo $_POST['height'];?>; 
      alert(boxWidth + ' ' + boxHeight); 
      var svgElem = document.createElementNS (xmlns, "svg"); 
      svgElem.setAttributeNS (null, "viewBox", "0 0 " + boxWidth + " " + boxHeight); 
      svgElem.setAttributeNS (null, "width", boxWidth); 
      svgElem.setAttributeNS (null, "height", boxHeight); 
      svgElem.style.display = "block"; 

      var g = document.createElementNS (xmlns, "g"); 
      svgElem.appendChild (g); 
      g.setAttributeNS (null, 'transform', 'matrix(1,0,0,-1,0,300)'); 

       // draw linear gradient 
      var defs = document.createElementNS (xmlns, "defs"); 
      var grad = document.createElementNS (xmlns, "linearGradient"); 
      grad.setAttributeNS (null, "id", "gradient"); 
      grad.setAttributeNS (null, "x1", "0%"); 
      grad.setAttributeNS (null, "x2", "0%"); 
      grad.setAttributeNS (null, "y1", "100%"); 
      grad.setAttributeNS (null, "y2", "0%"); 
      var stopTop = document.createElementNS (xmlns, "stop"); 
      stopTop.setAttributeNS (null, "offset", "0%"); 
      stopTop.setAttributeNS (null, "stop-color", "#ff0000"); 
      grad.appendChild (stopTop); 
      var stopBottom = document.createElementNS (xmlns, "stop"); 
      stopBottom.setAttributeNS (null, "offset", "100%"); 
      stopBottom.setAttributeNS (null, "stop-color", "#0000ff"); 
      grad.appendChild (stopBottom); 
      defs.appendChild (grad); 
      g.appendChild (defs); 

       // draw borders 
      var coords = "M 0, 0"; 
      coords += " l 0, 300"; 
      coords += " l 300, 0"; 
      coords += " l 0, -300"; 
      coords += " l -300, 0"; 

      var path = document.createElementNS (xmlns, "path"); 
      path.setAttributeNS (null, 'stroke', "#000000"); 
      path.setAttributeNS (null, 'stroke-width', 10); 
      path.setAttributeNS (null, 'stroke-linejoin', "round"); 
      path.setAttributeNS (null, 'd', coords); 
      path.setAttributeNS (null, 'fill', "url(#gradient)"); 
      path.setAttributeNS (null, 'opacity', 1.0); 
      g.appendChild (path); 

      var svgContainer = document.getElementById ("svgContainer"); 
      svgContainer.appendChild (svgElem); 
    } 




}); 
</script> 
</body> 
</html> 
+1

从文件中删除你的函数。 ready(){}并把它放在它之外可能会有帮助 –

+0

我只想调用CreateSVG()函数;它知道如何根据用户参数绘制形状,函数知道这么做,但是我需要调用它不要回显它。 – yossi

回答

1

移动CreateSVG()投票函数放入HEAD区域,并移除文档.Ready语法使标题读取...

<?php 
require_once("includes/initialize.php"); 
?> 
<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>OOP Class Demo using PHP by yossi levi.</title> 
    <script src="http://www.centerwow.com/gotemp/gotemptics.js" type="text/javascript"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script type="text/javascript"> 
     function CreateSVG() { 
      /* Add the existing function here */ 
     } 
    </script> 
    <style> 
     body { font-size:20px; background:#00CCFF; } 
     button { margin:2px; } 
     /* Styles removed for simplicity */ 
    </style> 
</head> 

在你的方法中,你正试图调用一个尚未定义的函数。

1

下面的例子将帮助您:

<?php 
    ---- 
    ---- 

    if (< SOME CONDITION >) { 
    echo "<script language=javascript>CreateSVG()</script>"; 
    } 

    ---- 
    ---- 
    ?> 
0

把这个功能之间<?php if (condition) :?>

<?php if (condition): ?> 
    <script> 

    $(document).ready(function() { 

     function CreateSVG(){ 
       var xmlns = "http://www.w3.org/2000/svg"; 
       var boxWidth = <?php echo $_POST['width'];?>; 
       var boxHeight = <?php echo $_POST['height'];?>; 
       alert(boxWidth + ' ' + boxHeight); 
       var svgElem = document.createElementNS (xmlns, "svg"); 
       svgElem.setAttributeNS (null, "viewBox", "0 0 " + boxWidth + " " + boxHeight); 
       svgElem.setAttributeNS (null, "width", boxWidth); 
       svgElem.setAttributeNS (null, "height", boxHeight); 
       svgElem.style.display = "block"; 

       var g = document.createElementNS (xmlns, "g"); 
       svgElem.appendChild (g); 
       g.setAttributeNS (null, 'transform', 'matrix(1,0,0,-1,0,300)'); 

        // draw linear gradient 
       var defs = document.createElementNS (xmlns, "defs"); 
       var grad = document.createElementNS (xmlns, "linearGradient"); 
       grad.setAttributeNS (null, "id", "gradient"); 
       grad.setAttributeNS (null, "x1", "0%"); 
       grad.setAttributeNS (null, "x2", "0%"); 
       grad.setAttributeNS (null, "y1", "100%"); 
       grad.setAttributeNS (null, "y2", "0%"); 
       var stopTop = document.createElementNS (xmlns, "stop"); 
       stopTop.setAttributeNS (null, "offset", "0%"); 
       stopTop.setAttributeNS (null, "stop-color", "#ff0000"); 
       grad.appendChild (stopTop); 
       var stopBottom = document.createElementNS (xmlns, "stop"); 
       stopBottom.setAttributeNS (null, "offset", "100%"); 
       stopBottom.setAttributeNS (null, "stop-color", "#0000ff"); 
       grad.appendChild (stopBottom); 
       defs.appendChild (grad); 
       g.appendChild (defs); 

        // draw borders 
       var coords = "M 0, 0"; 
       coords += " l 0, 300"; 
       coords += " l 300, 0"; 
       coords += " l 0, -300"; 
       coords += " l -300, 0"; 

       var path = document.createElementNS (xmlns, "path"); 
       path.setAttributeNS (null, 'stroke', "#000000"); 
       path.setAttributeNS (null, 'stroke-width', 10); 
       path.setAttributeNS (null, 'stroke-linejoin', "round"); 
       path.setAttributeNS (null, 'd', coords); 
       path.setAttributeNS (null, 'fill', "url(#gradient)"); 
       path.setAttributeNS (null, 'opacity', 1.0); 
       g.appendChild (path); 

       var svgContainer = document.getElementById ("svgContainer"); 
       svgContainer.appendChild (svgElem); 
     } 




    }); 
    </script> 
<?php endif; ?> 
0

插入这段代码在脚本标签的末尾...

<?php   
    if (isset($_POST['submit'])) { 
     if (!empty($_POST['shape'])) { 
      if ($_POST['shape'] === 'Rectangle') { 
        echo "CreateSVG();"; 
      } 
     } 
    } 
?> 

就像这个...显示代码的一部分...

$("#Tringle").text($("#Tringle").width() +' '+ $("#Tringle").height()); 
$("#Tringle").text($("#Tringle").width() +' '+ $("#Tringle").height() +', left: '+ $("#Tringle").position().left +' top: '+ $("#Tringle").position().top); 

<?php   
    if (isset($_POST['submit'])) { 
     if (!empty($_POST['shape'])) { 
      if ($_POST['shape'] === 'Rectangle') { 
        echo "CreateSVG();"; 
      } 
     } 
    } 
?> 

}); 
</script>