AJAX added HTML elements aren't added to the DOM?

Here's the initial page:

Here is how it looks after the link is clicked.

Upon examining the source code, it seems the elements aren't placed into it. There should be a div in there no?

Here's the code that's run when the link is clicked:

public ActionResult GetStatus()
{
    return Content("<div>Status OK - " + DateTime.Now.ToLongTimeString() + ".</div>");
}

I'm trying to have each newly added <div> inside the #status div fade into view, by using this Javascript:

<script type="text/javascript">
    function Update() {
        $("#status").first().hide().fadeIn();
    }
</script>

@Ajax.ActionLink("Update Status", "GetStatus", new AjaxOptions { UpdateTargetId = "status", InsertionMode = InsertionMode.InsertBefore, OnSuccess = "Update"})

However every time I click the link, the values are fetched and added correctly, but the entire contents of #status fade in to view.

I'm guessing this is because the source code isn't updated with the newly added items, and the .first() method isn't fin开发者_运维知识库ding what it should.

Any ideas?

JavaScript changes to DOM don't appear when you view-source directly, because view-source loads the page newly. To view JS changes you have to use inspection tools, for Firefox there is Firebug. Chrome has a built in tool, right click the div and choose "Inspect element".

IF you just want to show the first enclosed div do this:

$('#status').children().hide().first().fadeIn();

as here: http://jsfiddle.net/MarkSchultheiss/AeVnp/

You cannot have more than one DOM object with the id="status". If you're repeating this code more than once, then that is a problem. If you want to have several of them, change the identifier to a class and then the .first() call will make some sense.

$("#status") will never return more than one object. And, if you have more than one object with id="status", it will be inconsistent from browser to browser which object you get because it's illegal HTML.

Change the HTML to this:

<div class="status">No Status Yet.</div>

And then you can use this jQuery with it:

$(".status").first().hide().fadeIn();

Edit: As it turns out the OP didn't want the first status div, they wanted the first child div inside the status div. Insufficient info in the question for any of the answerers to know that until many, many comments were exchanged back and forth. So, the right answer had to do with fetching the first child.

$("#status").children().first().hide().fadeIn();

You don't need first() when selecting a node with an ID, as there should only be one anyway.

$("#status").hide().fadeIn();

That being said, where are you populating the html inside $('#status') ? What is InsertionMode = InsertionMode.InsertBefore ? Why not just use $.ajax() ?

function Update() {
    $.ajax({
        url: 'update_status.php',
        type: 'get',
        dataType: 'text',
        success:function(data){
            $('#status').hide().html(data).fadeIn();
        }
    });
}

$('#my_update_button').click(function(){
    Update();
});