Member Avatar for mangel.murti

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

  • 3 Contributors
  • 7 Replies
  • 876 Views
  • 11 Hours Discussion Span
  • Latest Post Latest Post by mangel.murti
Member Avatar for karthik_ppts 
<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>
Edited by karthik_ppts because: n/a
Member Avatar for vibhaJ

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>
Member Avatar for karthik_ppts

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

Processing.gif 10.42 KB
Edited by karthik_ppts because: n/a
Member Avatar for mangel.murti

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


thanx

Member Avatar for karthik_ppts

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

Member Avatar for vibhaJ

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.

Member Avatar for mangel.murti

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.