locked
A Beginner Question about Javascript/Ajax Problem RRS feed

  • Question

  • User248267340 posted

    I am learning Asp.Net Core 3.0, and I am practicing with some code from a teacher over at Udemy, but something isn't working right.

    I have a controller with a method called "GetAll()". It gets data from the DB and displays to the view when it's loaded.

    Trouble is, the data is not loading at all. The instructor told me something is wrong with the javascript file, but I'm not convinced.

    If you could just quickly look at the file and tell me if it looks right to you, then I'll accept that.

    In short, the controller loads the view, the view has "/js/categories.js" as a reference, and upon loading is supposed to run the GetAll()

    method in the controller. Do you see anything in the javascript file below that might look wrong?

    Or, is there supposed to be some fancy library that I should load to use javascript with ajax?

    Here's the script contents for categories.js:

    var dataTable;

    $(document).ready(function () {
    loadDataTable();
    });

    function loadDataTable() {

    dataTable = $('#tblData').DataTable({
    "ajax": {
    "url": "/admin/Categories/GetAll",
    "type": "GET",
    "datatype": "json"
    },
    "columns": [
    { "data": "name", "width": "50%" },
    { "data": "displayOrder", "width": "20%" },
    {
    "data": "id",
    "render": function (data) {
    return `<div class="text-center">
    <a href="/Admin/Categories/Upsert/${data}" class='btn btn-success text-white' style='cursor:pointer; width:100px;'>
    <i class='far fa-edit'></i> Edit
    </a>
    &nbsp;
    <a onclick=Delete("/Admin/Categories/Delete/${data}") class='btn btn-danger text-white' style='cursor:pointer; width:100px;'>
    <i class='far fa-trash-alt'></i> Delete
    </a>
    </div>
    `;
    }, "width": "30%"
    }
    ],
    "language": {
    "emptyTable":"No records found."
    },
    "width":"100%"
    });
    }

    Sunday, January 26, 2020 4:12 AM

Answers

  • User-525215917 posted

    Additionally see what's reported on network tab of browser tools. There are all requests with response code. Pay attention to all response codes over 300.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, January 27, 2020 7:40 PM

All replies

  • User-525215917 posted

    Why not using browser's developer tools for debugging?

    1. Open your page in browser
    2. Click F12 or CTRL-SHIFT-I to open developer tools
    3. Refresh page
    4. Check if there are errors written on console
    5. Check the body of response when browser makes request to /admin/Categories/GetAll

    With these five steps it should be clear to you if error is on client-side or on server-side.

    Sunday, January 26, 2020 2:13 PM
  • User-719153870 posted

    Hi coreysan,

    As DigiMortal mentioned, you could press F12 and use the devtools to see the detailed error message.

    If it's related to jQuery, please make sure you've added the jQuery and jQuery Datatable reference files and in the right order.

    Or if it's 500 error, please check the Network in your devtools and click the resource that error occurred (usually it's red) and see the true error message in the right. Or share us your controller code.

    Best Regard,

    Yang Shen

    Monday, January 27, 2020 5:13 AM
  • User248267340 posted
    Thank you all so much for helping me out with this. I wish I knew what you know.

    You gave me an idea. I will go through all my link references for accuracy and no typos.
    I will test to make sure all support javascripts are being loaded too.

    F12 showed no messages at all, as if the script wasn't even there. Thats why I should verify
    That my link reference paths are accurate.

    I will follow up shortly.

    Again, thank you so much for your help.
    Corey
    Monday, January 27, 2020 5:35 PM
  • User-525215917 posted

    Additionally see what's reported on network tab of browser tools. There are all requests with response code. Pay attention to all response codes over 300.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, January 27, 2020 7:40 PM
  • User248267340 posted

    Brilliant! I'm learning a ton here. Thank you so much!<br>
    <br>
    So I looked at the Network tab and no exit code was over 200.<br>
    Then I did a test with this line:<br>
    A asp-action=admin/category/getall. I ran the app and used network tab. And I could see a reference to<br>
    getAll() with a code of 200.<br>
    <br>
    So I ran the original script again and there is NO reference to admin/category/GetAll anywhere in
    The network tab dialog.<br>
    <br>
    So for some reason my app loads the view, runs the javascript, but doesnt ever call admin/category/getall,<br>
    Even though the script has a line to call it.<br>
    <br>
    This seems closer to the real problem. Why wont the script call the method that it references?<br>
    This is intriguing to me!!!
    Monday, January 27, 2020 9:13 PM
  • User-719153870 posted

    Hi coreysan,

    my app loads the view, runs the javascript, but doesnt ever call admin/category/getall

    This is strange since the getall function needs to be called to fill your view. Is it possible you can share us your getall method and any other related controller code so that we can see if the problem can be reproduced?

    Best Regard,

    Yang Shen

    Tuesday, January 28, 2020 2:42 AM
  • User248267340 posted
    Everyone,

    I have learned a great deal here, so please accept my grateful thanks.

    I finally solved the problem. I've never worked with Javascript and Ajax
    Before so this is all new to me.

    I have 4 css files and 6 javascript files that run the master page, and for
    Some reason one or more of them was not loading.

    So I copied the file contents of the 10 files off the internet and made them all local files.
    Once I did that, everything worked perfectly.

    The reason I am grateful for your input is because you all could not see
    My project and yet were very patient with me. So again, thank you very much!

    I learned a lot about how to troubleshoot and how to make better use of F12.
    Tuesday, January 28, 2020 5:12 PM