locked
Ajax request don't give alert ASP.NET Core 2.2 Razor page. RRS feed

  • Question

  • User1518508822 posted

    Saving server request is success. but it doesn't provide alert and dynamic textboxes were disappeared. Are there any configurations issues or version problems ?

    AddOrEditPerson.cshtml

    @page "{Id?}"
    @model Users.Pages.AddOrEditPersonModel
    @{
    ViewData["Title"] = "AddOrEditPerson";
    Layout = "~/Pages/Shared/_Layout.cshtml";
    ViewData["Title"] = Model.IsNewUser ? "New User" : "Edit User";
    }
    <form method="post" enctype="multipart/form-data">
    <div class="col-md-10">
    <div class="col-md-7 mb-3">
    <input type="text" name="txtContact" asp-for="Person.Contacts" class="form-control" />
    </div>
    <div class="col-md-3 mb-3">
    <input type="button" class="btn btn-primary" onclick="AddTextBox()" value="Add More" />
    </div>
    </div>
    <div class="form-group">
    <div class="col-md-10">
    <button class="btn btn-primary" id="submit">Save</button>
    <button class="btn btn-primary" asp-page-handler="Delete" id="delete">Delete</button>
    </div>
    </div>
    </form>
    <script> $(function () { $('#submit').on('click', function (evt) { evt.preventDefault(); $.ajax({ url: '', data: new FormData(document.forms[0]), contentType: false, processData: false, type: 'post', success: function () { alert('Uploaded by jQuery'); } }); }); }); $(function () { $('#delete').on('click', function (evt) { evt.preventDefault(); $.ajax({ url: 'Admin/AddOrEditPerson?handler=Delete', data: new FormData(document.forms[0]), contentType: false, processData: false, type: 'post', success: function () { alert('Uploaded by jQuery'); } }); }); } </script>

    _Layout.cshtml

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>@ViewData["Title"] - Users</title>
    
        <environment include="Development">
            <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
            <script src="~/js/site.js"></script>
        </environment>
        <environment exclude="Development">
            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
                  asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
                  asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"
                  crossorigin="anonymous"
                  integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"/>
        </environment>
        <link rel="stylesheet" href="~/css/site.css" />
    </head>
    <body>
        <header>
            <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
                <div class="container">
                    <a class="navbar-brand" asp-area="" asp-page="/Index">Users</a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                            aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
                        <partial name="_LoginPartial" />
                        
                    </div>
                </div>
            </nav>
        </header>
        <div class="container">
            <partial name="_CookieConsentPartial" />
            <main role="main" class="pb-3">
                @RenderBody()
            </main>
        </div>
    
        <footer class="border-top footer text-muted">
            <div class="container">
                &copy; 2019 - Users- <a asp-area="" asp-page="/Privacy">Privacy</a>
            </div>
        </footer>
    
        <environment include="Development">
            <script src="~/lib/jquery/dist/jquery.js"></script>
            <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>
        </environment>
        <environment exclude="Development">
            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
                    asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                    asp-fallback-test="window.jQuery"
                    crossorigin="anonymous"
                    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=">
            </script>
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"
                    asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"
                    asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
                    crossorigin="anonymous"
                    integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o">
            </script>
        </environment>
        <script src="~/js/site.js" asp-append-version="true"></script>
    
        @RenderSection("Scripts", required: false)
    </body>
    </html>

    Wednesday, June 19, 2019 10:19 AM

Answers

  • User1518508822 posted

    Hi,

    My guess is that you still have a full postback which prevent the Ajax success callback to run as expected. What if your return false from your click handler ?

    Generally speaking I often suggest to not read code to find out what happens. Instead use debugging tools (for example F12 Network in your browser) to see what really happens when  your code runs and then look at your code see why it happens.

    Initially I used debugging tools. it didn't work.but this time it works.the error was 

     $ is not defined

    Solution is 

    Put the jquery.js before your script tag in the _Layout.cshtml. Thanks PatricSc for guidance.

    _Layout.cshtml

        <environment include="Development">
            <script src="~/lib/jquery/dist/jquery.js"></script>
            <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>
        </environment>
    
        <environment include="Development">
            <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
            <script src="~/js/site.js"></script>
        </environment>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, June 19, 2019 11:43 AM

All replies

  • User-821857111 posted

        $(function () {
            $('#submit').on('click', function (evt) {
                evt.preventDefault();
                $.ajax({
                    url: '',

    Where is this posting to? Can you show the handler method?

    Wednesday, June 19, 2019 10:49 AM
  • User753101303 posted

    Hi,

    My guess is that you still have a full postback which prevent the Ajax success callback to run as expected. What if your return false from your click handler ?

    Generally speaking I often suggest to not read code to find out what happens. Instead use debugging tools (for example F12 Network in your browser) to see what really happens when  your code runs and then look at your code see why it happens.

    Wednesday, June 19, 2019 11:08 AM
  • User1518508822 posted

    michale.p

    $(function () {
            $('#submit').on('click', function (evt) {
                evt.preventDefault();
                $.ajax({
                    url: '',

    Where is this posting to? Can you show the handler method?

    Check the second ajax call for Deleting record it contains handler method.

       $(function () {
            $('#delete').on('click', function (evt) {
                evt.preventDefault();
                $.ajax({
                    url: 'AddOrEditRecipe?handler=Delete',
                    data: new FormData(document.forms[0]),
                    contentType: false,
                    processData: false,
                    type: 'post',
                    success: function () {
                        alert('Uploaded by jQuery');
                    }
                });
            });
        });

    Wednesday, June 19, 2019 11:17 AM
  • User1518508822 posted

    adding handler method to first ajax call. but it doesn't give alert. 

    <div class="form-group">
            <div class="col-md-10">
                <button class="btn btn-primary" asp-page-handler="Save" id="submit">Save</button>
                <button class="btn btn-primary" asp-page-handler="Delete" id="delete">Delete</button>
            </div>
        </div>
        $(function () {
            $('#submit').on('click', function (evt) {
                evt.preventDefault();
                $.ajax({
                    url: 'AddOrEditPerson?handler=Save',
                    data: new FormData(document.forms[0]),
                    contentType: false,
                    processData: false,
                    type: 'post',
                    success: function () {
                        alert('Uploaded by jQuery');
                    }
                });
            });
    
        });

    Wednesday, June 19, 2019 11:28 AM
  • User-821857111 posted

    So what happens when you look at the network traffic in the browser developer tools? Does your AJAX request return anything?

    Wednesday, June 19, 2019 11:37 AM
  • User1518508822 posted

    Hi,

    My guess is that you still have a full postback which prevent the Ajax success callback to run as expected. What if your return false from your click handler ?

    Generally speaking I often suggest to not read code to find out what happens. Instead use debugging tools (for example F12 Network in your browser) to see what really happens when  your code runs and then look at your code see why it happens.

    Initially I used debugging tools. it didn't work.but this time it works.the error was 

     $ is not defined

    Solution is 

    Put the jquery.js before your script tag in the _Layout.cshtml. Thanks PatricSc for guidance.

    _Layout.cshtml

        <environment include="Development">
            <script src="~/lib/jquery/dist/jquery.js"></script>
            <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>
        </environment>
    
        <environment include="Development">
            <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
            <script src="~/js/site.js"></script>
        </environment>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, June 19, 2019 11:43 AM
  • User753101303 posted

    What if you add an error callback or use F12 Network to first make 100% sure if the Ajax request works fine or fails? Could it be something in your controller that fails after saving to the db ? Or maybe you still have a full postback causing the page to be refreshed and the callback to be never called ? Or maybe you mistakenly think data are saved when they are not ?

    Once again it's IMHO often much easier to just look at what happens when your code runs rather than trying to guess from the code.

    Edit: great to see it is solved. As you see this is a perfect case for something which is hard to GUESS if possible at all by reading code but that takes few seconds to figure out when using F12 in your browser to SEE what happens.

    Wednesday, June 19, 2019 11:55 AM
  • User1518508822 posted

    What if you add an error callback or use F12 Network to first make 100% sure if the Ajax request works fine or fails? Could it be something in your controller that fails after saving to the db ? Or maybe you still have a full postback causing the page to be refreshed and the callback to be never called ? Or maybe you mistakenly think data are saved when they are not ?

    Once again it's IMHO often much easier to just look at what happens when your code runs rather than trying to guess from the code.

    Edit: great to see it is solved. As you see this is a perfect case for something which is hard to GUESS if possible at all by reading code but that takes few seconds to figure out when using F12 in your browser to SEE what happens.

    No, It works properly. yeah there are some situations it is easy to figure out the issue without reading entire code. Thanks.

    Wednesday, June 19, 2019 12:14 PM