hi all,

i want loading image should be display first for 3-4 second on every search button click then result should be display.

$(document).ready(function () {
$('#form').submit(function() {
						   
  $('#dsr').addClass('loading');
  $.ajax({
    type: 'get',
    url: 'search_hotel.php',
    data:  $('#'+this.id).serialize(),
	dataType: "html",
	async:false,
    success: function(result){
      $('#dsr').html(result);
    },
    complete: function() {
      $('#dsr').removeClass('loading');
    }
  });  
  return false;
});
});

any help appre...
thnx

Recommended Answers

All 7 Replies

<body>
    <DIV align="center" id="prepage" style="position:fixed; left:0px; top:0px; height:122px; width:132px; margin-left:45%;margin-top:20%;"> 
        	<table width=100%><tr><td align="center"><img src="images/Processing.gif" border="0" alt="Processing" /></td></tr></table>
    </DIV>

    ------------
    ------------
    <input type="submit" name="search" id="search" value="Search" class="button" onclick="showProcessing()" />
</body>
</html>

<script type="text/javascript">
	function showProcessing()
	{
		document.getElementById("prepage").style.display='';
	}
	document.getElementById("prepage").style.display='none';
</script>

I prefer below steps:
1. create div for loading text or image.
2. With binding ajaxStart event we can show loading div.
3. With binding ajaxStop event we can hide loading div.
4. This way in you page whenever ajax ia called loading div will automatically shown.

Below is code for that..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
</head>

<body>
<!-- ################# Ajax Loading start ################# -->
<script language="javascript">
$(document).bind('ajaxStart', function() {
  $('#ajaxLoading').show();
});
$(document).bind('ajaxStop', function() {
  $('#ajaxLoading').hide();
});
</script>
<div id="ajaxLoading" style="background-color:#777777;position:fixed;height:100%;width:100%;left:0px;top:0px;opacity:0.7;filter:alpha(opacity=70); display:none;"><div style="position:absolute;top:30%;left:45%;">Loading....</div>
</div>
<!-- ################# Ajax Loading end ################# -->


<script language="javascript">
$(document).ready(function () {
$('#form').submit(function() {
						   
  $.ajax({
    type: 'get',
    url: 'search_hotel.php',
    data:  $('#'+this.id).serialize(),
	dataType: "html",
	async:false,
    success: function(result){
      $('#dsr').html(result);
    }    
  });  
  return false;
});
});
</script>
<form id="form" name="form" method="post">
Name : <input name="" type="text" />
<input name="submit" value="submit" type="submit" />
</form>
</body>
</html>

Processing.gif image is attached here. You can use your own image instead of this in my previous post.

can i set time let say that for 3 second that loading text will visible after 3 second that request has to proceee.


thanx

can i set time let say that for 3 second that loading text will visible after 3 second that request has to proceee.


thanx

Yes.. you can use settimeout function of javascript in function call

can i set time let say that for 3 second that loading text will visible after 3 second that request has to proceee.


thanx

I would suggest you to not limit it for static 3 sec.
Because sometimes based on server speed it may differs.
I had situation in past where sometimes it takes millisecond or some times if ajax page is taking time then it may take some more seconds.
So better to not take fix 3 SECONDS.

I would suggest you to not limit it for static 3 sec.
Because sometimes based on server speed it may differs.
I had situation in past where sometimes it takes millisecond or some times if ajax page is taking time then it may take some more seconds.
So better to not take fix 3 SECONDS.

ok , i understand the concept , but if i want to do it then how to do it?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.