why Ajax code not trigger on click or load

  ajax, javascript, jquery, model-view-controller

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>

    Source: Ask Javascript Questions

  • LEAVE A COMMENT