jQuery referencing a div generated with a partial

Question

I have this partial view rendered multiple times on a page:

@model POS.Domain.Entities.Category

<div class = "category" id= "@Model.Name">
    <h2>@Model.Name</h2>
    <a href='javascript:getView();'>Get Partial View</a>
    <script type="text/javascript">
        function getView() {
            $('#divResult').load("@Url.Action("ProductList" , "Product", new {category = Model.Name})");
        }
    </script>
    <div id="divResult">
    </div>
</div>

The idea is that when someone clicks the Get Partial View link, it will load the partial view generated by my ProductList action in my Product controller using the category value Model.Name and append that partial view to the appropriate divResult div.

The problem is that after the page has loaded, if a user clicks on any of the GetPartialView links, it loads the list of products contained within the final category and appends them to the top-most divResult div.

I am hoping for a bit of guidance in changing the script to use jQuery to appropriately load the information. I also feel that I should not be repeating the script every time this partial view is loaded. . . So how would I write the appropriate jQuery script that would do the following when the user clicks one of the Get Partial View links:

• get the id of the parent div of the link (@ModelName)
• use that id to make a call to my Action: @Url.Action("ProductList", "Product", new {category = **that id**})";
• append the partial view returned by that Action to a div with the id of divResult that is within the parent div we found two steps above this step

Update

Here is the Html from my view:

<div class = "category" id= "Balls">
    <h2>Balls</h2>
    <a href='javascript:getView();'>Get Partial View</a>
    <script type="text/javascript">
        function getView() {
            var $category = $(this).closest(".category");
            var categoryName = $category.attr("id");
            //var categoryName ="Balls";
            $('.divResult').load("/Product/ProductList",
                {category: categoryName});
        }
    </script>
    <div class="divResult">
    </div>   
</div>
<div class = "category" id= "Drinks">
    <h2>Drinks</h2>
    <a href='javascript:getView();'>Get Partial View</a>
    <script type="text/javascript">
        function getView() {
            var $category = $(this).closest(".category");
            var categoryName = $category.attr("id");
            //var categoryName ="Balls";
            $('.divResult').load("/Product/ProductList",
                {category: categoryName});
        }
    </script>
    <div class="divResult">
    </div>   
</div>   

If I manually pass the value of Balls to categoryName - I can receive products from the Balls category, but if I use var categoryName = $(this).closest(".category").attr("id"); I get undefined.

Maybe seeing the HTML will help?

Answer 1

You can use the second parameter of the load function to pass data along with the load request. Check http://api.jquery.com/load/

Change the getView function to as follows:

function getView(e) {
  e.preventDefault();
    var $category = $(this).closest(".category");
  var categoryName = $category.attr("id");
   $('.divResult', $category).load("@Url.Action("ProductList" , "Product")", {
     category: categoryName
    });
}

Update: Same ID cannot be used for multiple elements on a page. And since you are loading the partial view mutliple times and appending you would end with multiple elements having same ID. Change your partial view to as follows(use class instead of ID):

@model POS.Domain.Entities.Category

<div class = "category" id= "@Model.Name">
    <h2>@Model.Name</h2>
    <a href='/get-partial-view'>Get Partial View</a>
    <div class="divResult">
    </div>
</div>

and move the getView function to the parent view:

<script type="text/javascript">
        function getView() {
                var categoryName = $(this).closest(".category").attr("#id");
                $('.divResult').load("/Product/ProductList",
                        {category: categoryName});
        }

        $(function(){
            $(".category").on("click", "a", getView);
        });
</script>