Ajax Call not hitting controller when page is loaded

Question

I have an ajax call that seems to be working fine on another page, however when i call it on this page it doesnt work.

CSHTML page

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <script src="~/Script/jquery-1.12.2.min.js"></script>
    <script src="~/Script/moment.js"></script>
    <script type="text/javascript">
        function qs(key) {
            key = key.replace(/[*+?^$.\[\]{}()|\\\/]/g, "\\$&"); // escape RegEx meta chars
            var match = location.search.match(new RegExp("[?&]" + key + "=([^&]+)(&|$)"));
            return match && decodeURIComponent(match[1].replace(/\+/g, " "));
        }
        function initialiseForms() {
                $.ajax({
                    type: 'POST',
                    url:'@Url.Action("Index", "Home")',
                    contentType: 'application/json; charset=utf-8',
                    error: function (response) { alert(JSON.stringify(response)); }
                }).success(function (response) {
                    alert(JSON.stringify(response));
                });
        }
    </script>
</head>
<body onload="initialiseForms()">
    <h1 id="titleText"></h1>
    <form id="evolveFormsForm" method="post" target="_self" action="Test">
        <input type="hidden" id="formPackEventData" name="formPackEventData" value="" />
        <input type="hidden" id="selectedTemplateCodes" name="selectedTemplateCodes" value="" />
        <input type="hidden" name="logonMethod" value="automatic" />
    </form>
</body>
</html>

Controller

public ActionResult Index()
{
    return Json(new { success = true, rtn = "TEST" }, JsonRequestBehavior.AllowGet);
}

This alert(JSON.stringify(response)); works in the response but the breakpoint is not hit and the alert just displays an empty string.

Cheers

@SelimYıldız `@Url.Action("", "")` is the equivalent to url: `"/Home/Index"` — JamesS, Feb 26 '20 at 09:42
What are you posting to the `Controller`? I do not see any `data` element in your `AJAX` call. Did you mean to invoke a `GET` request? — Rahul Sharma, Feb 26 '20 at 09:45
@JamesS are you sure about it? [Ajax call Into MVC Controller- Url Issue](https://stackoverflow.com/questions/9988634/ajax-call-into-mvc-controller-url-issue/9988672), It can be the case. — Selim Yildiz, Feb 26 '20 at 09:46
@SelimYıldız I am going under the assumption that if OP is using MVC, that they would surely be using view's with the extension `cshtml`. I believe the issue with this question is that OP has the `success` outside of the actual `ajax` itself, as well as adding an extra `)` at the end. I am guessing that the `ajax` is failing however without OP adding a debugger into the function and telling us, it's just speculation. — JamesS, Feb 26 '20 at 09:49

score 0 · Answer 1 · answered Feb 26 '20 at 09:46

Shouldn't your ajax be like this?

            $.ajax({
                type: 'POST',
                url:'@Url.Action("Index", "Home")',
                contentType: 'application/json; charset=utf-8',
                error: function (response) 
                { 
                    alert(JSON.stringify(response)); 
                },
                success(function (response) 
                {
                    alert(JSON.stringify(response));
                }
            })

instead of

            $.ajax({
                type: 'POST',
                url:'@Url.Action("Index", "Home")',
                contentType: 'application/json; charset=utf-8',
                error: function (response) { alert(JSON.stringify(response)); }
            }).success(function (response) {
                alert(JSON.stringify(response));
            });

I feel like you have the success outside of the actual ajax as well as having an extra )

EDIT: An easy way for us to help you would be if you add a debugger; into the function itself and tell us if it throws an error in Google DevTools

Ajax Call not hitting controller when page is loaded

1 Answers1