Last active
September 19, 2019 13:30
-
-
Save johnmorris/71a19a206c7dce786d7d to your computer and use it in GitHub Desktop.
Load content into a div on click using jQuery and AJAX (video tutorial here: http://youtu.be/ae-FqAt_VCA)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<h1>About</h1> | |
<p>This is the about page</p> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<h1>Home</h1> | |
<p>This is the home page</p> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@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.