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.
Related
Let's say I'm starting with a PHP application. On one of the pages on the site, there's a complex interactive app that I want to use Angular for. The problem is, I still want the header and footer of that page to match the rest of the site. I would love to be able to do something like this:
// main-template.php
<html>
<head>
<title>My Site-wide Header</title>
<script src="site-wide-script.js"></script>
<link href="site-wide-styles.css" rel="stylesheet">
<?php if ($somevar == true) : ?>
<?php echo "Yes, it has to be PHP"; ?>
<?php endif; ?>
</head>
<body>
<header>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</header>
<!-- Drop entire Angular application here -->
</body>
</html>
It somewhat works for me to just PHP include the Angular HTML file there, but that's pretty janky because, of course, the Angular index.html file already includes a html, body, etc. tags. Of course I could DOM parse the Angular file and fix all that before including...but I'd prefer a better solution.
In my searching I can't seem to find any officially recommended way of doing this. Actually I can't seem to find any examples of anyone doing this at all–all my searches just turn up people doing something similar with AngularJS, not Angular. Is there any decent way to accomplish this with Angular?
You should be able to do what you want to do.
Here's the content of a index.html for a web based chat program I did as a HW project (the back end was much more fun...).
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>crap chat</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="bootstrap.min.css" rel="stylesheet" />
</head>
<body class="m-a-1">
<?php print("Hello World ".date("r",time())."<br />\n"); ?>
<app></app>
<script type="text/javascript" src="inline.bundle.js"></script>
<script type="text/javascript" src="polyfills.bundle.js"></script>
<script type="text/javascript" src="styles.bundle.js"></script>
<script type="text/javascript" src="vendor.bundle.js"></script>
<script type="text/javascript" src="main.bundle.js"></script>
</body>
</html>
As long as you keep the same js file references and style sheets, styles (on <body> tag) etc. then you should be able to drop that in and toss in the <app></app> tag set just where you want it.
Just for giggles I renamed the file to index.php on my server, added a print statement to print date/time page was loaded, no issues.
As of angular6, this should be possible using angular elements.
Your code would then simply be
// main-template.php
<html>
<head>
<title>My Site-wide Header</title>
<script src="site-wide-script.js"></script>
<link href="site-wide-styles" rel="stylesheet">
<?php if ($somevar == true) : ?>
echo "Yes, it has to be PHP";
<?php endif; ?>
</head>
<body>
<header>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</header>
<your-component-name></your-component-name>
</body>
You can find a guide on how to create angular elements at https://angular.io/guide/elements - in principle, it is no harder than just creating a component
As someone might still come across this issue (like me), I want to share my solution:
As we are currently changing from a pure PHP page to an Angular approach, we need to include some basic php-stuff in the head of the index file of the Angular build process. Therefore, I added a postbuild-Step, which will automatically run after the build-step.
However, this step is running a node.js script which simply adds the php include we need in the index.php of the dist-Folder
const fs = require('fs');
const path = require('path');
const sourceDir = path.join('dist', 'path');
const phpTag = "<?php include_once './some.php' ?>\n";
const file = path.join(sourceDir, 'index.php');
fs.readFile(file, 'utf8', function (err, content) {
if (err) throw err;
if (!content.startsWith(phpTag)) {
content = phpTag + content;
fs.writeFile(file, content, 'utf8', function (err) {
if (err) throw err;
});
}
});
and these are the entries of my package.json:
"scripts": {
"build": "ng build",
"postbuild": "node ./addPHPTag.ts",
Optimizing css delivery in pagespeed insights not loading the css file.
I have tried loading the css file by using jquery but the problem is css is not loading.
My code:
<script type="text/javascript">
$(document).ready(function(){
if($(".bs-example").size()>0){
if (document.createStyleSheet){
document.createStyleSheet('<?php echo base_url();?>theme/css/style.css');
}
else {
$("head").append($("<link rel='stylesheet' href='<?php echo base_url();?>theme/css/style.css' type='text/css' media='screen' />"));
}
}
});
HTML:
<body>
<div class="bs-example"></div>
CSS assets should be included in the HTML header document with <link> tag.
While JS assets, including JQuery Ready function should be after the </body> closing tag.
<!DOCTYPE html>
<html>
<head>
<title>Website</title>
<link rel="path/to/css/file"/>
<style>
/*your custom CSS*/
</style>
</head>
<body>
HTML Body
</body>
<script src="https://code.jquery.com/jquery-3.2.1.js"/>
<script>
$(document).ready(function(){
/*code*/
});
</script>
</html>
This way, the CSS will be delivered first, and JQuery Ready function will only be executed after it detect that the page DOM has all been loaded and it's safe to run the JavaScript inside. JQuery Ready function.
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.
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.