Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: C# ASP.NET Ajax jQuery JSON , +
Hi,
 
I am working on a task where I have used WebMethod using Json to insert and retrieve data from data base,
 
Now I want a gif image shows in a DIV whenever a WebMethod is called.
 
My js code is like this:
function getvalues(j, selectedTab) {
 $("#DVloading").show();
    $.ajax({
        type: "POST",
        url: "xxx.aspx/LoadData",
        data: "{'id':'" + j + "','selectedTab':'" + selectedTab + "'}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(msg) {
            if (msg.d.length > 0) {
                var dv = document.getElementById("xxxDiv");
                dv.innerHTML += msg.d;
            }
        },
        async: false,
        error: function(xhr, status, error) {
            //alert(xhr.statusText);
        }
    });
 $("#").hide();
} 
I have the page body like this:
<body>
    <form id="form1"  runat="server">
    <div>
        <div id="DVloading" style="display:none;">
          <img src="../Images/circular.gif" width="20" height="23" />
        </div>
        <div id="xxxDiv">
        </div> 
    </form>
</body></div>
But Here whenever the WebMethod is called the whole page is hanged for 10 second(the time to fetch data from DB) and nothing does. and when it loads all data then released the hanged. Image is not showing there.
 
Any help is greatly appreciated.
 
regards,
 
Tanweer,
Posted 19-Apr-11 22:15pm
tanweer14K
Edited 19-Apr-11 22:25pm
v2
Comments
Toniyo Jackson at 20-Apr-11 3:26am
   
Pre tag added
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

I noticed your tags are not properly closed or closed on the wrong location. Try to fix them first.
  Permalink  
v2
Comments
tanweer akhtar at 20-Apr-11 3:39am
   
Thank you very much for your reply. I don't think this is a tag closing problem here when I paste the html that was not encoded so an extra DIV was added there mistakenly.
My exact html is:
<body>
<form id="form1" runat="server">
<div>
<div id="DVloading" style="display:none;">
<img src="../Images/circular.gif" width="20" height="23" />
</div>
<div id="xxxDiv">
</div>
</div>
</form>
</body>
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

There are a couple of ways, to do this. One example
 
jQuery.ajaxSetup({
  beforeSend: function() {
     $('#loader').show()
  },
  complete: function(){
     $('#loader').hide()
  },
  success: function() {}
});
  Permalink  

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 OriginalGriff 230
1 PIEBALDconsult 150
2 DamithSL 125
3 Andreas Gieriet 90
4 Jochen Arndt 90
0 OriginalGriff 5,790
1 DamithSL 4,601
2 Maciej Los 4,012
3 Kornfeld Eliyahu Peter 3,480
4 Sergey Alexandrovich Kryukov 3,195


Advertise | Privacy | Mobile
Web02 | 2.8.141220.1 | Last Updated 30 Apr 2011
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100