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!!
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;
?>
<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.
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.
I think it should be
. (include ($_SERVER['DOCUMENT_ROOT'] . '/../../path/to/include/datepicker.php')) .
otherwise php will try to include all the stuff after until the l is reached (tags will be interpreted as part of the file name).
also, in terms of the php code, after the file is included (on success), the include statement translates into 1 as a number, instead of the content of the file.
use
<? $abc <<<qwerty
...
...
...
qwerty;
return qwerty;
?>
for all the files that you want to include
Related
I designed my site with php and it works fine on wamp server,but when i uploaded my PHP site to my host and i went to my site address i saw only white page.(it show only page title in correct way!)
I used some include sentence with pointing to parent directory with using two point "../"
Do you think that this can be cuse of problem?
Please recommend me a way to find error and debug it.
This is my first page code:(i should mention that for example when i go to content.php it display correct)
<?php
include("includes/classes/mysession.php");
$ms=new Mysession("turkish_az","home");
$ms->setCurrentPage("home");
if(isset($_GET["slc_language"])){
$ms->setLanguage($_GET["slc_language"]);
}
?>
<!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>
<link href="includes/css/style_header.css" rel="stylesheet" type="text/css" />
<link href="includes/css/style_home.css" rel="stylesheet" type="text/css" />
<link href="includes/css/syle_footer.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="includes/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$("#slc_language").val("<?php echo($ms->getLanguage());?>");
$("#form_search").submit(function(e) {
var data=$(this).serialize();
e.preventDefault();
$.ajax({
type: 'POST',
url: 'pages/meaning/mean.php',
data: data,
success: function(resp){
$("#resultpart").html(resp);
}
});
});
});
</script>
</head>
<body>
<div id="container">
<?php require("pages/header/header.php"); ?>
<?php require("pages/main/content.php"); ?>
<?php require("pages/footer/footer.php"); ?>
</div>
</body>
</html>
i checked hedear & content & footer php files:
1-The header show white page like first page
2-The content is show correct
3-the footer show half correct but has an error:
Fatal error: Call to a member function getLayoutName() on a non-object in /home/u998326115/public_html/pages/footer/footer.php on line 14
Find in your hosting docs how you can see error logs. It can be file error_log in script folders, some files in folder logs or you can access to logs in hosting control panel (CPanel, for example). Or you can ask your hosting support.
Turn on error display and set error level to E_ALL for all your scripts. You can make this in .htaccess file or in your code. Ask your hosting support team how you can make this better.
You only have two bits of php, some above the title and some below.
Since you are getting the page title, we can conclude it's the lower php which causes the page to not load.
Presumably the paths to the files you're including are not right. Try changing the very first "include" to "require", do you now stop getting the title? In which case your paths are wrong.
Add this to the very top
error_reporting(E_ALL);
ini_set('display_errors', '1');
I want to use LESS, but it is doesn't work at my localhost.
Here is my index.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; utf-8">
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>
and here is my styles.less
#nice-blue: #5B83AD;
body{
backgroud-color: #nice-blue;
}
You shouldn't be using your less files directly in your HTML. Less is a CSS pre-processor, and needs to be compiled in order to be read by your browser.
Follow the examples here (http://lesscss.org/) on how to compile your LESS file so that you can use the CSS.
iv downloaded a HTML 5 Lightbox from here: http://html5box.com/products.php to display a video within it. Im happy with the player but is a necessity for the player to open upon entry of the site instead of clicking the 'bg.jpg' picture (which it is at the moment).
The main html page code is here:
<!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>NBC Uni</title>
<script type="text/javascript" src="html5lightbox/jquery.js"></script>
<script type="text/javascript" src="html5lightbox/html5lightbox.js"></script>
</head>
<body>
<div align="center"><a href="video.mp4" class="html5lightbox" data-width="720" data-height="404" ><img src="bg.jpg" width="1023" height="820" /></a></div>
</body>
</html>
any help is much appreciated!
thanks
You can simulate the click on the img with jquery:
$(document).ready(function(){
$("#imgvideo").click();
});
You have to put the id="imgvideo" to the image
This should work.
$(document).ready(function() {
$('.html5lightbox').trigger('click');
})
I newly tried to use TinyMCE in my website but the problem was that by very simple implementation of it in very basic page mentioned in the TinyMCE website I got unexpected result. With the following code the browser only display the large blank area with only a save button.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<title>TinyMCE Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<!-- OF COURSE YOU NEED TO ADAPT NEXT LINE TO YOUR tiny_mce.js PATH -->
<script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
mode : "textareas"
});
</script>
</head>
<body>
<!-- OF COURSE YOU NEED TO ADAPT ACTION TO WHAT PAGE YOU WANT TO LOAD WHEN HITTING
"SAVE" -->
<form method="post" action="show.php">
<p>
<textarea name="content" cols="50" rows="15">This is some content that will
be editable with TinyMCE.</textarea>
<input type="submit" value="Save" />
</p>
</form>
</body>
</html>
Could anyone help me what the problem is with the code and the page showed in browser. I can say that I got the same result with different browsers.
Please put all tiny mce library files
it will work when all files are there.
please download latest tiny mce here
http://www.tinymce.com/tryit/full.php
I've combed the internet for a few hours and still cannot make this simple example work. I hope somebody can assist me. I'm trying to use Javascript to display the contents of a php file. The display should be refreshed often as ultimately it will be used to display text matches from a MySql db that match the characters entered in a search bar (similar to Google's search bar). I'll use setinterval for that but I am not there yet. My issue is that I have minial javascript/AJAX experience and just cannot make it work. I've dumbed it down to a bare bones request and still cannot make it work. Please suggest what isn't working:
The index.html where the content should be viewable is:
<!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" src="/js/jquery-1.3.2.min.js"></script>
</head>
<body>
<script type="text/javascript">
$().ready(function() {
$("#dynamic").load("blasty.php");
});
</script>
<div id="dynamic"></div>
</div>
</body>
</html>
And blasty.php contains:
<?php
echo "hello cruel world!";
?>
Thanks in advance!
Make sure your blasty.php file is on the same domain.
Also, to help debug javascript, right click in Chrome or Firefox and go Inspect Element. Then go to the Console window and it will display most errors.
I also recommend this youtube video about javascript. I it helped me bridge the gap on some javasrcipt gotchas. http://www.youtube.com/watch?v=ljNi8nS5TtQ
Here is a link about debuggers: https://developers.google.com/chrome-developer-tools/
As #Explosion Pills said, FireFox's Firebug is another great option. I will use both to help debug javascript. Firebug is nice because under the Net tab it will display the acutal http requests as they happen in the background, with the params, response, header info, etc.
<!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" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$("#dynamic").load("blasty.php");
});
</script>
<div id="dynamic"></div>
</div>
</body>
</html>
You are missing the document variable in the $().
<script type="text/javascript">
$(document).ready(function() {
$("#dynamic").load("blasty.php");
});
</script>
Visually that's the only issue I see.
I use $.get instead of $.load.
Try something like this:
$.get("blasty.php",
{ nbRandom: Math.random() },
function(data){
$("#dynamic").html(data);
});
nbRandom is to prevent caching in IE.
Use Firebug to make sure there is a response from the AJAX and go from there.