Currently browsing category: beginners tutorial
Anchor based permanent navigation for ajax pages
Ok here is how to make anchor based permanent navigation for your ajax pages. (* I’m using jquery as js library here)
var anchor_hash = $(document).attr('location').hash;
this code will pull the #part of the url
if you have url like http://www.example.com/page.php#welcome
it will pull #welcome to the anchor_hash variable in js.
So now you can use ajax to pull welcome page to show in the page.php
$.ajax({
url:'get_page.php',
type:'POST',
data:'page='+anchor_hash,
success:function(html){
$('div.content').html(html);
}
})
So now when you type in url http://www.example.com/page.php#welcome
the page.php will load welcome page always even when you refresh page.
Full example codes
following is your page.php
<html>
<head>
<title>welcome to anchor based navigation</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var anchor_hash = $(document).attr('location').hash;
$.ajax({
url:'get_page.php',
type:'POST',
data:'page='+anchor_hash,
success: function(html){
$('div.content').html(html);
}
});
});
</script>
</head>
<body>
<div class="content">
Welcome to example.com
</div>
</body>
</html>
Now in get_page.php we will load the requested page sent from ajax through page.php.
<?php
if(isset($_POST['page']))
{
switch($_POST['page'])
{
case 'welcome':
//load welcome page here
break;
case 'contact':
//load contact page here
break;
}
}
?>
So now whenever you go to http://www.example.com/page.php#welcome it will load welcome page and when you go to http://www.example.com/page.php#contact it will load you contact page
Making accessible Ajax web form
I am a fan of jquery and I am used to of it so I am going to use jquery as a library for examples I provide here. OK let’s start on how to make ajax form first. What we usually do is as follows.
First create a form
A simple form that accepts full name of the user.
<form id="ajaxform" method="post" action="action.php"> <input type="text" name="full_name" id="full_name" /> <input type="submit" name="submit" value="submit" /> </form>
Now js(ajax) part
$('#ajaxform').submit(function(){
$.ajax({
url:'action.php',
type:'POST',
data:'full_name='+$('#full_name').val(),
success:function(response){
if(response=='success')
{
alert('we have recieved your first name');
}
else
{
alert('something went wrong we are looking in to it');
}
}
});
return false;//returning false so that form is not submitted as we will be submitting it through js
});
OK now this is a simple ajax form that we did. For accessibility the question comes is how we handle data that is sent from js enabled browser and not enabled browser. However the request is sent to the action.php is both condition with the post data we will need to distinguish the request coming from the js enabled browser and the ones where js is not enabled. So what we do is add a parameter to the js data field and tell action.php that it is coming from the js enabled browser. please look at the difference in the js code below.
Now js(ajax) part
$('#ajaxform').submit(function(){
$.ajax({
url:'action.php',
type:'POST',
data:'full_name='+$('#full_name').val()+'&is_js_enabled=1',
success:function(response){
if(response=='success')
{
alert('we have recieved your first name');
}
else
{
alert('something went wrong we are looking in to it');
}
}
});
return false;//returning false so that form is not submitted as we will be submitting it through js
});
Now we can make action.php as follows
<?php
if(isset($_POST['is_js_enabled']))
{
//we will show user some fancy html here so that they don't just see success and failed text
if(isset($_POST['full_name']))
{
<div class="success">
<p>We got your full_name</p>
</div>
}
else
{
<div class="failed">
<p>We were not able to get your full_name</p>
</div>
}
}
else
{
//we will return success or failed message here
if(isset($_POST['full_name']) and $_POST['full_name']!='')
{
echo 'success';
}
else
{
echo 'failed';
}
}
OK all Done this can be your accessible Ajax web from now