Skip to content

Instantly share code, notes, and snippets.

@johnmorris

johnmorris/about.php

Last active September 19, 2019 13:30
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save johnmorris/71a19a206c7dce786d7d to your computer and use it in GitHub Desktop.
Save johnmorris/71a19a206c7dce786d7d to your computer and use it in GitHub Desktop.
Download ZIP
Load content into a div on click using jQuery and AJAX (video tutorial here: http://youtu.be/ae-FqAt_VCA)
Raw
about.php
<h1>About</h1>
<p>This is the about page</p>
Raw
home.php
<h1>Home</h1>
<p>This is the home page</p>
Raw
index.php
<DOCTYPE html>
<html>
<head>
<title>Load a Page With AJAX and No Refresh</title>
<style>
#nav ul {
overflow: hidden;
margin: 0;
padding: 0;
list-style-type: none;
}
#nav ul li {
float: left;
}
#nav ul li a {
display: inline-block;
padding: 10px 15px;
}
#content {
padding: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
// Set trigger and container variables
var trigger = $('#nav ul li a'),
container = $('#content');
// Fire on click
trigger.on('click', function(){
// Set $this for re-use. Set target from data attribute
var $this = $(this),
target = $this.data('target');
// Load target page into container
container.load(target + '.php');
// Stop normal link behavior
return false;
});
});
</script>
</head>
<body>
<nav id="nav">
<ul>
<li><a href="#" data-target="home">Home</a></li>
<li><a href="#" data-target="about">About</a></li>
</ul>
</nav>
<div id="content">
<?php include('home.php'); ?>
</div>
</body>
</html>
Copy link

ghost commented Jun 18, 2016

@johnmorris Hello John, I just see one problem with your code. It works with page where you don't need to execute any php function but when it is necessary to run the PHP function it will not works. Do you have any idea how to load the php page and execute all functions present in that page? Thank you.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment