I'd like to reload a specific div if you click on a link with PHP.
HTML Code:
<nav>
Register
Login
</nav>
<div class="content">
//Reload Content here
<p>That's a test paragraph for the start page</p>
</div>
And now I want to include the page from the href on click into the div.content
How can I catch a link click in php? Is this possible? And how can I include the page into my div.content?
Thanks!
You might want to look into using Jquery and AJAX if you want to achieve this without a page reload... Otherwise you might want to use a PHP GET request as follows:
<nav>
Register
Login
</nav>
<div class="content">
<?php
if (isset($_GET['content'])) {
if (file_exists($_GET['content'] . '.php')) {
require($_GET['content'] . '.php');
}
}
?>
<p>That's a test paragraph for the start page</p>
</div>
PHP code is executed on the server, and cannot reload a <div> widhout rendering the whole page. If you absolutly want to use PHP to do this, you need to make an <iframe> inside the <div class=content> and reload that.
URL parameters is stored in the $_GET variable.
For example: foo.com?page=bar can be retrieved with $_GET['page']
<?php
echo $_GET['page']; // will return "bar"
?>
Example in pure PHP without <iframe>
<nav>
Register
Login
</nav>
<div class="content">
<?php
if(isset($_GET['page']))
{
// Includes the content. # is for supressing errors if the file is not found.
// Can be solved with is_file();
// http://php.net/manual/en/function.is-file.php
#include "/path/to/file/".$_GET['page'].".php";
}
?>
</div>
This is not the most secure way of doing it, because you can manipulate the URL to include other PHP files in your system, but you get the idea.
Related
I used 'include' php to separate header of my website.
So, I can easily fix if I need to change the navigation menu part in the header, instead fixing more than 20 pages each.
My question is I like to add a class, 'current' in the one of navigation button.
For example, if I am in 'Home' page, then I want to change font color of 'Home' button to red.
If I move to 'Contact' page, I want 'Contact' button to be changed to red and want 'Home' button to normal color.
Since all navigation button codes are in the header.html.
How can I add class 'current', so users can know which page they are looking at?
Thanks in advance.
If you are using php then you can set it like this.
1) Give class to each link
<li class="home">Home</li>
<li class="about">About</li>
<li class="contact">About</li>
Note : Give filename & classname same (If filename is home.php then class for this menu is "home")
2) In header.php use this code.
<?php
$class = basename($_SERVER['REQUEST_URI'], '.php?' . $_SERVER['QUERY_STRING']);
/* This basename function returns filename from url. For example if url is http://www.example.com/home.php?id=15, then this will return "home" only. */
?>
<script type="text/javascript" src="jquery.min.js"> <!-- Link your jquery library -->
<script type="text/javascript">
$(document).ready(function(){
$(".<?php echo $class; ?>").addClass('current');
});
</script>
This is a very basic and unsafe example, just so that you hopefully get the idea.
Find out first what page you're on, maybe you have a URL parameter called page that you call like index.php?page=home or index.php?page=contact.
<?php $page=$_REQUEST['page']; ?>
Then write your HTML:
Home<br>
Contact
Now add the class-checks to your links:
Home<br>
Contact
(This uses fancy inline IF statements, just because they fit the purpose so nicely. If you don't know them yet, I recommend to read up on them.)
If your $page variable is set to "home", this will generate the HTML source like so:
Home<br>
Contact
You could also include the entire class assignment into the PHP check:
<a href="index.php?page=home"<?=($page=='home'?' class="current"':'');?>>Home</a><br>
<a href="index.php?page=contact"<?=($page=='contact'?' class="current"':'');?>>Contact</a>
And that would generate the HTML source like this:
Home<br>
Contact
The most practical way would be to quite simply make a little function that generates everything for you, like for example this one:
<?php
function makeNavLink($pageName){
global $page;
$link='<a href="index.php?page='.$pageName.'"';
$link.=($page==$pageName?' class="current"':'').'>';
$link.=ucwords($pageName).'</a>';
return $link;
}
?>
That would allow you to call the function in your page like this:
<?=makeNavLink("home");?><br>
<?=makeNavLink("contact");?>
And it would also make the HTML output look like this if your page is "contact":
Home<br>
Contact
I can't comment because I don't have 50 rep, but I did some research and found this link How to have the class=“selected” depending on what the current page/url is. $_SERVER['REQUEST_URI'] is the approach that is used in this example. So if you need further clarification, you can look that up too.
Edit: This example does not require JQuery. Or you could try this:
<div class="menu">
<div id="whatever" class="whatever">
<ul>
<li><a href="index.php" <?php if (basename($_SERVER['PHP_SELF']) == "index.php") { ?> class="current" <?php } ?>>Home</a></li>
<li><a href="about.php" <?php if (basename($_SERVER['PHP_SELF']) == "about.php") { ?> class="current" <?php } ?>>About</a> </li>
</ul>
</div>
</div>
I just try to bulid control panel using MVC (codeigniter), I just need way to how make a side menu in home page and when I click in the link in menu the page open in the right side, and the menu stay in the left side.
I need coorect way to do this using MVC.
I use this simple way to make Views to make exactly what your asking.
<?php
//This is mainpage.php
$data['page_id'] = $_GET['page_id'];
?>
<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>
<body>
<div>
<!-- HERE Comes Side Bar -->
<?php $this->load->view('sidebar'); ?>
</div>
<div>
<!-- HERE Comes Main Content -->
<?php $this->load->view('maincontent',$data) ?>
</div>
</body>
</html>
Mainpage.php is a master page who holds code for both, side menu as well as the content page
This code if for side bar sidebar.php in view folder
<div>
<ul>
<li>Dashboard</li>
<li>Settings</li>
<li>Logout</li>
</ul>
</div>
sidebar.php page only holds different links, but all links have GET variable named "page_id" which decides which page is to be displayed in the content page.
Now, in mainpage.php you can notice that maincontent.php is loaded as view with passing $data which has page_id as variable, which is drived from sidebar. this will help to display the content in content side.
This code is for maincontent.php in view folder
<?php
if(file_exists(APPPATH.'views/'.$page_id.'.php')){
$this->load->view($page_id);
}else{
show_404();
}
this has always worked for me in non ajax page displays...so will work for you to.
Thanks...
I'm building my own CMS system and I want to create new pages dynamicly from a template. Just like in wordpress when you add a new Page.
This is the template:
<?php require_once('backend-nav.php');?>
<div id="main">
<div id="main-content" class="xlarge">
<article id="article-wrapper">
// My content needs to go here!
</article>
<?php require_once('backend-sidebar.php')?>
</div>
</div><!-- End main content container -->
<?php require_once('backend-footer.php')?>
<?php } else {
echo '<div class="container">You have to be logged in to view this page:.
'Login'.'</div>';
}
?>
I have made a form to submit the content that I want on the page, and then use the following code to open the templatet php file and save it as a new file on the server with the content for the page
$doc = new DOMDocument();
$doc->loadHTMLFile("new_page.php");
$article = $doc->getElementById('article-wrapper');
$p = $doc->createElement('p');
$addP = $article->appendChild($p);
$content = $doc->createTextNode($page_content);
$addP->appendChild($content);
// the url for the page is also submitted to the form and later added to the menu, which works.
$doc->saveHTMLFile($page_url.'.php');
Since there is no loadPHP function I'd recon I use this one. It also worked for me when adding the link to my main menu, which is also a PHP file.
Now the content gets added to the file, and is saved accordingly but for some reason it fucks up the code in some places like this, some sign are replaced like ? and > etc.:
require_once('backend-header.php');
?>
<?php if (isset($_COOKIE['username'])) { ?>
<?php require_once('backend-nav.php');?>
<html>
<body>
<div id="main">
<div id="main-content" class="xlarge">
<article id="article-wrapper">
<p>test content added in p tags</p></article>
<?php require_once('backend-sidebar.php')?> </div><!-- End main content container -->
</div>
<?php require_once('backend-footer.php')?><?php } else {
echo '<div class="container">You have to be logged in to view this page: ' .
'Login'.'';
}?></body></html>
the PHP ending tag before the html end tag is replaced
I have also tried fread/write to alter the file but I probably are not using things the right way.
Is there a way to add code to php file with php, or a other way to get what I'm trying to do?
Thanks!
DOMDocument only use to read XML and HTML, these have a structure. When you insert PHP code into html file, it is not realy a html anymore. Let see an example below.
The html code:
<a>text</a>
There is a node that named "a" have a content. DOMDocument can understand it well.
But
<a><?php if (false) : ?>true</a><? else: ?>false</a><?php endif ?>
DOMDocument can not understand php and it will read the first < /a> as the closer of < a>. How about the second one, the reader may try to read by fixing it or just ignore it or append something to make it become structured. So, you can not use DOMDocument in this case. You could try to use file_get_contents and replace the content then use file_put_contents to write it back.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I have a menu made with ul and li elements I use href to open a page when I click on one of the li , the problem is that I want to open the page that contains href in the same page in the main file, because I have a footer and a header.
A simple way to do it and without page refresh is to use AJAX technology and JS (+ just a bit of jQuery)
Search Engine friendly AJAX driven website:
BASIC EXAMPLE:
header.php
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>AJAX driven site - by Roko C.B. - TEST</title>
</head>
<body>
<?php include 'menu.html'; ?>
menu.html
<ul id="nav">
<li> HOME </li>
<li> FOO </li>
<li> BAR </li>
</ul>
footer.php
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script>
$(function(){ // DOM Ready (shorthand)
window.onpopstate = function(e) {
if(e.state){
$("#content").html( e.state.html );
document.title = e.state.pageTitle;
}
};
$('#nav a').click(function(e) {
e.preventDefault(); // prevent default anchor behavior
var URL = $(this).attr('href'); // get page URL
$('#page').html(''); // empty old HTML content.
// Target URL and get the #content element
// and put it into #page of this page
$('#page').load(URL +' #content', function(data){
// Load callback function.
// Everything here will be performed once the load is done.
// Put here whatever you need.
// ...
// Also, let's handle history and browser's AddressBar
var $data = $(data),
content = $data.find('#content').html(),
pageTitle = $data.find('h1').text();
window.history.pushState({"html":content, "pageTitle": pageTitle},"", URL );
});
});
});
</script>
</body>
</html>
Than all you need are your pages with the content:
index.php
<?php include 'header.php'; ?> <!-- header has menu.html -->
<div id="page">
<div id="content">
<h1>WELCOME!</h1>
<p>Article here...</p>
</div>
</div>
<?php include 'footer.php'; ?>
foo.php
<?php include 'header.php'; ?> <!-- header has menu.html -->
<div id="page">
<div id="content">
<h1>FOO!</h1>
<p>Foo Article here...</p>
</div>
</div>
<?php include 'footer.php'; ?>
bar.php
<?php include 'header.php'; ?> <!-- header has menu.html -->
<div id="page">
<div id="content">
<h1>BAR!</h1>
<p>Bar Article here...</p>
</div>
</div>
<?php include 'footer.php'; ?>
Documentation:
http://php.net/manual/en/function.include.php
http://api.jquery.com
http://api.jquery.com/load/
http://api.jquery.com/find/
http://api.jquery.com/html/
https://developer.mozilla.org/en-US/docs/Web/API/window.onpopstate
https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Manipulating_the_browser_history
What you need to do from reading you post is have the header and footer in their own separate files.
On all the pages include this header and footer where you want them, so when you open the new page up the header and footer will be the same across all the pages.
same for the menu. put it in its own file and include it in every page. then its always the same across every page and you only have to update one file.
#LazyBrain : then u just have to play around with id's.
for example:
<ul>
<li>Questions</li>
<li>Tags</li>
<li>Answers</li>
</ul>
<div id="questions">
....................
put your content for question page here
</div>
If you are using the target attribute within the href, take it out and you will open the link in the same window.
e.g.
Click Here - New window
Should be
Click Here - Current window
I believe this is what you are looking for, I've written a html page for you to demonstrate how you can use anchor tag to set your hyperlink reference(href) to the same page.
Try this
<html>
<body>
Go to footer
<div><a id="header">Your Header</a></div>
<div style="height:900px;"></div>
<div><a id="footer">Your Footer</a></div>
Go to Header
</body>
</html>
Update
Finally I got your problem, you want to use same footer and header on all your pages...Right??
Actually you are looking for a code that lets you use your already designed PHP files.
So you need just to use php include() function
Syntax:
Before your header section
<?php include 'header.php'; ?>
Before your footer section
<?php include 'footer.php'; ?>
Note:
You can also use <?php require 'header.php'; ?>
but this can generate an error in case your header and footer files are missing.
I am working on a custom wordpress homepage.
I want that it is loading in a different div in the header.
The header now loads the #content div for every page. But i want to let it load #contenthome div if the homepage loads.
I'm using this php-code:
<?php if (is_page_template('template-home.php')) { ?>
<div id="contenthome">
<?php } else { ?>
<div id="content">
<? } ?>
I'm fairly new to php. so i hope you guys can help me :)
Thanks a lot.
Or this:
if(is_home())
{
<div id="contenthome">
<?php } else { ?>
<div id="content">
<? } ?>
Personally, I prefer writing things in shorthand when it comes to cases like these. Consider also using this to shorten your code:
<div id="<?php echo is_home() ? 'contenthome' : 'content'; ?>">
ADDITIONAL NOTES: If your <body> tag has the Wordpress body_class() added to it, you can pretty much target individual pages with CSS, even when they're using the same template. The homepage, like any other page, will have a unique body class applied that will then allow you to target that particular page.
So if your issue is simply a matter of being able to target any given page regardless of template with CSS, you won't necessarily NEED to apply any unique divs to your page. For example:
<style type="text/css">
#content{display:block;}
.home #content{display:none;}
</style>
This will hide the content div only on the homepage. It's probably not what you want it to do, but you can see how the page itself is being targeted to override the default behavior.
UPDATE: As per your latest question, if you need another particular page to use that conditional, use is_page() like so:
LONG CODE:
if(is_home() || is_page('posts_page_title'))
{
<div id="contenthome">
<?php } else { ?>
<div id="content">
<? } ?>
SHORTHAND:
<div id="<?php echo is_home() || is_page('posts_page_title') ? 'contenthome' : 'content'; ?>">
If you prefer, you may also use is_page('posts_page_ID') or is_page('posts_page_slug'). Play around with it and see what works best for you. More information here: http://codex.wordpress.org/Function_Reference/is_page
With reference to this post Try this one....
$pagename = get_query_var('pagename');
if ($pagename = 'template-home.php') {
<div id="contenthome">
<?php } else { ?>
<div id="content">
<? } ?>
it seems like you already created a file in your theme just for the homepage and you called it template-home.php
from this point you have two options:
1) you can just define a constant (or variable) and decide what div to use only when it is defined; if you will use a variable remember that in header.php you are in fact inside a function (get_header) and you will need to use global to have access to it
2) if you foresee any other differences between the structure of the header between the main page and the rest of your wordpress you could use another file for the header. to do this, in your template-home.php file give a parameter to the get_header function, like get_header('home')
if you do this header-home.php will be loaded instead of header.php