JQuery Ajax button isn't working

Question

I am extremely new at writing ajax and working with a restful api... so, bear with me.

I have a Laravel 5.2 RESTful API that I am using on the backend, and I'm attempting to simply load a list of categories using Jquery / Ajax. As you click through the categories, each child category loads fine, but I cannot seem to get the "back" button to work (by this, I mean the LI I am generating, not the browser back button). When you click it, it shows the alert - and the data is correct, but that's it. The list doesn't refresh and populate with the appropriate items.

EDIT

There are no errors being thrown to the javascript console either. It just won't populate from the ajax call.

EDIT

I removed the request.abort() right after I made the original post.

EDIT

Here is the JSON returned from the URL api/categories/4 - as an example.

[{"id":6,"parent":4,"name":"sub_subcat4_1","slug":"sub_subcat4_1","description":null,"created_at":null,"updated_at":null},{"id":7,"parent":4,"name":"sub_subcat4_2","slug":"sub_subcat4_2","description":null,"created_at":null,"updated_at":null}]

EDIT

Here is the HTML for the #categories

<div class="row">
<div class="col-sm-12">
    <ul id="categories">
    </ul>
</div>

The Javascript

    <script>
    /*
     * This loads the default / root categories.
     */
    function getRootCategories() {
        $.getJSON("api/categories", function(data) {
            var categories = [];
            $("#categories").html("");
            $.each(data, function(key, val) {
                $("#categories").append("<li class='subcat' data-id='" + val.id + "' onClick='getSubcats(this);'>" + val.name + '</li>');
            });
        });
    }

    /*
     * This loads the sub categories if there's any data returned. Otherwise, just leave the user where they are.
     */
    function getSubcats(cat) {
        var dataID = cat.getAttribute("data-id");
        alert(dataID);
        if(dataID == "null") {
            getRootCategories();
        }
        else {
            $.getJSON("api/categories/" + dataID, function (data) {
                if (data.length != 0) {
                    $("#categories").html("");
                    var newCats = '';
                    var parent = '';
                    $.each(data, function (key, val) {
                        parent = "<li class='subcat' data-id='" + val.parent + "' onClick='getSubcats(this);'>Back</li>";
                        newCats += "<li class='subcat' data-id='" + val.id + "' onClick='getSubcats(this);'>" + val.name + '</li>';
                    });
                    $("#categories").append(parent + newCats);
                }
            });
        }
    }

    $(document).ready(function() {
        $.ajaxSetup({ cache:false });
        getRootCategories();
    });
</script>

Answer 1

Ok, I just had my variables all mixed up. I wasn't setting the correct parent id.

The new script looks like this -

    <script>
    var previous = null;
    /*
     * This loads the default / root categories.
     */
    function getRootCategories() {
        $.getJSON("api/categories", function(data) {
            var categories = [];
            $("#categories").html("");
            $.each(data, function(key, val) {
                $("#categories").append("<li class='subcat' data-parent='" + val.parent + "' data-id='" + val.id + "' onClick='getSubcats(this);'>" + val.name + '</li>');
                previous = val.parent;
            });
        });
    }

    /*
     * This loads the sub categories if there's any data returned. Otherwise, just leave the user where they are.
     */
    function getSubcats(cat) {
        var dataID = cat.getAttribute("data-id");
        previous = cat.getAttribute("data-parent");

        if(dataID == "null") {
            getRootCategories();
        }
        else {
            $.getJSON("api/categories/" + dataID, function (data) {
                if (data.length != 0) {
                    $("#categories").html("");
                    var newCats = '';
                    var parent = '';
                    $.each(data, function (key, val) {
                        parent = "<li class='subcat' data-id='" + previous + "' onClick='getSubcats(this);'>Back</li>";
                        newCats += "<li class='subcat' data-parent='" + val.parent + "' data-id='" + val.id + "' onClick='getSubcats(this);'>" + val.name + '</li>';
                    });
                    $("#categories").append(parent + newCats);

                }
            })
            .fail(function(jqxhr, textStatus, error) {
                console.log("Request Failed: " + textStatus + " - " + error);
            });
        }
    }

    $(document).ready(function() {
        $.ajaxSetup({ cache:false });
        getRootCategories();
    });
</script>