ajaxStart loading images
ajaxStart loading images
So I have a page which will embed php file in a div. I am using jquery to load the php file, and handle the single form that is used. The form uses the datepicker to help pass variables to the php file. I want the php file to load via post, without any parameters when the page starts. When the from is submitted, the page should load (using the loading gif) with the new returned data from the php file. The loading gif only comes up when the window first loads the php file. Posting the form, and the page load does no use the loading animation, and I have no idea why. Shouldn't the ajaxStart catch all the post requests?
-
<script type="text/javascript">
<!--
$(document).ready(function() {
$('.calendar').datepicker({ dateFormat: 'yy-mm-dd', duration: 'fast' });
$().ajaxStart(function(r,s) {
$("#loading").html('Loading... <img src="images/loader.gif"><br/>Note: The loading time is based on the ammount of information being requested.'); });
$().ajaxStop(function(r,s) {
$("#loading").fadeOut("fast"); });
$("#dates_form").submit(function() {
var toVal = $('#dateToVar').val();
var fromVal = $('#dateFromVar').val();
$.post("chatlist.php", { dateFrom: fromVal, dateTo: toVal },
function(data) {
$("#chat p").html(data);
});
return false;
});
$(window).load(function() {
$.post("chatlist.php", function(introData) {
$("#chat p").html(introData); });
});
});
-->
</script>
</head>
<body>
<form id="dates_form" method="post" >
Date From: <input type="text" class="calendar" id="dateFromVar" readonly />
Date To: <input type="text" class="calendar" id="dateToVar" readonly />
<input type="submit" value="Submit"></form>
<!--
<br/>Todays Report : <input type="submit" value="Submit" class="Submit" id="chatToday">
-->
<div id="loading"></div>
<div id="chat"><p></p></div>
</body>
</html>