0

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
10
Views
6 Years
Discussion Span
Last Post by mangel.murti
0
<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: n/a

0

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>
0

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

Edited by karthik_ppts: n/a

Attachments Processing.gif 10.42 KB
0

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


thanx

0

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

1

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.

0

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?

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.