I am working on making a dynamically loaded website using some php code to swap out content from various other files. While on top of that I am using jquery to beautify this swap out.
Relevant PHP:
<?php
// Set the default name
$page = 'home';
// Specify some disallowed paths
$disallowed_paths = array('js.php','css.php','index.php');
if (!empty($_GET['page'])){
$tmp_page = basename($_GET['page']);
// If it's not a disallowed path, and if the file exists, update $page
if (!in_array($tmp_page, $disallowed_paths) && file_exists("{$tmp_page}.php"))
$page = $tmp_page;
}
// Include $page
if(!file_exists("$page.php")){
$page = 'home';
}
else{
include("$page.php");}
?>
Relevant jquery:
$(function (a) {
var $body = $('body'),
$dynamo = $('.dynamo'),
$guts = $('.guts');
$body.fadeIn('slow');
if (history.pushState) {
var everPushed = false;
$dynamo.on('click', 'a', function (b) {
var toLoad = $(this).attr('href');
history.pushState(null,'',toLoad);
everPushed = true;
loadContent(toLoad);
b.preventDefault();
});
$(window).bind('popstate', function () {
if (everPushed) {
$.getScript(location.href);
}
everPushed = true;
});
} // otherwise, history is not supported, so nothing fancy here.
function loadContent(href) {
$guts.hide('slow', function () {
$guts.load(href, function () {
$guts.show('slow');
});
});
}
a.preventDefault();
});
What is happening is when I link to a page using ?page=about it will work but it will instead of just swapping out the content it will load the entire page including the content inside the dynamically loaded div.
If I were to link straight to about.php it would work beautifully with no fault whatsoever, but anybody who wanted to share that link http://example.com/about.php would get just the content with no css styling.
If I were to change the jquery in "loadContent" to:
$guts.load(href + ' .guts', function () {
EDIT 1:
, ' .guts'
to
+ ' .guts'
It would then work but any script, java, jquery, or the like would not work because it gets stripped out upon content load.
check out http://kazenracing.com/st3
EDIT 2:
It also seems to be that the site does not work properly in the wild either.
No background and none of the icons show up, but it still gets the general problem across.
I can fix that myself, it will just take some time. For now my focus is on the recursion problem.
EDIT 3: Site no longer needs to be worked on, problem never solved but we are letting that project go. So the link no longer is a valid URL.
Related
I am attempting to build a small web application but I'm not clear how to communicate between different parts of the page. I will use my specific functionality to demonstrate my question.
All of my pages use a generic toolbar. Since this toolbar is used on multiple pages, it is in its own PHP file, which I include using
<?php include("../toolbar.php"); ?>
The toolbar includes a log in button. When clicked, this opens a modal login dialog (in this case the Facebook login dialog). When a user logs in, his or her name is displayed in the toolbar, and the log in button is replaced by a 'logout' button. Since this behavior is the same no matter which page the user is viewing, I created a toolbar.js file to display the log in modal and update the username/button appropriately.
However, on most pages, logging in or out from the toolbar needs to also update the contents of the main page. I can not guarantee that every page that includes toolbar.php will have to do anything when the log in status changes, but most will.
Similarly, the reverse is possible - a certain page might have a 'log in' button outside the toolbar. When this is used, the toolbar needs to update.
What is the best way to handle this?
Current implementation - this might be awful…
In toolbar.js I am basically calling a function, 'userSignedIn', whenever the user logs in (and an equivalent for log out). toolbar.js, implements this itself (it needs to update its button and user name label).
Then, if the main page (lets call it mainPage.php) needs to anything additional, I am re-using this same function to 'tack on' the additional actions. On load of that page, I do the following:
var originalUserSignedIn = userSignedIn;
userSignedIn = function() {
originalUserSignedIn();
customUserSignedIn();
}
customUserSignedIn is a function within mainPage.js, where I perform the additional actions. I have not yet implemented a solution for the opposite (sign in from mainPage.php needs to update toolbar.php).
I guess coming from an objective-C background, I am attempting something analogous to calling 'super' in a method implementation.
One way to do it is to initialize an empty array to hold callback functions and the sign function to call them, before any of the other javascript:
var userSignedInCallbacks = [];
var userSignedIn = function() {
for (var i = 0; i < userSignedInCallbacks.length; i++) {
userSignedInCallbacks[i]();
}
}
Then, toolbar and main page js will both just add their appropriate callbacks to the array:
userSignedInCallbacks.push(function() {
// ...
});
Finally, the login actions in either the toolbar or main page will both just call userSignedIn().
One way you could do this is by using the publisher-subscriber pattern for handling communications between different modules in your page so that every modules is only coupled on an event interface.
I created a very simple example here. It doesn't handle the logout process but you can still see how things could be structured.
HTML
<div id="toolbar">
<button class="login">Login</button>
</div>
<div id="another-section">
<button class="login">Login</button>
</div>
<div id="login-dialog">
<button class="login">Do login!</button>
</div>
JS
//in EventBus.js
var EventBus = {
subscribers: {},
publish: function (eventName) {
var args = Array.prototype.slice.call(arguments, 1),
subscribers = this.subscribers[eventName] || [],
i = 0,
len = subscribers.length,
s;
for (; i < len; i++) {
s = subscribers[i];
s.fn.apply(s.scope, args);
}
},
subscribe: function (eventName, fn, scope) {
var subs = this.subscribers[eventName] = this.subscribers[eventName] || [];
subs.push({ fn: fn, scope: scope });
}
};
//in toolbar.js
function Toolbar(el, eventBus) {
var $el = this.$el = $(el),
$loginButton = $('button.login', $el);
$loginButton.click(function () {
eventBus.publish('userWantsToLogin');
});
eventBus.subscribe('userLoggedIn', function () {
$loginButton.html('Logout');
//change button handlers to handle logout...
});
}
//in another-section.js
function AnotherSection(el, eventBus) {
var $el = this.$el = $(el),
$loginButton = $('button.login', $el);
$loginButton.click(function () {
eventBus.publish('userWantsToLogin');
});
eventBus.subscribe('userLoggedIn', function () {
$loginButton.html('Logout');
//change button handlers to handle logout...
});
}
//in main.js
$(function () {
var $loginDialog = $('#login-dialog');
$loginDialog.dialog({ autoOpen: false});
$('button.login', $loginDialog).click(function () {
EventBus.publish('userLoggedIn');
});
EventBus.subscribe('userWantsToLogin', function () {
$loginDialog.dialog('open');
});
new Toolbar('#toolbar', EventBus);
new AnotherSection('#another-section', EventBus);
});
I am making a website in HTML, CSS and PHP. I have a navigation on the top of the page, and when you hover your mouse over the buttons, they light up.
Now, when you click a button and go to that particular page, I would like the button for that page to be lit up, indicating that you are on that page. How would I go about doing this? Defining a variable on each page and then checking for it in the menu is not possible, as I have a forum on the site too, and that would require me to define a variable on each page.
EDIT
I managed to solve my problem. As it turns out, I could just define the pages, and for the forum I could do the same in the settings file that the forum used.
In my navigation, I just check what the current page is:
<li id="news"><a <? if(PAGE == "INDEX") print 'class="active"'; ?> href="/">News</a></li>
Add a class (or ID) to the body tag, like so:
<body class="Page1">...</body>
Then, in your CSS you can say something like:
.Page1 menu li, menu li:hover {...}
I'm not sure how to check for the current page in PHP - though, that would be ideal.
If you want to rely on JavaScript, though, I have used this function in the past successfully:
function highlightPage(id){
//make sure DOM methods are understood
if(!document.getElementsByTagName) return false;
if(!document.getElementById) return false;
if(!document.getElementById(id)) return false;
var nav = document.getElementById(id);
var links = nav.getElementsByTagName('a');
for (var i=0; i < links.length; i++){
var linkurl = links[i].getAttribute('href');
var currenturl = window.location.href;
//indexOf will return -1 on non-matches, so we're checking for a positive match
if (currenturl.indexOf(linkurl) != -1) {
links[i].className = "here";
var linktext = links[i].lastChild.nodeValue.toLowerCase();
document.body.setAttribute("id",linktext);
}
}
}
And to load the function at the load of the page:
function addLoadEvent(func){
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function(){
oldonload();
func();
}
}
}
addLoadEvent(function(){
highlightPage('navigation');
});
This assumes that your navigation has the ID of "navigation", but you can change it to whatever you want. The function simply attaches a class of "here" to the current navigation item.
This script comes from Jeremy Keith's "DOM Scripting".
I have a controller that in nutshell is as follows:
public function download($id) {
$data = array();
force_download($data['brochure']->location, $data['brochure']->name);
$this->renderPage('site/download', $data); // simple method basically same as load->view
}
I want the page view and then after a second to force download the file - the current function downloads the file but not the view, can anyone suggest how to get around this?
Remove the line the following line from download function
force_download($data['brochure']->location, $data['brochure']->name);
Write another function
public function download_file($id) {
$data = array();
force_download($data['brochure']->location, $data['brochure']->name);
}
Now in the download view add the following javascript/jquery script:
$(document).ready(function(){
setTimeout(function(){
downloadFile('<your file location>')
},1000);
});
function downloadFile(url)
{
var iframe;
iframe = document.getElementById("download-container");
if (iframe === null)
{
iframe = document.createElement('iframe');
iframe.id = "download-container";
iframe.style.visibility = 'hidden';
document.body.appendChild(iframe);
}
iframe.src = url;
}
You need to have two actions:
To display the download page ($this->renderPage(...)).
To make the browser download the file (force_download(...)).
In the first one, you add some javascript or a meta-tag in the head to redirector to the second action after a second.
The download page will be displayed and then after a second, the download offered.
Using a hashchange event I'm detecting when a user clicks the back button in a browser and changing the URL accordingly. Is there a better way to do this for pagination? I'm currently changing the URL after a user clicks my pagination control like so:
$(".pager").click(function(){
var start = null;
if ($.browser.msie) {
start = $(this).attr('href').slice($(this).attr('href').indexOf('#')+1);
}
else {
start = $(this).attr('href').substr(1);
}
$('#start').val(start);
$.post("visits_results.php", $("#profile_form_id").serialize(),
function(data) {
$('#search_results').html(data);
location.href = "#visits=" + start;
});
return false;
});
My javascript to detect the back button looks like this:
function myHashChangeCallback(hash) {
if (hash == "") {
$("#loadImage").show();
var no_cache = new Date().getTime();
$('#main').load("home.php?cache=" + no_cache, function () {
$("#loadImage").hide();
});
return false;
}
else {
// adding code to parse the hash URL and see what page I'm on...is there a better way?;
}
}
function hashCheck() {
var hash = window.location.hash;
if (hash != _hash) {
_hash = hash;
myHashChangeCallback(hash);
}
}
I currently plan on checking each hashtag and the value to see what page I should load unless there is a better more efficient way.
Any thoughts or suggestions?
The jQuery Address plugin does this very well. Once setup it provides a series of logical navigation events which you can hook into. It also has very good support for history.pushState() which eliminates the need for hashtags in newer browsers and has equally good fallback support for those browsers that do not support pushState.
A simple implementation would look like this:
// Run some code on initial load
$.address.init(function(e) {
// Address and path details can be found in the event object
console.log(e);
});
// Handle hashtag/pushState change events
$.address.change(function(e) {
// Do more fancy stuff. Don't forget about the event object.
console.log(e);
});
// Setup jQuery address on some elements
$('a').address();
To enable pushState() support pass an argument to the script like so:
<script type="text/javascript" src="jquery.address-1.3.min.js?state=/absolute/path/to/your/application"></script>
What is the best way to reference or include a file using Javascript, looking for the closest functionality of PHP's include() ability.
I would check out Javascript equivalent for PHP's include:
This article is part of the 'Porting
PHP to Javascript' Project, which aims
to decrease the gap between developing
for PHP & Javascript.
There is no direct equivalent - you can either go with the function I linked above or use document.write to write out a new script tag with a src pointing to the file you wish to include.
Edit: Here is a rudimentary example of what I mean:
function include(path) {
document.write(
"<script type=\"text/javascript\" src=\"" + path + "\"></script>"
);
}
Edit 2: Ugh, what an ugly example - here is a better one:
function include(path) {
script = document.createElement("script");
script.setAttribute("type", "text/javascript");
script.setAttribute("src", path);
if (head = document.getElementsByTagName("head")[0]) {
head.appendChild(script);
}
}
document.write is a hackish way of doing things and I shouldn't have recommended it. If you go with one of my examples please use the second one.
I have a script that I wrote a while back (using Mootools) that allows for one to include javascript files on the fly (with a callback function after its loaded). You can modify it to work the library of your choice if you choose.
Note the gvi prefix is just my namespace and that gvi.scripts is an array containing all the javascript files currently included on the page, those can be removed if you want. Also, the filename function can be removed, that was just added to make my life easier [require('some-script') vs require('js/some-script.js')].
//if dom isn't loaded, add the function to the domready queue, otherwise call it immediately
gvi.smartcall = function(fn) {
return (Browser.loaded) ? fn() : window.addEvent('domready', fn);
}
//For dynamic javascript loading
gvi.require = function(files, callback, fullpath) {
callback = callback || $empty;
fullpath = fullpath || false;
var filename = function(file) {
if (fullpath == true) return file;
file = ( file.match( /^js\/./ ) ) ? file : "js/"+file;
return ( file.match( /\.js$/ ) ? file : file+".js" );
}
var exists = function(src) {
return gvi.scripts.contains(src);
}
if ($type(files) == "string") {
var src = filename(files);
if (exists(src)) {
gvi.smartcall(callback);
} else {
new Asset.javascript( src, {
'onload' : function() {
gvi.scripts.push(src);
gvi.smartcall(callback);
}
});
}
} else {
var total = files.length, loaded = 0;
files.each(function(file) {
var src = filename(file);
if (exists(src) && loaded == total) {
gvi.smartcall(callback);
} else if (exists(src)) {
loaded++;
} else {
new Asset.javascript( src, {
'onload' : function() {
gvi.scripts.push(src);
loaded++;
if (loaded == total) gvi.smartcall(callback);
}
});
}
});
}
}
And you call it like
gvi.require('my-file', function() {
doStuff();
});
//or
gvi.require(['file1', 'file2'], function() {
doStuff();
});
jQuery has a plugin for this: http://plugins.jquery.com/project/include
Instead of using javascript and making our work more complex, we have pretty easy way to include external file using the IFRAME tag in HTML.
**
<iframe src="....../path/filename.html" width="" height="">
**
We can also control iframe using CSS if even more customization required .