Hi,
I m using this javascript code.
for form submission i am using ajax.The problem is date calender is not showing
when i use ajax file.
If i remove ajax file,its working fine.
Need help as i am using ajax first time
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PG Accomodation</title>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="requirement_validation.js"></script>
<script type="text/javascript">jQuery(document).ready(function($) {$('a[rel*=facebox]').facebox() })</script>
<link rel="stylesheet" media="screen" href="styles/vlaCal-v2.1.css" type="text/css" />
<script type="text/javascript" src="jslib/mootools-1.2-core-compressed.js"></script>
<script type="text/javascript" src="jslib/vlaCal-v2.1-compressed.js"></script>
<style>
.pickerImg { position: absolute; margin-left: -16px; margin-top: 5px; cursor: pointer; }
.infoBox { background-color: #fefdec; border: 1px solid #edebcd; padding: 6px; margin-bottom: 20px; }
</style>
<script type="text/javascript">
window.addEvent('domready', function()
{
new vlaDatePicker('exampleII', { separator: '.', leadingZero: true, twoDigitYear: false, offset: { y: 3 }, alignX: 'center', alignY: 'bottom' });
new vlaDatePicker('exampleI', { separator: '.', leadingZero: true, twoDigitYear: false, offset: { y: 3 }, alignX: 'center', alignY: 'bottom' });
new vlaDatePicker('exampleIII', { openWith: 'togglePicker', offset: { y: -2, x: 2 }, separateInput: { day: 'day', month: 'month', year: 'year' } });
new vlaDatePicker('exampleIV-A', { style: 'adobe_cs3', offset: { y: 1 }, format: 'm/d/y', ieTransitionColor: '' });
new vlaDatePicker('exampleIV-B', { style: 'apple_widget', offset: { x: 3, y: 1 } });
new vlaCalendar('exampleV', { startMonday: true });
new vlaDatePicker('exampleVI', { defaultView: 'year' });
new vlaDatePicker('exampleVII', { prefillDate: { day: 12, month: 12, year: 2012 } });
});
</script>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function() {
function isValidEmailAddress(emailAddress) {
var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
return pattern.test(emailAddress);
};
$(document).ready(function()
{
$("#username").blur(function()
{
//remove all the class add the messagebox classes and start fading
$("#msgbox").removeClass().addClass('messagebox').text('Checking...').fadeIn("slow");
//check the username exists or not from ajax
$.post("user_availability.php",{ username:$(this).val() } ,function(data)
{
if(data=='no') //if username not avaiable
{
$("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
{
//add message and change the class of the box and start fading
$(this).html('This email Already exists').addClass('messageboxerror').fadeTo(900,1);
$("#password").attr("disabled", "disabled");
$("#rpassword").attr("disabled", "disabled");
$("#mobile").attr("disabled", "disabled");
$("#city").attr("disabled", "disabled");
$("#name").attr("disabled", "disabled");
$("#type").attr("disabled", "disabled");
});
}
else
{
$("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
{
//add message and change the class of the box and start fading
$(this).html('Email available to register').addClass('messageboxok').fadeTo(1000,1);
});
}
});
});
});
$(".submit").click(function() {
var name = $("#name").val();
var username = $("#username").val();
var password = $("#password").val();
var type = $("#type").val();
var mobile= $("#mobile").val();
var city=$("#city").val();
var rpassword=$("#rpassword").val();
var dataString = 'name='+ name + '&username=' + username + '&password=' + password + '&rpassword=' + rpassword+ '&type=' + type + '&mobile=' + mobile + '&city=' + city;
if(name=='' || username=='' || password=='' || rpassword=='' || type=='' || city=='' || mobile=='')
{
$('.success').fadeOut(200).hide();
$('.error').fadeOut(200).show();
$('.pwd_error').fadeOut(200).hide();
$('.error1').fadeOut(200).hide();
$('#msgbox').fadeOut(200).hide();
$("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
{
//add message and change the class of the box and start fading
$(this).html('Email available to register').addClass('messageboxok').fadeTo(1000,1).hide();
});
}
else if( !isValidEmailAddress(username) )
{
$('.success').fadeOut(200).hide();
$('.error').fadeOut(200).hide();
$('.error1').fadeOut(200).show();
$('.pwd_error').fadeOut(200).hide();
$('#msgbox').fadeOut(200).hide();
$("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
{
//add message and change the class of the box and start fading
$(this).html('Email available to register').addClass('messageboxok').fadeTo(1000,1).hide();
});
}
else if(!(password==rpassword))
{
$('.success').fadeOut(200).hide();
$('.error').fadeOut(200).hide();
$('.pwd_error').fadeOut(200).show();
$('.error1').fadeOut(200).hide();
$('#msgbox').fadeOut(200).hide();
$("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
{
//add message and change the class of the box and start fading
$(this).html('Email available to register').addClass('messageboxok').fadeTo(1000,1).hide();
});
}
else
{
$.ajax({
type:"POST",
url:"join.php",
data:dataString,
success: function(){
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
$('.pwd_error').fadeOut(200).hide();
$('.error1').fadeOut(200).hide();
$('#msgbox').fadeOut(200).hide();
$('#name').val('');
$('#type').val('');
$('#password').val('');
$('#rpassword').val('');
$('#username').val('');
$('#mobile').val('');
$('#city').val('');
}
});
}
return false;
});
});
</script>