refresh page using jquery ajax

Question

I have a web application where I am showing user comments on a page with its posting time. Since there are comments posted regularly so I need to update the comment posting time after every 1 minute. For this purpose I am using jquery ajax to update the time from db. My code is this:

<script type="text/javascript">

 setInterval("UpdateTime()", 60000);


function UpdateTime() {
    var id=$('#hdID').val();
    $.ajax({
        type: "POST",
        url: "mypage.aspx/UpdateTime",
        data: "{'id':'" + id + "'}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(msg) {
            if (msg.d.length &gt; 0) {
                obj = document.getElementById('feed_TimeStamp' + id);
                obj.innerHTML = msg.d;
                //$(obj).slideDown("slow");
            }
        },
        async: false,
        error: function(xhr, status, error) {
            //alert(xhr.statusText);
        }
    });
}

</script>

cs file:

   [WebMethod]
   public static string UpdateTime(string id)
   {
       Comments comments = new Comments();
       string time = &quot;&quot;;
       if (comments.LoadByPrimaryKey(Convert.ToInt32(id)))
           time = MyClass.GetTime(comments.CommentsDate);
       if (!(time.ToLower().Contains(&quot;sec&quot;) || time.ToLower().Contains(&quot;min&quot;)))
           time = &quot;&quot;;
       return time;
   }

But here my issue is after every 1 minute when this web Method is executed the whole webpage is hanged away until the ajax call is finished. I want to refresh the time without busing the page.

Please format your code. Nobody will be able to help you if he can't read the code... — Stefan Gehrig
– Stefan Gehrig, Commented Jun 17, 2011 at 7:53
Mistake #1, using setInterval to (re)trigger an ajax request. It's bound to create problems. Worst-case scenario: self-imposed DDOS. Use setTimeout instead and create a new timer once the ajax request is completed. — mekwall
– mekwall, Commented Jun 17, 2011 at 8:00
Mistake #2, using async: false. You are doing it wrong, removing the a from ajax is contradicting. — mekwall
– mekwall, Commented Jun 17, 2011 at 8:03
thanks for your reply, how can I use setTimeout as I need to call the method after every 1 minute?? — tanweer
– tanweer, Commented Jun 17, 2011 at 8:09

Rakesh Sankar · Accepted Answer · 2011-06-17 08:08:46Z

2

This could be a memory PROBLEM + change the settings in your ajax call for async.

from

async: false

to

async: true

when you say async: false that means you are not allowing the browser to send your request in Asynchronous way which is quite opposite to AJAX - it should be an asynchronous call.

See the documentation here:

async Default: true By default, all requests are sent asynchronously (i.e. this is set to true by default). If you need synchronous requests, set this option to false. Cross-domain requests and dataType: "jsonp" requests do not support synchronous operation. Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active.

Suggestion:

I think you are trying to load all comments which could be a LOT in memory if your result set is high for browser to keep the data and post it on the element.

I would suggest you to request only new data from the server instead of whole "which is not on the comments panel", that way you are not bugging browser to keep everything in the memory.

edited Jun 17, 2011 at 8:08

answered Jun 17, 2011 at 8:02

Rakesh Sankar

9,4255 gold badges45 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

tanweer Over a year ago

thanks for your reply, no I am not fetching whole data, I am just getiing the date and calculate it as passed time since this comment is posted, I found another issue when using async: true; that id changes my perimeter 'id' to something else like when I passed 5, it sometime 0 in the webmethod.

Rakesh Sankar Over a year ago

@tanweer it was just a suggestion. I doubt it would affect, it will be always correct as long as $('#hdID').val(); has not changed the value. Alert this value and confirm it.

JMax · Accepted Answer · 2012-08-30 08:07:29Z

1

When you use the jquery ajax function with the

async: false,

the page will remain busied until the request ends.

edited Aug 30, 2012 at 8:07

answered Jun 17, 2011 at 8:00

JMax

26.7k12 gold badges74 silver badges89 bronze badges

Comments

kheya · Accepted Answer · 2011-06-17 08:31:25Z

0

Take this out: async: false (by default it is true)

You should not make ajax call in synchronusly unless extreme rare case where you must wait.

This will definitely lock the page from functioning (not even a mouse click possible)

answered Jun 17, 2011 at 8:31

kheya

7,62920 gold badges80 silver badges116 bronze badges

Collectives™ on Stack Overflow

refresh page using jquery ajax

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related