Here is my code ..
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
</head>
<body>
<form id="foo">
<label for="bar">A bar</label>
<input id="bar" name="bar" type="text" value="" />
<input type="submit" value="Send" />
</form>
<div id ="onsuccess"></div>
</body>
</html>
Javsacript:
<script>
// variable to hold request
var request;
// bind to the submit event of our form
$("#foo").submit(function(event){
$("#onsuccess").html('<img src="a.gif"/>');
var $form = $(this);
var serializedData = $form.serialize();
request = $.ajax({
url: "a.txt",
type: "post",
timeout:30000,
dataType: "text",
data: serializedData,
});
// callback handler that will be called on success
request.done(function (response, textStatus, jqXHR){
// log a message to the console
console.log("Hooray, it worked!");
$("#onsuccess").html(response);
});
// callback handler that will be called on failure
request.fail(function (jqXHR, textStatus, errorThrown){
// log the error to the console
console.error(
"The following error occured: " +
textStatus, errorThrown
);
});
// callback handler that will be called regardless
// if the request failed or succeeded
request.always(function () {
// reenable the inputs
// $inputs.prop("disabled", false);
});
// prevent default posting of form
event.preventDefault();
});
/*
$("#loading").ajaxStart(function(){
$(this).show();
}).ajaxStop(function(){
$(this).hide();
});
*/
$(document).ready(function(){
$(window).scroll(function(){
/*console.log("you are scrolling the page");
console.log("window scroll top ="+ $(window).scrollTop() );
console.log ("window height =" + $(window).height());
console.log("document height =" + $(document).height());
*/
if ($(window).scrollTop() == $(document).height()-$(window).height())
{
$("#onsuccess").append("<p>i was called because you are about to reach the page endi was called because you are about to reach the page endi was called because you are about to reach the page endi was called because you are about to reach the page endi was called because you are about to reach the page endi was called because you are about to reach the page endi was called because you are about to reach the page endi was called because you are about to reach the page endi was called because you are about to reach the page endi was called because you are about to reach the page endi was called because you are about to reach the page endi was called because you are about to reach the page endi was called because you are about to reach the page endi was called because you are about to reach the page endi was called because you are about to reach the page endi was called because you are about to reach the page endi was called because you are about to reach the page end i was called because you are about to reach the page end</p>");
}
});
});
</script>
Here i am trying to dynamically append the page through a random text....just studying the functionality of Ajax..i checked on mozilla and it worked...but not on chrome. any ideas..thanks
in chrome, i can see the spinner, the content of txt file doesn't load up...while in firefox..the content of txt file loads up and scroll function also works...((there is no question of scrolling thing in chrome since the document is empty and i can't scroll it down)) please tell me what more inputs should i give you..no error in firebug –</p>