6 Replies - 4364 Views - Last Post: 05 August 2012 - 02:18 PM

#1 oldnewbie  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 64
  • Joined: 16-December 11

php <div> will not execute Javascript code

Posted 04 August 2012 - 01:42 PM

I have some php code echoing an html table and within that table a <div> tag. Then I have a Javascript function to print the div portion of my form. But when I hit the "print" button it doesn't do anything. When replacing the function with
window.print() that works. Can anyone see what might be wrong with my code? Does it have to do with the <div> being in the php and being echoed? Any help is appreciated. Below is my code. It seems the function is not recognizing the <div>.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<meta name="keywords" content="">
	<meta name="description" content="">
	<title>Title</title>

<!-- Print the form -->	
<script type="text/javascript">

function printDiv() 
{ 
  var divToPrint=document.getElementById('OutputTable');   
  var newWin=window.open('','Print-Window','width=100,height=100'); 
  newWin.document.open(); 
  newWin.document.write('<html><body onload="window.print()">'+divToPrint.innerHTML+'</body></html>'); 
  newWin.document.close(); 
  setTimeout(function(){newWin.close();},10); 
}

</script>

</head>

<body>

<?php

echo '<div id = "OutputTable"> ';
echo '<form>';
echo " <table width=500 cellspacing=0 cellpadding=5 border=0 bgcolor='FFFFFF'>";
echo '<th><img src="image.jpg" alt="" align="right"></th> ';
echo '<tr> ';
echo '<td>Some text here</td> ';
echo '</tr> ';
echo " <tr><td align=center colspan=2><input type='submit' value='Print' onclick='printDiv()'></td></tr> ";
echo '	</table> ';		
echo '</form> ';
echo '</div> ';

?>

</body>

</html>


This post has been edited by oldnewbie: 04 August 2012 - 01:44 PM


Is This A Good Question/Topic? 0
  • +

Replies To: php <div> will not execute Javascript code

#2 CTphpnwb  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3079
  • View blog
  • Posts: 10,804
  • Joined: 08-August 08

Re: php <div> will not execute Javascript code

Posted 04 August 2012 - 03:08 PM

By the time Javascript is doing anything on the client PHP has finished processing on the server. Moving to Javascript.
Was This Post Helpful? 1
  • +
  • -

#3 oldnewbie  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 64
  • Joined: 16-December 11

Re: php <div> will not execute Javascript code

Posted 05 August 2012 - 07:31 AM

CTphpnwb, I'm not sure if I understand what you mean (being very new at this). Can you explain a little bit more? Do you mean that I should have my Javascript code within the php code (like start <?php and echo at the <!DOCTYPE>) part? Thanks.
Was This Post Helpful? 0
  • +
  • -

#4 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3730
  • View blog
  • Posts: 6,017
  • Joined: 08-June 10

Re: php <div> will not execute Javascript code

Posted 05 August 2012 - 08:59 AM

You need to understand the difference between the server-side processing and the client-side processing.

When you request a PHP page, the server computer takes the PHP page you requested and executes all the PHP code inside it. It then takes whatever output PHP generated and sends that to the client browser. The client browser then shows the HTML and CSS, and executes any Javascript code on the client computer.

So, you see, when your Javascript code is being executed, the PHP code has long since finished executing. The browser doesn't even know, nor care, that the Javascript, HTML and CSS it is showing was generated by PHP.

oldnewbie said:

I have some php code echoing an html table...

Why are you using PHP for that? Is there any reason why you wouldn't just write the HTML table into the page without the PHP? Like, are you using a PHP variable in the table, or somehow using PHP code to alter how the table is displayed based on user input?

If you don't need to use PHP, then don't. There is absolutely no difference between doing this:
<!DOCTYPE HTML>
<html>
<head>
    <title>A test page</title>
</head>
<body>
<?php
    echo "    <h1>A test page</h1>\n";
    echo "    <p>This is a test page!</p>\n";
?>
</body>
</html>


And this:

<!DOCTYPE HTML>
<html>
<head>
    <title>A test page</title>
</head>
<body>
    <h1>A test page</h1>
    <p>This is a test page!</p>
</body>
</html>



In fact, if you put the first snippet into a PHP page and execute it, you will see what is in the second snippet in your browser's View Source window. The PHP code in the first snippet generates the HTML in the second snippet, so if the PHP code will always produce the same exact HTML, remove PHP from the equation and just write the HTML on it's own.

oldnewbie said:

But when I hit the "print" button it doesn't do anything.

Testing this over here, I found two potential issues in your printDiv() function.

First, the setTimeout at the bottom was closing the new window in Firefox before the print dialog could show up, causing nothing to happen but a short flash of the new window. In the other browsers, it didn't seem to do anything at all, so you may as well remove it. - Why is it there in the first place? To hide the new window and show only the print dialog? That won't work, as Chrome uses the window as the print dialog.

And second, in IE you don't seem to be allowed to use - in the name of the window. So "Print-Window" would fail, but "PrintWindow" would work.


Also, one more thing. In your new window, you don't include a Doctype Declaration. If your intent is to print the OutputTable as it is in the main document, you should include a Doctype in the new window as well. The way a HTML page looks can differ drastically when you add or remove the doctype from the page. Without a doctype, browsers revert to Quirks Mode, which basically means they try to be as backwards compatible and as forgiving of coding errors as possible, sacrificing some standards support in the process. - The moral of this story: Always use a Doctype in HTML pages!
Was This Post Helpful? 1
  • +
  • -

#5 oldnewbie  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 64
  • Joined: 16-December 11

Re: php <div> will not execute Javascript code

Posted 05 August 2012 - 09:44 AM

Thank you, Atli, for taking a look and explaining things (although I'm not sure I understand all of it). I only posted a snippet of my code, but what my page is doing is:
1) User clicks on a link which opens a 2-page form for them to enter data into.
2) Upon "save" the data is saved into a MySQL db AND another 2-page form opens up with the populated data and a "print" button so that the user can then print the completed form.

So I am using PHP to populate the second form. Would it then be correct to use PHP in this situation?
Was This Post Helpful? 0
  • +
  • -

#6 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3730
  • View blog
  • Posts: 6,017
  • Joined: 08-June 10

Re: php <div> will not execute Javascript code

Posted 05 August 2012 - 10:11 AM

Yes. That's a perfect use of PHP.

I'd suggest you look into the concept of Code Separation though. It makes long PHP scripts a lot easier to deal with. - If you are mixing a lot of PHP and HTML (and sometimes even CSS and Javascript) code together in a single page, it can get very frustrating to work with. Separating the PHP code from the others fixes a lot of that.
Was This Post Helpful? 1
  • +
  • -

#7 oldnewbie  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 64
  • Joined: 16-December 11

Re: php <div> will not execute Javascript code

Posted 05 August 2012 - 02:18 PM

Thank you. Yes, I'm pretty new to PHP but I'll check out the CodeSeparation link you provided. Again, thank you for your help and explanations!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1