Добавленные AJAX элементы HTML не добавлены в DOM?

Question

Вот начальная страница:

Вот как это выглядит после нажатия на ссылку.

ПоИзучая исходный код, кажется, что элементы не помещены в него.Там должен быть div, нет?

Вот код, который запускается при нажатии на ссылку:

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

Я пытаюсь получитькаждый недавно добавленный <div> внутри #status div исчезает, используя этот 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"})

Однако каждый раз, когда я нажимаю на ссылку, значения выбираются и добавляются правильно, но все содержимое#status исчезают для просмотра.

Я предполагаю, что это потому, что исходный код не обновляется добавленными элементами, а метод .first () не находит того, что должен.

Есть идеи?

Answer 1

Изменения JavaScript в DOM не появляются при непосредственном просмотре исходного кода, поскольку view-source загружает страницу заново.Для просмотра изменений JS вы должны использовать инструменты проверки, для Firefox есть Firebug.Chrome имеет встроенный инструмент, щелкните правой кнопкой мыши по элементу div и выберите «Проверить элемент».

Answer 2

Если вы просто хотите показать первый вложенный div, сделайте это:

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

как здесь: http://jsfiddle.net/MarkSchultheiss/AeVnp/

Answer 3

Вы не можете иметь более одного объекта DOM с id="status". Если вы повторяете этот код более одного раза, то это проблема. Если вы хотите иметь несколько из них, измените идентификатор на класс, и тогда вызов .first() будет иметь смысл.

$("#status") никогда не вернет более одного объекта. И, если у вас есть более одного объекта с id="status", то от браузера к браузеру будет непонятно, какой объект вы получите, потому что это недопустимый HTML.

Измените HTML на это:

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

И тогда вы можете использовать этот jQuery с ним:

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

---

Редактировать: Поскольку выясняется, что ОП не хотел первого div статуса, они хотели первого дочернего div внутри div статуса. Недостаточно информации в вопросе, чтобы кто-либо из ответивших знал, что до тех пор, пока многие, многие комментарии не обменивались взад и вперед. Таким образом, правильный ответ был связан с получением первого ребенка.

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

Answer 4

Вам не нужно first() при выборе узла с идентификатором, так как в любом случае должен быть только один.

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

Как говорится, где вы размещаете html внутри $('#status')? Что такое InsertionMode = InsertionMode.InsertBefore? Почему бы просто не использовать $.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();
});