CODEWITHSUNDEEP
javascriptajaxasp.net-mvc-4
rogerthat
rogerthat

Reputation: 1815

grab IDs from list items to update div with ajax

I'm a little stuck here. I have a page that displays three different views by loading with jQuery: a view of all categories associated with the user, the image and name of all the items within the category that is selected and a full detail view of all the properties of the item selected. HOw to get the id of the category selected than display the items and same with the item to display the full details. Ajax isn't the problem, so I think.

When the user clicks on an <li> within the test <div> this fires to retrieve items for that category

$(document).ready(function() {
$('#test li').click(function() {
    //get id of cat selected
    $.ajax({
        url: "",
        type: "POST",
        data: {//return all the item info},
        success: function(data) {
            //when returns display updated results
        }
    });
});

I figure it would be the same as when you click an item. But how to write the query for the controller. Right now I'm just displaying all:

//Item Controller
//two queries; one for displaying items when certain cat is selected and
// another to display full details when an item is selected

public ActionResult Partial(Item item)
    {

        //var query = from i in db.Items
        //            orderby i.dateAdded
        //            where i.user_id==4
        //            select i;
        //var results = query;


         var model = db.Items;


        return PartialView("_Partial1", model);

    }
    public ActionResult PartialTwo() //pass in the catId??
    {
        var query = from d in db.Items
                    // how to get catID which is in the item table?
                    select d;
        var results = query;


        return PartialView("_FullInfoPartial", results);

    }
    //Category controller
    //get the categories from 
    public ActionResult GetCats( Category cat)
    {
        var query = from c in db.Cats where c.user_id == 4 orderby c.catId select c;
        var results = query;
        return PartialView("_PartialGetCats", results);
    }

Am I on the right track?

Upvotes: 1

Views: 341

Answers (1)

Amin Saqi
Amin Saqi

Reputation: 18977

A trick can be that for each <li> element, create a <input type="hidden" value="catID" ...> element for holding ids of categories.

So, as you render the category names in your view, add another line to create a hidden field for storing that category id like the following:

<li id="liCat1">

</li>
<input type="hidden" name="liCat1" value="catID1" />

Note that I set the name of the hidden field asa same as the id of the related li element.

Then, change your jquery like the following:

$(document).ready(function() {
    $('#test li').click(function() {
        var selector = "input[name='" + $(this).id + "value']";
        var catID = $(selector).val(); 
        // Now, you have the categoryID in the catID variable. Enjoy using it...!
        $.ajax({
            url: "...",
            type: "POST",
            data: {//return all the item info},
            success: function(data) {
                //when returns display updated results
            }
        });
    });
});

Upvotes: 1

Related Questions