I'm trying to add a jQuery in my PHP script. Everything goes well except when adding the jQuery script. The page then goes blank.
Here is my code:
function site_header() {
echo "<html dir=\"rtl\">
<!DOCTYPE HTML>
<html>
<head>
<meta name=\"viewport\" content=\"width=device-width; initial-
scale=1.0; maximum-scale=1.0;\">
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">
<title>Arabsfun :: تسالي العرب</title>
<link href=\"css/style.css\" type=\"text/css\" rel=\"stylesheet\">";
echo Pulse::css();
echo Pulse::javascript();
echo "</head>
<body>
<div id=\"wrap\">
<div class=\"header\">
<div class=\"logo\">
<img src=\"images/logo.png\" alt=\"Arabsfun\" />
</div>
<div class=\"clear-float\">
</div><br>
</div>
<div class=\"content\">" . navbar() ." </div>
</center>" ;
}
I then use the function site_header() to start the header on the page.
Any idea on how to solve this issue?
I don't see any reference to jQuery in that code at all. I'm going to assume that you typed something like:
<link href=\"css/style.css\" type=\"text/css\" rel=\"stylesheet\">
<script type=\"text/javascript\" src=\"jquery.js\">
You need a closing </script> or else the whole page will be treated as script and nothing will be emitted.
I came across this as well. The answer for me was to use a script end tag instead of ending it with the slash in the single tag. IE wouldn't take it.
This is what I had that didn't work...
<script type="text/javascript" src="#variables.jQueryURL#" />
This is what I changed it to that did...
<script type="text/javascript" src="#variables.jQueryURL#"></script>
(There's a ColdFusion variable in there, but it doesn't matter for this issue.)
Put it simple as html and include it. You have done nothing for which server side scripting is needed (for the header).
Whilst editing your code I noticed unequal tags. Your <body> tag is not closed and there may be others.
Related
I'm working with PHP Fat Free and I am attempting to create a layout/sublayout system which will eventually mimic MVC to some extent. I have a main layout which has placeholders (essentially the backend sets different sublayout or partial file paths and then the view takes care of calling the rendering of that file name. This all works great.
The issue I'm running into is when I need inline javascript in my sublayout to run after scripts in the main layout (after the jquery include line, for instance). In a previous framework I was using, I was able to do us output buffering ob_start and ob_get_clean to grab the script in the sublayout and then pass that to the layout to display below the script line. I hope that makes sense, but if not, here's the current code I'm working with in F3.
The route:
$f3->route('GET /test',
function($f3) {
// set the sublayout name
$f3->set('sublayout', 'testpage.php');
// render the whole shebang
echo View::instance()->render('testlayout.php');
}
);
The layout:
<!DOCTYPE html>
<html>
<head>
<title>Test Layout</title>
</head>
<body>
<h1>Test Layout</h1>
<?php echo View::instance()->render($sublayout) ?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" />
<!-- inline script should go here -->
</body>
</html>
The sublayout:
<h2>My Test Page</h2>
<div id='message'></div>
<script>
// This code needs to be placed AFTER the jquery include in the main layout
$(function(){
$('#message').html('This is my message');
});
</script>
I tried extending the view to include a "beginRegion" and endRegion function that basically handled the ob_start and ob_get_clean portion so that my inline script could be picked up, but once I'm in the sublayout I wasn't able to figure out how to pass that buffered code back to the layout so it could be echo'd after the jquery include.
Before you tell me that I should not be using inline script, I know this and most things I do are in external script files which I have a solution for including, but there are times when I need it inline and that's where I'm stuck.
Is there a way to handle what I'm trying to do with output buffering, or better yet is there a better way to solve this than the output buffering approach?
Update:
Best practices generally dictate that you should include the script at the bottom of the page right before the closing body tag. If I put the script above the sublayout, it breaks both our FE best practices and has the disadvantage of blocking the rest of the page while the script downloads. That's why I'd like to keep it structured the way I have noted instead of placing the jquery include ABOVE the sublayout.
I don't understand what's the problem.
Your layout is:
<!DOCTYPE html>
<html>
<head>
<title>Test Layout</title>
</head>
<body>
<h1>Test Layout</h1>
<?php echo View::instance()->render($sublayout) ?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" />
<!-- inline script should go here -->
</body>
</html>
You want to include sublayout after jquery usage. So why not to write it like this? :
<!DOCTYPE html>
<html>
<head>
<title>Test Layout</title>
</head>
<body>
<h1>Test Layout</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" />
<!-- inline script should go here -->
<?php echo View::instance()->render($sublayout) ?>
</body>
</html>
Also You can write custom function. Lets say You've folder with partials or something else more structured and want to use it:
$f3->set('partial',
function($file) {
$file .= (strpos($file, '.php')>0)? '' : '.php';
if(!is_file($file)) return '';
return View::instance()->render($file);
}
);
and then use it like:
<!DOCTYPE html>
<html>
<head>
<title>Test Layout</title>
</head>
<body>
<h1>Test Layout</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" />
<!-- inline script should go here -->
{{ #partial('partials/testpage') }}
</body>
</html>
I knew why You want to do so. But what's the problem to decouple scripts in scripts.php file and HTML,php part to another file and render them as needed? (:
From a google groups discussion I had, someone offered up a JS solution that might work:
inside your layout:
<head>
<script>
var callbacks=[];
</script>
</head>
<body>
<script src="...jquery.min.js"/>
<script>
$.each(callbacks,function(i,func){func.call(null,jQuery);}) //<< triggers all queued callbacks
</script>
</body>
inside your sublayout:
<h2>My Test Page</h2>
<div id="message"></div>
<script>
callbacks.push(function($){
//do something with jQuery
});
</script>
Here's the link:
https://groups.google.com/forum/#!topic/f3-framework/iGcDuDueN8c
I was trying to make an hyperlink, I found something I don't understand.
The hyper link below doesn't show up on my html view with www in it.
href='http://www.ringtonematcher.com/co/ringtonematcher/02/noc.php?sid=EULDros&artist=$ringtone_artist&song=$ringtone_title
but when I remove www it start showing up
href='http://ringtonematcher.com/co/ringtonematcher/02/noc.php?sid=EULDros&artist=$ringtone_artist&song=$ringtone_title
Is there any explanation?
Thankyou
EDIT 1
Here is my view source
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="/assets/css/style.css" type="text/css" media="screen" />
<title>Music Engine</title>
</head>
<body>
<div id="mainbody" class="wrapper">
<script src="http://connect.soundcloud.com/sdk.js"></script>
<script>
SC.initialize({
client_id: "6a43a20c7a9e04da8d722bb01f16ce49",
});
SC.get('/tracks/106285389',function(track){SC.oEmbed(track.permalink_url, document.getElementById("player"));})
$(document).ready(function() {
});
</script>
<div id="player"></div>
<a class="download" href="http://api.soundcloud.com/tracks/106285389/download?client_id=6a43a20c7a9e04da8d722bb01f16ce49">Download</a>
<div class="ringtone_matcher"><a class='download' href='http://www.ringtonematcher.com/co/ringtonematcher/02/noc.php?sid=EULDros&artist=Carly Rae Jepsen&song=Call Me Maybe'>Send Ringtone to your cell</a></div>
</div>
</body>
</html>
what i mean not visible is i can't see it in the browser but i can see it inside the source
www.ringtonematcher.com is on a list of unwelcome advertising sites in AdBlock, which applies a stylesheet which applies display: none to links to it. The site without the www. is not on that list.
Disable your AdBlock extension to see it.
The problem would seem to be from the fact that you aren't effectively "showing" the language of PHP that you have variables in your code.
<div class="ringtone_matcher">
<?php echo "<a class='download' href='http://ringtonematcher.com/co/ringtonematcher/02/noc.php?sid=EULDros&artist=".$ringtone_artist."&song=".$ringtone_title."'>";
echo "Send Ringtone to your cell</a>";
?>
</div>
This would, at least, be a more correct way of doing it.
Ok, I am having the weirdest problem in history. I am making a website that works perfectly in HTML, but is having some REALLY odd behaviour when rendered from PHP - despite having the EXACT SAME client source code (I literally went through it character by character).
At first I thought I'd messed up something in my 'functions.php' file that I'm including, but I don't get any errors, and when I copy&paste the contents of that file into the place where the include('functions.php'); line is, the problem disappears.
Here's my code (with some HTML removed, this is all of the PHP):
<?php
error_reporting(E_ALL);
ini_set('display_errors','1');
include 'functions.php';
$footer = file_get_contents('footer.txt');
?>
<!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="X-UA-Compatible" content="IE=edge" />
<title>Removed</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<link type="text/css" rel="stylesheet" href="css/jquery-ui-custom.css" />
<link type="text/css" rel="stylesheet" href="css/main.css" />
</head>
<body>
<div id="header">
<div id="headerContent">
<div id="logo">
</div>
<?php
echo trim(GetNav());
?>
</div>
</div>
<div id="content">
<?php
$NumberOfNewsItems = 2;
echo trim(GetNews($NumberOfNewsItems));
?>
</div>
<?php
echo trim($footer);
?>
</body>
</html>
The functions GetNav and GetNews grab info from the database so I'm not going to show the code from them, plus, as I mentioned earlier, if I don't include the file but instead copy it's contents to the place I make the include call then most of the whitespace disappears (there's still some where the 'echo $footer' call is.
Basically, when you look at the source code, everything looks fine. Where stuff gets incredibly strange is when you hit F12 to look at the dev tools and the elements tab shows a whole bunch of extra whitespace (surrounded by double quotes) immediately after the tag (which impacts the look of the site) as well as between the footer and content Divs (which again, impacts the look of the site).
Also in this view, all of the tags from the are below the first set of white-space and the tag is empty (eg: <head></head>).
The source code looks fine (and if I copy and paste the source code into a HTML file it works flawlessly) and I have to admit that this has me tearing my hair out.
Please help me Obi-Wan-Kenobi, you're my only hope (yes, I love Star Wars, although I wish they'd made more than three movies).
P.S. This might be mega-obvious, but I'm a .Net developer doing this for a family member in my spare time (also it's fun to learn new languages, even ones overly fond of the $ sign), so apologies in advance if I'm the world's biggest newb.
EDIT: What I see in the dev tools is this:
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
"
"
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Removed</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<link type="text/css" rel="stylesheet" href="css/jquery-ui-custom.css" />
<link type="text/css" rel="stylesheet" href="css/main.css" />
Etc.
EDIT2: Just to be clear, I don't care what the dev tools show, it's just that I'm getting whitespace showing where those quotes are on the actual website, other than that everything is perfect.
EDIT3: Also, the whitespace cannot be clicked on with the element selector and selecting the whitespace in the element tab does not highlight anything on the website. Deleting it in the element tab however DOES fix the website (until it is reloaded obviously), but obviously doesn't help me with my problem.
Try removing the ?> in your functions.php file and no blank rows after the code. And is the functions.php in the same directory as the main file?
And just a tip, include a footer.php instead of file_get_content :-)
I wasn't able to fix this in a way that satisfies me, but here's the workaround that I implemented:
I removed the include from the header entirely and broke up functions.php into one file per function and just included them where they needed to be called.
This alleviated my problem, although it's not ideal. Glad I don't have to use PHP on a daily basis :).
I had the same issue, on the console the source of the html looked like :
By checking the encoding some files were encoded with utf-8 with bom and some with big5. By saving those file to utf-8 ( without bom) solved the issue for me.
I have used Sublime Text 2 with the EncodingHelper from the package manager to see the current file encoding.
Hope it helps.
I have a lot of server code (PHP) going on in my first page of the Facebook app.
I wan't the users to see a loading animation while waiting for the page.
I've seen many examples here of how to preload a page (using ajax or simply jQuery) but this is different, as I said, the page itself is generated on the server, and while that goes on, the user only sees a white blank page.
I tried to wrap my main page with another php page:
<?php
include_once 'functions.php';
session_start();
$_SESSION['fb'] = new fb();
function phponload(){
echo
'<script>
$(function(){
$("#mwrapper").load("main.php");
});
</script>';
}
?>
<html>
<head>
<script type="text/javascript">
function delayer(){
document.write("<?php phponload();?>");
}
</script>
<link href='styles/default.css' rel='stylesheet' type='text/css' />
<img class='mainload' src='images/loading.gif'></img>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>
<link rel='stylesheet' type='text/css' href='plugins/clock/clock.css' />
</head>
<body onload='setTimeout("delayer()",1000);'>
<div id='mwrapper'>
</div>
</body>
</html>
now the main php page (main.php) has something like:
<!DOCTYPE html>
<html xmlns:fb="http://ogp.me/ns/fb#">
<meta name="google-site-verification" content="Hyqgg60NTPNA7Q9Z5y9TtezUmwhiEomwZLJDt43Ki2g" />
<!--<img class='mainload' src='images/loading.gif'></img>-->
<?php
include_once 'functions.php';
include 'res/views/getTables.php';
define('TXT_QUESTIONS_NUM', 43);
session_start();
{... more PHP code ... }
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"> </script>
<script src='scripts/menuItems.js'></script>
<script src='scripts/main.js'></script>
<link href='styles/jquery.ui.smooth.theme.css' rel='stylesheet' type='text/css'/>
<script type="text/javascript" src="plugins/clock/clock.js"></script>
<link rel="icon" href="images/favicon.ico">
</head>
<div class='container' id='main'>
...
</div>
</body>
</html>
Right now, all the code does is loop the GIF - but does not load main.php :(
Thank you!
Is there any error on the Chrome/Firebug console?
I don't understand why you generate the loader JS code in the PHP function (you could put it directly in HTML), but by doing so you are putting a multiline block between the quotes on document.write function, which causes an error.
However, I think the issue is that the browser is interpreting the inserted </script> as the end of the HTML tag, so what's after (the end of the document.write call and the delayer function) are treated as HTML and not as Javascript.
EDIT: Complementing the answer, here's the code I'd use to load another page:
function delayer(){
$("#mwrapper").load("main.php", function(){
$('.mainload').remove();
});
}
Didn't need any PHP generation. Also, the second argument to the load function is a callback called when the load is finish, in this case I used to remove the loading GIF.
I've asked a similar question before, but I've got a more specific question about this "style" of creating a page.
I have 3 pages for a template, header.php, page.php and footer.php. I'm trying to allow myself to easily edit parts of the site within a single page, but also be able to have extra things in on per-page basis. My current structure is:
header.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Website Name<? if ($title) echo ' – ' . $title; ?></title>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
page.php
<?
$title = 'Page Title';
require_once('includes/header.php');
?>
<!-- Any extra stuff for the header goes here -->
</head>
<body>
Page content goes here.
<? require_once('includes/footer.php'); ?>
footer.php
<footer>
I am a footer
</footer>
</body>
</html>
Although this works, I cannot make a publicly editable header (menus etc) that easily since my header.php page does not contain anything in the <body>. However, closing the <head> in header.php would not allow me to add extra files (such a page-specific javascript) on per-page basis. To my knowledge, CSS and javascript being included within the <body> tag is not a good idea.
I'm guessing a further file (say, menu.php) would be required and included at the top of each page, after the <head> tag? However, that doesn't seem that easy to read/natural, I feel there must be a better solution?
One easy solution is to have inside "header.php" a line to echo the content of $extraHeaders:
<!DOCTYPE html>
<html>
<head>
<?php echo $extraHeaders ?>
...
Then, any page you want to add specific headers to (stylesheet, javascript file, etc.), you just include it in the $extraHeaders variable:
$extraHeaders = '<script type="text/javascript" src="myscripts.js"></script>'
And it will be automatically be included in the headers for that page.
To solve the problem of syntax highlighting and avoiding to have to escape the quotation marks, you can use the output buffer syntax:
ob_start();
?>
<your html goes here> Alternatively, you can include an html file here.
<?php
$extraHeaders = ob_get_contents();
ob_end_clean();
...
This will allow you to use a variable, as previously suggested, but with syntax highlighting, and there is no need to escape anything.
Make an _autoload() script to pre-load all those php files.
This way when ever there is anything new to put, you can always go tho the script containing the _autoload() function and update it there.
Btw, putting javascript at the very end of the <body> tag is actually a good practice.
You can use ob_start + regex ( tags like {title} or {scripts} to have an access at the end of loading the "page".