Home/ Questions/Q 7875769
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T03:03:16+00:00

Since I did a change : Rewrite an asp.net mvc ajax actionlink as a

  • 0

Since I did a change : Rewrite an asp.net mvc ajax actionlink as a jquery/ajax statement
the following code does not offer anymore a smooth fade in/out animation when I click one of those three links: Why is
That ? 

        function OnBeginStuff() {
            $("#StuffPanel").fadeTo("slow", 0.50);
        }
        function OnCompleteStuff() {
            $("#StuffPanel").fadeTo("slow", 1.00);
        }

        $(document).ready(function () {

            $('.mainLink', $('#NavigationPanel')).click(function (e) {
                e.preventDefault();
                $.ajax({
                    url: $(this).attr('href'),
                    beforeSend: OnBeginStuff,
                    complete: OnCompleteStuff,
                    success: function (html) {
                        $('#StuffPanel').html(html);
                    }
                });
            });
        });
    </script>    
</head>
<body>
    <div id="NavigationPanel">
        @Html.ActionLink("1", "Index", "One", null, new { @class = "mainLink" })
        @Html.ActionLink("2", "Index", "Two", null, new { @class = "mainLink"  })
        @Html.ActionLink("3", "Index", "Three", null, new { @class = "mainLink" })    
    </div>
    <div id="StuffPanel">
        @RenderBody()
    </div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    is there any reason you are using both the #NavigationPanel and .mainLink for binnding the click function.
    try this 

    $('.mainLink').click(function (e) {
                e.preventDefault();
                $.ajax({
                    url: $(this).attr('href'),
                    beforeSend: OnBeginStuff,
                    complete: OnCompleteStuff,
                    success: function (html) {
                        $('#StuffPanel').html(html);
                    }
                });
            });

    or if you need to use both the selectors then add this line to the click event handler
    e.stopPropagation(); after e.preventDefault(); this way bubbling of the events will be stopped and only single call to ajax and OnBeginStuff and OnCompleteStuff will be sent.

    • 0