ready event on element not refired after ajax call

Question

I need to refresh a textarea element every few seconds. My solution involves calling the refresh method inside the controller inside the $("#element").ready with jquery ajax. I would expect that after the call has been made, the ready event would be refired, which unfortunately does not happen. Here is my javascript code :

$("#logTextArea").ready(function () {
    alert("ready!");
    setTimeout(reloadLogBox(), 5000);
});

function reloadLogBox() {
    $.ajax({
        url: '/json/AdminsStartUpdate/RefreshLogBox',
        type: "Post",
        success: function (response) {
            alert(response);
            $("#logTextArea").html = response;
        }
    });
}

and controller method (C# code) :

    [HttpPost]
    public JsonResult RefreshLogBox()
    {//breakpoint here
        //TODO : get log file contents
        string logContents = "Lorem ipsum dolor sit amet " + DateTime.Now.ToString("hh:mm:ss");

        return new JsonResult { Data = logContents };
    }

How can this be done correctly? I seached the internet a bit and found the on solution here Refire ready event after AJAX reload and in several other similar links, but I'm not certain on how to implement it in my particular case. Thanks!

Can you please try given solution once and let me know status — Yogesh Sharma, Jul 02 '14 at 10:22
Please try now I have created same solutions as yours but I have created web form to call in ajax and it's working fine — Yogesh Sharma, Jul 02 '14 at 10:33

Yogesh Sharma · Accepted Answer · 2014-07-02T10:29:32.493

2

I think you should use function pageload() in case of ajax call

Use below function may be it will help you, it's working for me

  setInterval(function() {
        reloadLogBox();
    }, 5000);
function reloadLogBox() {
    $.ajax({
        url: '/json/AdminsStartUpdate/RefreshLogBox',
        type: "Post",
        success: function (response) {
            alert(response);
            $("#logTextArea").html = response;
        }
    });
}

Something like this please refer below link

http://encosia.com/document-ready-and-pageload-are-not-the-same/

edited Jul 02 '14 at 10:29

answered Jul 02 '14 at 09:48

Yogesh Sharma

2,017
1
15
33

So you mean replace `$("#logTextArea").ready()` with `function pageLoad()`? – Alex Barac Jul 02 '14 at 10:04
Yes I think you should use this – Yogesh Sharma Jul 02 '14 at 10:05
It does not work, I only receive the alert message once, and the breakpoint in the controller only gets hit once as well... – Alex Barac Jul 02 '14 at 10:11
aah so you want that text box refresh in every few second we should apply some scheduler for that and schedule our job within some time – Yogesh Sharma Jul 02 '14 at 10:18
Please try to use setinterval function instead of setTimeout once – Yogesh Sharma Jul 02 '14 at 10:19
The solution with setinterval is Sid M's answer, and the outcome is the same. The call is performed only once – Alex Barac Jul 02 '14 at 10:32
Can you please copy and paste my Jquery code and let me know if it's not working – Yogesh Sharma Jul 02 '14 at 10:35
I don't know what I did wrong, but thank you! It works like a charm! – Alex Barac Jul 02 '14 at 11:14

score 0 · Answer 2 · answered Jul 02 '14 at 09:57

Try this

$("#logTextArea").ready(function () {
    alert("ready!");
    setinterval(reloadLogBox(), 5000);
});

Ready function is always called once. Textbox gets ready first time it loads. It won't load again. You are just making changes to it. So ready won't be called again. So instead of timeout use setinterval() method to call the function at regular intervals. Or you can use recursion in the ajax call when the call completes you can call settimeout again in the ajax call to repeat itself after some time.

The call to the controller is still made only one time – Alex Barac Jul 02 '14 at 10:11 — Alex Barac, Jul 02 '14 at 10:11

score 0 · Answer 3 · edited May 23 '17 at 10:26

ready event executes only once when HTML-Document is loaded and DOM is ready

Go through this link for more details.

Now, what you need is this.

    $(document).ready(
    function () {
        setInterval(function () {
            alert("refresh!");
        }, 500);
    });

OR

$("#logTextArea").ready(function () {
            setInterval(function () {
                alert("ready!");
            }, 500);
        });

DEMO

score 0 · Answer 4 · answered Jul 02 '14 at 10:57

First you have to use setInterval instead of setTimeout since you need to fire this every few seconds. Try following code;

$("#logTextArea").ready(function () {
    alert("ready!");
    setInterval(function () { reloadLogBox() }, 5000);
});

function reloadLogBox() {
    $.ajax({
        url: '/home/RefreshLogBox',
        type: "Post",
        success: function (response) {
            alert(response);
            $("#logTextArea").html(response);
        }
    });
}

There $("#logTextArea").html = response; should be $("#logTextArea").html(response);. Thanks!

ready event on element not refired after ajax call

4 Answers4