error in JSON response MVC 4

Question

i'm trying to bind json values to specific text boxes it is not working on a static already present textbox but it is working with dynamically created textboxes. i'm stuck with this problem from 2 days, i have searched internet but couldn't found any solution. i'm sharing what i have done so far

JQUERY:

function bindData(auto, BP) {
    var errormsg = "";
    var amount = $(auto).val();

    $.ajax({
        type: "GET",
        url: '/Admin/Ticket/GetPart',
        data: {
            'term': amount
        },
        dataType: "json",
        success: function (data) {
            if (data != null) {
                if (data.length > 0) {

                    $(BP).val(data[0].Price);
                } else {

                    $(BP).val('');
                }
            }

        },
        error: function (jqXHR, exception) {
            $('#error').html(jqXHR)
        }
    });
};


$(function () {
    window.count = 0;
    $("#del").hide();
    $("a[id^='add']").live("click", null, function () {

        var l = $("#maintable > tbody > tr").length;
        if (l > 0) {
            $("#del").fadeIn('300');
        }

        window.count++;
        var PartNumber = "PartNumber" + window.count;

        var BP = "BuyingPrice" + window.count;

        var btnAddID = "add" + window.count;
        var btnDelID = "del" + window.count;
        var table = $("#maintable");

        var tr = $("<tr></tr>")
            .append($("<td><input id='" + PartNumber + "' type='text' style='width:130px;' /></td>"


        + "<td><input id='" + BP + "' type='text' /></td>"

        ));
        tr.appendTo(table);

    });

    $("#del").click(function () {

        var l = $("#maintable > tbody > tr").length;
        if (l == 2) {
            $("#del").fadeOut('300');
        }
        $('tr:last').remove();

    });

    $("input:text[id^='PartNumber']").live("keyup", null, function () {

        bindData("input:text[id^='PartNumber" + window.count + "'" + "]",

            "input:text[id^='BuyingPrice" + window.count + "'" + "]");

        $(this).autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: '/Admin/Ticket/GetPart',
                    type: "GET",
                    dataType: "json",
                    data: {
                        term: request.term
                    },
                    success: function (data) {
                        if (data != null) {
                            if (data.length > 0) {
                                response($.map(data, function (item) {
                                    return {
                                        label: item.PartNumber,
                                        value: item.PartNumber
                                    };
                                }))
                            } else {
                                response([{
                                    label: 'No results found.'
                                }]);
                            }
                        }
                    }
                })
            },
        });

        $(this).autocomplete();

    });
});

HTML:

<table id="maintable">
    <thead>
        <tr>
            <th>Part No</th>
            <th>BP</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input type="text" name="abcd" id="PartNumber" style="width:130px;" />
            </td>
            <td>
                <input class="buyingprice text-box single-line" id="buyingprice" name="BuyingPrice" type="text" value="" />
            </td>
        </tr>
    </tbody>
</table>

JSON Response:

[{
    "PartNumber": "ASD345UI32411",
    "Manufacturer": "asdasdasd",
    "DateCode": "asdasdasdasd",
    "Price": 120.00,
    "PackageCase": "asdasdasas"
}]

Please guide me

Answer 1

I believe the problem is here...

bindData("input:text[id^='PartNumber" + window.count + "'" + "]",
        "input:text[id^='BuyingPrice" + window.count + "'" + "]");

and

<input type="text" name="abcd" id="PartNumber" style="width:130px;" />
<input class="buyingprice text-box single-line" id="buyingprice" name="BuyingPrice" type="text" value="" />

Your inputs in the html doesn't have an id of "PartNumber" + a number. It is just "PartNumber" so you need a bindData call for just "PartNumber". The same goes for the "BuyingPrice" input.

You would need a call like...

bindData("input:text[id^='PartNumber'" + "]",
        "input:text[id^='BuyingPrice'" + "]");

Your other option is to change the html to...

<input type="text" name="abcd" id="PartNumber0" style="width:130px;" />
<input class="buyingprice text-box single-line" id="BuyingPrice0" name="BuyingPrice" type="text" value="" />

then the only javscript change would be...

window.count = 1;