JQuery не обновляет тег <div>, а отображает сообщение на новой пустой странице! - PullRequest
Новая
       1

JQuery не обновляет тег <div>, а отображает сообщение на новой пустой странице!

0 голосов
/ 10 января 2010

Я изучаю JQuery, и я хотел бы выделить основные функции. На моей странице «Указатель» есть только один элемент: « AJAX.Link », отображающий следующее сообщение « Say Hello! » вот наценка: 

<div id = "helloDiv">
<% = Ajax.ActionLink("Say Hello!",
                     "Hello",
                     new AjaxOptions {UpdateTargetId = "helloDiv",
                                      OnSuccess = "AnimatedHello"
                     })

%>
</div>

При щелчке ссылка вызывает метод действия Hello, расположенный в домашнем контроллере. 

    public ActionResult Hello()
    {
        return Content("Hello World!");
    }

В случае успеха Ajax.ActionLink вызывает следующую функцию JQuery: 

<script type = "text/javascript">
    function AnimatedHello() {
        $("#helloDiv").animate({ fontSize: "1.5em" }, 400);
    }
</script>

К сожалению , вместо обновления на той же странице (= страница индекса) я получаю сообщение «Hello World» на новой странице со следующим URL (http://localhost:51531/Home/Hello). Конечно, такой страницы, как Hello.aspx, нет.

Почему на новой пустой странице отображается сообщение «Hello World»? вместо обновления на странице индекса? Я что-то упустил?

Я действительно новичок в JQuery. Этот пример взят из учебника ScottGu по NerdDinner, который я попытался адаптировать, чтобы понять, как работает JQuery.

Вот как я ссылаюсь на библиотеки: 

<head runat="server">
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-1.3.2.min-vsdoc.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
</head>

Спасибо за помощь

1 Ответ

2 голосов
/ 10 января 2010

С помощником Ajax.ActionLonk вы на самом деле не используете jQuery. Этот помощник использует Microsoft Ajax Library, а не jQuery. И очень вероятно, что вы не ссылаетесь на js-файлы этой библиотеки. Вот почему ссылка работает как простая ссылка.

Вы можете добиться того же с помощью следующего кода jQuery. 

<div id = "helloDiv">
<% = Html.ActionLink("Say Hello!", "Hello") %>
</div>
<script type = "text/javascript">
    $(document).ready(function(){
        $("#helloDiv > a").click(function(){
            $.get(this.href, AnimatedHello);
            return false;
        });
    });

    function AnimatedHello(data) {
        $("#helloDiv").html(data).animate({ fontSize: "1.5em" }, 400);
    }
</script>

Код не проверен!

Я бы хотел отметить несколько вещей.
- Ссылка создается с помощью простого помощника HTML.
- Функциональность Ajax добавлена ​​с помощью jQuery к ссылке (событие click).
- return false; оператор запрещает обработку ссылки по умолчанию, т.е. после href.
- AnimatedHello функция теперь выполняет дополнительное задание: заполнение div ответом.

См. Документацию:
http://docs.jquery.com/Events/click#fn
http://docs.jquery.com/Ajax/jQuery.get#urldatacallbacktype
http://docs.jquery.com/Attributes/html#val

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...