CODEWITHSUNDEEP
jquery
JQuery
JQuery

Reputation: 907

wait until .html() has loaded and then do something

I have seen a few threads and they all say that html() is a synchronous event so you just need to put your code after it, but all my alerts appear before the content is shown.

I have reverted to alerts as an click event I wanted to put on the loaded content wasn't working.

var URL = '@Url.Content("~/Controller/_Action")';

$.ajax({
                url: URL,
                type: 'POST',
                success: function (partialViewResult) {
                    $("#SideBarContent").html(partialViewResult);
                    alert('first')

                }                
            }).done(function () {
                alert('second');
            })
            alert('third');

all three alerts pop up, then the content loads.

I have also tried,

var d1 = $.Deferred();

            $.when(d1).then(function () {
                alert('loaded');
            });

            d1.resolve(LoadSideBarContent(url));

<script type="text/javascript">
    function LoadSideBarContent(url) {
        $("#SideBarContent").html();
        $("#SideBarContent").load(url);
    };
</script>

has something changed or is this different because I am using a partialview?

Upvotes: 1

Views: 573

Answers (1)

Royi Namir
Royi Namir

Reputation: 148524

but all my alerts appear before the content is shown

The fact that you see an alert , doesn't mean that the content is not in there / sent to be rendered.

Alert just blocks everything.

When you write something to the screen , it isn't written directly to the screen. It is sent to be rendered(!). There's a huge difference.

Anyway - If you want to see if the content is there you should do this : 

$.ajax({
                url: URL,
                type: 'POST',
                success: function (partialViewResult) {
                    $("#SideBarContent").html(partialViewResult);
                    console.log('first')

                }                
            }).done(function () {
                console.log('second');
            })
            console.log('third');

Also - it is unclear what did you try to do in : 

d1.resolve(LoadSideBarContent(url));


var d1 = $.Deferred();

            $.when(d1).then(function () {
                alert('loaded');
            });

            d1.resolve(LoadSideBarContent(url)); //<-- with what value you want to resolve  the Deffered object ?

<script type="text/javascript">
    function LoadSideBarContent(url) {
        $("#SideBarContent").html();    //<---What's this ?
        $("#SideBarContent").load(url);
    };
</script>

Upvotes: 2

Related Questions