[php] PHP + JQuery - How to use these two together? Please see my example

I have a php based website. As in, all of the pages html is output via php.

Here is a simple example:

<?php
ob_start();

$pageStart = '
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MY WEBSITE PAGE</title>
</head>
<body>
<p>CONTENT</p>
</body>
</html>
';

echo $pageStart;
exit;
?>

What i would like to do is make use of some jquery in this page.

So naturally my first attempt was to include the script inside of the php variable like so:

<?php
ob_start();

$pageStart = '
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript">
    var datefield=document.createElement("input")
    datefield.setAttribute("type", "date")
    if (datefield.type!="date"){ //if browser doesn't support input type="date", load files for jQuery UI Date Picker
        document.write('<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />\n')
        document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"><\/script>\n')
        document.write('<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"><\/script>\n')
    }
</script>

<script type="text/javascript">
if (datefield.type!="date"){ //if browser doesn't support input type="date", initialize date picker widget:
    jQuery(function($){ //on document.ready
        $('#birthday').datepicker();
    })
}
</script>

</head>
<body>
<p>CONTENT</p>
</body>
</html>
';

echo $pageStart;
exit;
?>

Now, I use dreamweavers code editor, which due to the syntax highlighting feature, will point out the masses of syntax errors produced in this.

So i at first attempted to slash out these errors. This failed.

So i tried changing the "s to 's, and visa versa, until the errors were gone. This failed too as it seems the script will not validate in this manner.

So i read a few tutorials, and found this one:

JavaScript and PHP may each bring great potential to any Web development effort, but they don't always play nice together. Read about the problems.

And the way I understand it, is that you'd need to include the js rather than have it as part of your php directly.

So have a file called page.php and another called jquery.php. So I decided to try and modify this idea to suite my problem.

So i started with something like this - index.php:

<?php
ob_start();

$pageStart = '
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MY WEBSITE PAGE</title>
'. include $_SERVER['DOCUMENT_ROOT'] . '/../../path/to/include/datepicker.php'.'
</head>
<body>
<p>CONTENT</p>
</body>
</html>
';

echo $pageStart;
exit;
?>

And - datepicker.php:

<script language="Javascript">
    var datefield=document.createElement("input")
    datefield.setAttribute("type", "date")
    if (datefield.type!="date"){ //if browser doesn't support input type="date", load files for jQuery UI Date Picker
        document.write('<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />\n')
        document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"><\/script>\n')
        document.write('<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"><\/script>\n')
    }
</script>
<script language="Javascript">
if (datefield.type!="date"){ //if browser doesn't support input type="date", initialize date picker widget:
    jQuery(function($){ //on document.ready
        $('#birthday').datepicker();
    })
}
</script>

Now there are no syntax errors in either page, great... So I try it, half expecting things to finally just work...

Nope... Fatal Error: failed to open stream: No such file or directory blah blah. This error relates to the include that i added. So okay, even though the file is there, it is not being validated as php because there are no opening and closing php tags.

So I add them... Annnd... A page full of syntax errors again!

So my question is this:

Could some please share some knowledge and explain to me roughly how this process actually works. Whats the deal with all the syntax errors, and how are you supposed to go about a task like this?

I believe it is possible, and yes it would ceratinly be easier if i was not outputting the entire html via php. But this is a simple example and my actual design is alot more complex. It requires for the different parts of the page to be broken up into variables, in order to place those bits and peices when needed, dynamically.

Any input, suggestions, or insight would be greatly appreciated; and any links to pages or tutorials that cover this would also be greatly appreciated.

Thank You!!

This question is related to php jquery