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

Question

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" />
')
        document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
')
        document.write('<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
')
    }
</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" />
')
        document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
')
        document.write('<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
')
    }
</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!!

Ray Perea · Accepted Answer

All you need to do to use jQuery with PHP is to include the jQuery javascript file in your HTML document in the head tag. I actually use PHP along with jQuery all the time. And this is how I do it. In your code above, it looks like you have some escaping issues with your code. And it also looks like you want to hold the header of the page in a PHP variable then print it out. You don't have to do all that. Just put the plain text in your PHP file without any php tags and it will work. Also, you are using an old version of jQuery. Should probably use the latest version. But, if you need it stored in a PHP variable so that you can print it out, do this:

SO, here is some code to get you started.

<?php
$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>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
    $("#date").datepicker();
});
</script>
</head>
<body>
<input type="text" id="date" name="date" />
</body>
</html>';

print $pageStart;

?>

elrado · Answer

<head>
<script type="text/javascript"
 src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    // javascript & jquery code
    // even better would be if you would put client code in separate file!!!
  });
</script>
</head>
<body>
<?php
   echo "bla bla bla";
?>
</body>

and +1111 to @ Heera's comment You're missing the basics's.

Shiplu Mokaddim · Answer

Use Heredoc. Thousands of syntax errors will be gone.

See the heredoc version of your pages,

http://pastie.org/3412925
http://pastie.org/3412929
http://pastie.org/3412935 // Here you have used include to contact. include does not return anything. It just includes. So Its changed differently.

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

Tags:

jquery

php

Craig van Tonder

3 Answers

Ray Perea

elrado

Shiplu Mokaddim

Recent Activity

Donate For Us

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

Tags:

jquery

php

Craig van Tonder

3 Answers

Ray Perea

elrado

Shiplu Mokaddim

Related questions

Recent Activity

Donate For Us