JQuery is not updating <div> tag, but rather display message on a new blank page!_问答_开发者

JQuery is not updating <div> tag, but rather display message on a new blank page!

开发者 https://www.devze.com 2022-12-15 19:15 出处：网络

I\'m learning JQuery, and I\'d like to isolate basic functionalities. On my \'Index\" page, there is only one item, an \'AJAX.Link\' displaying the following message \'Say Hello!\". here\'s the mark u

I'm learning JQuery, and I'd like to isolate basic functionalities. On my 'Index" page, there is only one item, an 'AJAX.Link' displaying the following message 'Say Hello!". here's the mark up:

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

%>
</div>

When clicked, the link calls the Hello action method located in the Home Controller.

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

On success, the Ajax.ActionLink calls the following JQuery function:

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

Unfortunately, Instead of getting the updated in the same page (= the Index page), I rather get the "Hello World" message on a new page with the following URL (http://localhost:51531/Home/H开发者_开发百科ello). Of cause, there's no such page as Hello.aspx.

Why It's showing the 'Hello World' message in new blank page? instead of updating the on the Index page? Am I missing something?

I'm really new to JQuery. This sample comes from the ScottGu's NerdDinner Tutorial that I tried to adapt in order to understand how JQuery works.

Here's how I referenced the libraries:

<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>

Thanks for helping

With Ajax.ActionLonk helper you don't use jQuery really. This helper utilize Microsoft Ajax Library, not jQuery. And it's very probable that you don't reference this library's js files. That is why link works like a plain link.

You could achieve the same with the following jQuery code.

<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>

Code is not tested!

I'd like to point out several things.
- Link is generated with plain Html helper.
- Ajax functionality is added with jQuery to the link (click event).
- return false; statement prevents link default processing, i.e. following href.
- AnimatedHello function now performs additional task: filling div with response.

See documentation:
http://docs.jquery.com/Events/click#fn
http://docs.jquery.com/Ajax/jQuery.get#urldatacallbacktype
http://docs.jquery.com/Attributes/html#val