Question posted in
You can find the official documentation here.

why Ajax code not trigger on click or load – Jquery ajax

Thanks for you all.

I am new in coding MVC, and I am trying to code a page that will create and

  • as parent and child loop, using data from JSON (MenuHandler.ashx), the JSON data is tested and it’s ok, but the Ajax was not working.

    for your kind note: the Alert working before and after Ajax

    this is my VIEW page:

     <script type="text/javascript">

        $(document).ready(function () {

            $("#testaj1").click(function () {

                alert ("test22")
                
                $.ajax({
                    url: 'MenuHandler.ashx',
                    method: 'get',
                    dataType: 'json',
                    success: function (data) {

                        buildMenu($('#menu'), data)
                        $('#menu').menu();
                        
                       
                    }


                });
                alert("test33")
            });

            function buildMenu(parent, items) {
                $.each(items, function () {
                    var li = $('<li>' + this.Name + '</li>');


                    li.appendTo(parent);

                    if (this.List && this.List.length > 0) {


                        var ul = $('<ul></ul>');
                        ul.appendTo(li);
                        buildMenu(ul, this.List);


                    }

                })

            }

        })
       
        

    </script>
     <link href="~/Content/MyCSS/MyCSS.css" rel="stylesheet" />
    @model IEnumerable<pedigree.Models.pedigree1>

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
   
 
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

    <script src="~/Scripts/jquery-3.5.1.js"></script>

    <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>




    <title>Index</title>
</head>
<body>
    <p>
        @Html.ActionLink("Create New", "Create")
    </p>

    <form>
        <button id="testaj1" type="button" >test</button>

        <div class="tree">

            <ul id="menu">
            </ul>


        </div>
    </form>
    • Tags:

    2

    Answers


    1. Chosen as BEST ANSWER
      0

      Thanks for everyone as Alejandro Coronado said, the issue was in the handler.ashx file, I don’t now why wasn’t worked, but when I use instead json result action The Ajax worked and the results came according to my expectations

      Thanks everyone


    2. 0

      The most common reason is the controller that you are pointing, maybe the controler uri is not correct, also be sure that your controller is returning a JSON.

      Login or Signup to reply.
    Please signup or login to give your own answer.

    Back To Top
    Search