Can't get Jquery success method to work

147
November 22, 2016, at 09:18 AM

For the life of me cannot figure out how to display the values I'm returning from my 'cics' object from my controller. When I debug the controller it is returning the value. But I can't seem to figure out my 'Success' method on the ajax call. Can anyone please help me with where I'm going wrong? Also, This can have multiple products so I'm trying to keep it specific to that element. Any help would be much appreciated.

 function FillProductbyupc(el) {
        var val = el.value;
        var container = $(el).parent().parent();
        var pcics = container.children(".cics");
        var elements = document.getElementsByClassName('product');

        $.ajax({
            url: '/Case/GetData/',
            type: "GET",
            dataType: "JSON",
            data: "upc=" + val,
            success: function (cics) {
                //container.cics.val(cics.CorpItemCode);
                $("#upc").html(""); // clear before appending new list
                $("#corpitemcode").html(""); // clear before appending new list
                $("#itemdesc").html(""); // clear before appending new list
                $("#corpitemcode").append(
                    $('#corpitemcode').val(cics.CorpItemCode));
                $("#itemdesc").append(
                    $('#itemdesc').val(cics.ItemDsc));
            },
            error: function () {
                alert("UPC does not exist");
            }
        });
    }

Here is my product.

<div class="product">
<div class="alert alert-info" role="alert">
    <div class="row">
        <div class="form-group">
            <div class="col-md-2">
                @Html.LabelFor(x => x.UPC)<small><span class="glyphicon glyphicon-asterisk text-danger"></span></small>
                @Html.TextBoxFor(x => x.UPC, null, new { @class = "form-control produpc", placeholder = Html.DisplayNameFor(x => x.UPC), @onblur = "FillProductbyupc(this)" })
                @Html.ValidationMessageFor(x => x.UPC, "", new { @class = "text-danger" })
            </div>
            <div class="col-md-2">
                @Html.LabelFor(x => x.PLU)<small><span class="glyphicon glyphicon-asterisk text-danger"></span></small>
                @Html.TextBoxFor(x => x.PLU, null, new { @class = "form-control prodplu", placeholder = Html.DisplayNameFor(x => x.PLU) })
                @Html.ValidationMessageFor(x => x.PLU, "", new { @class = "text-danger" })
            </div>
            <div class="col-md-2">
                <label>CIC</label>
                @Html.TextBoxFor(p => p.CIC, new { @class = "form-control prodcic" })
            </div>
            <div class="col-md-2">
                <label>Desc</label>
                @Html.TextBoxFor(p => p.Description, new { @class = "form-control proddesc" })
            </div>
            <div class="col-md-1">
                <label>Size</label>
                @Html.TextBoxFor(p => p.Size, new { @class = "form-control prodsize" })
            </div>
            <div class="col-md-1">
                <label>Shelf Price</label>
                @Html.TextBoxFor(p => p.ShelfPrice, new { @class = "form-control prodprice" })
            </div>
            <div class="col-md-1">
                <label>Like CIC</label>
                @Html.TextBoxFor(p => p.LikeCIC, new { @class = "form-control prodlikecic" })
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            @Html.RemoveLink("Remove", "div.product", "input.mark-for-delete")
        </div>
    </div>
</div>

Controller.

  public JsonResult GetData(string upc, decimal? corpitemcode)
    {
        if (!string.IsNullOrEmpty(upc))
        {
            upc = upc.Replace("-", "");
        }
        CICS cics = new CICS();
        cics = CICSManager.GetbyUPCorCorp(upc, corpitemcode);
        return Json(cics, JsonRequestBehavior.AllowGet);
    }

Working function

function FillProductbyupc(el) {
var val = el.value;
var container = $(el).parent().parent();
var pcics = $(container).find('.prodcic');
var pdesc = $(container).find('.itemdsc');
$.ajax({
    url: '/Case/GetData/',
    type: "GET",
    dataType: "JSON",
    data: "upc=" + val,
    success: function (cics) {
        pcics.val(cics.CorpItemCode);
        pdesc.val(cics.ItemDsc);

    },
    error: function () {
        alert("UPC does not exist");
    }
});

}

Answer 1

html() and .append() are for adding to HTML nodes. I suspect what you want is:

        success: function (cics) {
            //container.cics.val(cics.CorpItemCode);
            $("#upc").val("");
            $("#corpitemcode").val(cics.CorpItemCode);
            $("#itemdesc").val(cics.ItemDsc);
        },

There's no need to clear before inserting new HTML.

READ ALSO
Is it possible for the click delay to restart on a new click

Is it possible for the click delay to restart on a new click

I have a list of ZIP codes that will each have a checkbox next to them. When the user checks or unchecks a ZIP, I'm redrawing a map that has the ZIP polygons drawn onto it.

177
Multiple upload files with ajaxForm plugin

Multiple upload files with ajaxForm plugin

I used the ajaxForm plugin to make multiple upload. The upload works perfectly, even can add files to the list and remove.

181
What&#39;s the best way to loop over an array in JSON?

What's the best way to loop over an array in JSON?

So I have a JSON file that has a departures array within it. I'd like to loop over each bus line and display them in div's like so:.

123
bxSlider breaking after show()

bxSlider breaking after show()

I'm using bxSlider on ticker mode and have a pair of buttons that respectively hide and show it with.

185