JQuery Ajax call gives 404 'Resource Not Found' Error but normal URL call is fine

Question

I have a weird problem when using JQuery call in my ASP.NET MVC project. I found that the Ajax call gives 404 ( resource not found error). But when I use the usual URL GET c

Answer 1

I also had the same problem. After using Firebug as Graviton had done, I saw that my path was wonky so I changed it to just the name of my action. Get_OrderLine is the name of my action in my controller. inv_item_id is the parameter passed to the controller action.

// Update OrderLine data by returning a JSON result
$('#itemsddl').click(function (e) {
    var selectedItem = $(this).val();
    var actionURL = "Get_OrderLine";
    var d = "inv_item_id=" + selectedItem;
    var uom = $('#uom');
    var size = $('#size');
    var unitLbs = $('#unitLbs');
    var totalLbs = $('#totalLbs');
    var shipName = $('#shipName');
    var hazardClass = $('#hazardClass');
    var unnaNo = $('#unnaNo');
    var packingGroup = $('#packingGroup');
    var placard = $('#placard');
    var ergNo = $('#ergNo');
    $.ajax({
        cache: false,
        type: 'GET',
        url: actionURL, 
        data: d,
        datatype: JSON,
        success: function (data) {
            uom.val(data.uom);
            size.val(data.size);
            unitLbs.val(data.unitLbs);
            totalLbs.val(data.totalLbs);
            shipName.val(data.shipName);
            hazardClass.val(data.hazardClass);
            unnaNo.val(data.unnaNo);
            packingGroup.val(data.packingGroup);
            placard.val(data.placard);
            ergNo.val(data.ergNo);
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert('Failed to query item - ' + thrownError + "\n" + "Full details: " + xhr.responseText);
        }
    });
    e.preventDefault();
});

This is my action which returns a JSON result to my jQuery. The jQuery function then handles mapping from JSON to HTML. Not very pretty, but it works.

public ActionResult Get_OrderLine(int? inv_item_id)
{
    HazmatInfoItem item = new HazmatInfoItem();
    item.itemId = "0";
    item.size = "0";
    item.unitLbs = 0;
    item.qty = 0;
    item.totalLbs = item.qty * item.unitLbs;
    item.shipName = "";
    item.hazardClass = "";
    item.unnaNo = "";
    item.packingGroup = "";
    item.placard = "";
    item.ergNo = "";

    var items = from i in hazmatRepository.GetAllItems()
                select i;

    // Get item details
    items = items.Where(i => i.INV_ITEM_ID.Contains(inv_item_id.ToString()));

    foreach (var i in items)
    {
        item.uom = i.UNIT_MEASURE_STD;
        item.size = i.INV_ITEM_SIZE;
        item.unitLbs = 1;
        item.totalLbs = item.unitLbs * item.qty;
        item.shipName = i.PAG_SHIPPING_NAME;
        item.hazardClass = i.HAZ_CLASS_CD;
        item.unnaNo = i.MSDS_ID;
        item.packingGroup = i.PACKING_CD;
        item.placard = i.PAG_PLACARD_TYPE;
    }

    return Json(item, JsonRequestBehavior.AllowGet);
}

I had originally added a new route to try to handle this, but commented it out to allow the default routing.

Hopefully these solutions can help someone else who has had a similar problem when trying to use .ajax with jQuery and MVC.