Dynamically loaded partial view dynamically load another partial

Question

Just wondering if this is even possible. I am making a store web application in asp.net MVC 4 i guess. And my articles have a category and a sub category. So I got this code which I can't make to work.

Script:

    $("#ManageCategories").click(function (e) {
    $.ajax({
        type: "GET",
        url: "Acp/LoadManageCategories",
        success: function (response) {
            $("#main-acp-display").html(response);
        },
        error: function () {
            alert("Error!");
        }
    });
});

$(".get-subcategories").click(function () {
    $.ajax({
        type: "GET",
        url: "Acp/LoadManageSubCategories",
        data: { subCategoryId: $(this).attr("id") },
        contentType: "application/json; charset=utf-8",
        dataType: "html",
        success: function (response) {
            $("#subcategory-display").html(response);
        },
        error: function (response) {
            alert(response.responseText);
        }
    });
});

(the first part works like a charm)

Controler:

[CustomAuthorize(Roles.Admin)]
    public ActionResult LoadManageCategories()
    {
        IEnumerable<CategoryModel> model = _categoryManager.GetAll().Select(x => (CategoryModel)x);
        return PartialView("Partial/_LoadManageCategories", model);
    }

    [CustomAuthorize(Roles.Admin)]
    public ActionResult LoadManageSubCategories(string subCategoryId)
    {
        int id = Convert.ToInt32(subCategoryId);
        IEnumerable<SubCategoryModel> model = _categoryManager.GetAllSubCategoriesByCategoryId(id).Select(x => (SubCategoryModel)x);
        return PartialView("Partial/_LoadManageSubCategories", model);
    }

Now you see the first level code works. When I click a div on index it loads all categories. But the other function wont load unless I place the clickable div on index page too and I wanted it to be a part of first partial view.

So it should be Button(click) > Shows all categories(click any) > Loads subcategories. Is this even possible?

Offtopic: Does MVC work only on one level? Cause I remember trying to have a Model with List of other models inside of it and inside this list there was another model and it wasn't so good xD (Managed to find simpler solution, but this is where I got the mvc one level only thought)

Update: So @bigless had an idea to make this a function so here it is so far:

    function createSubcategories(id) {
    $.ajax({
        type: "GET",
        url: "Acp/LoadManageSubCategories",
        data: { subCategoryId: id },
        contentType: "application/json; charset=utf-8",
        dataType: "html",
        success: function (response) {
            $("#subcategory-display").html(response);
        },
        error: function (response) {
            alert(response.responseText);
        }
    });
};

And calling it by:

<button onclick="createSubcategories(1)"><i class="fas fa-angle-double-right main-cat-icon"></i></button>

Current error: Uncaught ReferenceError: createSubcategories is not defined at HTMLButtonElement.onclick (Acp:89)

haven't u seen wizards of oz ? pour water on the code witch and she'll shrivel up. problem solved. — I wrestled a bear once., Jan 18 '18 at 17:34
@Iwrestledabearonce. I'm not sure are you trolling me or it has a hidden meaning :D — Morsus, Jan 18 '18 at 17:40
_Does MVC work only on one level_ - of course not, but this has nothing to do with mvc - its client side code. In addition to the dupe, read [Understanding Event Delegation](https://learn.jquery.com/events/event-delegation/) — , Jan 18 '18 at 20:14

bigless · Answer 1 · 2018-01-18T18:17:54.513

You can not attach event listener to DOM element(.get-subcategories) that does not exist yet. Try something like $(document).on('click', '.get-subcategories', function() { .. or:

$("#ManageCategories").click(function (e) {
    $.ajax({
        type: "GET",
        url: "Acp/LoadManageCategories",
        success: function (response) {
            $("#main-acp-display").html(response).ready(function() {
              $(".get-subcategories").click(createSubcategories);
            });
        },
        error: function () {
            alert("Error!");
        }
    });
});

function createSubcategories() {
    $.ajax({
        type: "GET",
        url: "Acp/LoadManageSubCategories",
        data: { subCategoryId: $(this).attr("id") },
        contentType: "application/json; charset=utf-8",
        dataType: "html",
        success: function (response) {
            $("#subcategory-display").html(response);
        },
        error: function (response) {
            alert(response.responseText);
        }
    });
};

This is a nice idea! I made a function, edited it a bit but now the page can't seem to find the function I created. All scripts are loaded in Shared/_Layout.cshtml. And I called it with — Morsus, Jan 18 '18 at 18:48

Dynamically loaded partial view dynamically load another partial

1 Answers1