displaying load image for 5 second

Question

mangel.murti 5 Helps you in some way

13 Years Ago

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

php

3 Contributors
7 Replies
878 Views
11 Hours Discussion Span
Latest Post 13 Years Ago Latest Post by mangel.murti

karthik_ppts 81 Posting Pro

13 Years Ago

<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 13 Years Ago by karthik_ppts because: n/a

vibhaJ 126 Master Poster

13 Years Ago

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.

Reply to this topic

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.

vibhaJ 126 Master Poster · Answer 1 · 2011-05-11T13:06:55+00:00

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>

karthik_ppts 81 Posting Pro · Answer 2 · 2011-05-11T13:21:16+00:00

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

mangel.murti 5 Helps you in some way · Answer 3 · 2011-05-11T17:10:46+00:00

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

thanx

karthik_ppts 81 Posting Pro · Answer 4 · 2011-05-11T17:31:57+00:00

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

mangel.murti 5 Helps you in some way · Answer 5 · 2011-05-11T17:56:14+00:00

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?