Question

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 finding what it should.

Any ideas?

Answer 1

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();