JavaScript doesn't work with php echo

Question 1

I'm having a problem with php javaScript echo. I wanna fire a javaScript functions for buttons which are dynamically created by using echo.

When i test it without echo, functions are using properly. But when I create it using echo, it doesn't work.

Here is the echo in pages.php:

$cont.='<div style="border-bottom: 1px solid #A2DBFF; padding-bottom: 25px; padding-top: 20px; margin-bottom: 10px; margin-left: 25px;">';
$cont.='<div class="SUBH">
 <input type="text" id="txtNEWHEADING" name="txtSubNam" placeholder="The new heading" />
 </div>';
$cont.='<div class="PTAG">
 <p>
 <textarea rows="5" id="disNEWCONT" cols="70" placeholder="add a discription here.." name="txtCont"></textarea>
 </p>
 </div>';
$cont.='<div class="IMGTAG">
 <input type="file" id="imgNewIMAGE" />
 <button class="btnSav" type="submit" onclick="SaveContent()" id="btnNEWCONTENT" style="margin-left: 300px;" />save</button>
 </div>';
$cont .= '</div>';

And the javaScript is here:

$cont .= '
 <script type="text/javascript">
 $("#btnNEWCONTENT").click(function(){
 alert("hi there..");
 $.ajax({ url: \'ajax.php\',
 data: {action: \'test\'},
 type: \'post\',
 success: function(data) {
 alert(data);
 }
 });
 }); 
 </script>
 ';
echo $cont;

Please help.

Question 2

When did jQuery library load?

Question 3

There is no reason that 2 identical HTML pages would work differently, can you post those 2 pages?

Question 4

PHP is just generating the output sent to the browser. View Source in your browser to see what it output, and see if you can spot where it is not what you wanted.

Question 5

You also may want to read up on HEREDOC strings.

Question 6

Can you show the result output on browser?

Question 7

This code is working for me ,added jquery between head , and wraped javascript into function:

<html>
<head>
 <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
</head>
<body>
<?php
 $cont='<div style="border-bottom: 1px solid #A2DBFF; padding-bottom: 25px; padding-top: 20px; margin-bottom: 10px; margin-left: 25px;">';
 $cont.='<div class="SUBH">
 <input type="text" id="txtNEWHEADING" name="txtSubNam" placeholder="The new heading" />
 </div>';
 $cont.='<div class="PTAG">
 <p>
 <textarea rows="5" id="disNEWCONT" cols="70" placeholder="add a discription here.." name="txtCont"></textarea>
 </p>
 </div>';
 $cont.='<div class="IMGTAG">
 <input type="file" id="imgNewIMAGE" />
 <button class="btnSav" type="submit" onclick="SaveContent()" id="btnNEWCONTENT" style="margin-left: 300px;" />save</button>
 </div>';
$cont.='</div>';
$cont.='
 <script type="text/javascript">
 function SaveContent(){
 $("#btnNEWCONTENT").click(function(){
 alert("hi there..");
 $.ajax({ url: \'ajax.php\',
 data: {action: \'test\'},
 type: \'post\',
 success: function(data) {
 alert(data);
 }
 });
 }); } 
 </script>
 ';
 echo $cont;
?>
</body>
</html>

Charaf JRA 8,3551 gold badge36 silver badges45 bronze badges · Accepted Answer · 2013-09-29 04:01:13Z

This code is working for me ,added jquery between head , and wraped javascript into function:

<html>
<head>
 <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
</head>
<body>
<?php
 $cont='<div style="border-bottom: 1px solid #A2DBFF; padding-bottom: 25px; padding-top: 20px; margin-bottom: 10px; margin-left: 25px;">';
 $cont.='<div class="SUBH">
 <input type="text" id="txtNEWHEADING" name="txtSubNam" placeholder="The new heading" />
 </div>';
 $cont.='<div class="PTAG">
 <p>
 <textarea rows="5" id="disNEWCONT" cols="70" placeholder="add a discription here.." name="txtCont"></textarea>
 </p>
 </div>';
 $cont.='<div class="IMGTAG">
 <input type="file" id="imgNewIMAGE" />
 <button class="btnSav" type="submit" onclick="SaveContent()" id="btnNEWCONTENT" style="margin-left: 300px;" />save</button>
 </div>';
$cont.='</div>';
$cont.='
 <script type="text/javascript">
 function SaveContent(){
 $("#btnNEWCONTENT").click(function(){
 alert("hi there..");
 $.ajax({ url: \'ajax.php\',
 data: {action: \'test\'},
 type: \'post\',
 success: function(data) {
 alert(data);
 }
 });
 }); } 
 </script>
 ';
 echo $cont;
?>
</body>
</html>

CollectivesTM on Stack Overflow

JavaScript doesn't work with php echo

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Linked

Hot Network Questions

CollectivesTM on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Linked

Related