0

これは私の以前の質問に関連しています: How to add onclick function for programmatically created button .

現在、2 つのテキスト ボックス、ボタン、および非表示のテーブルを含むフォームがあります。ボタンをクリックすると、テーブルが表示され、行が追加され、2 つの列にテキスト ボックスの値が表示され、3 番目の列に削除ボタンが表示されます。削除ボタンをクリックすると、選択した行を削除できるようになりました。私の新しい問題は、データベースを更新できるように、1 列目と 2 列目のデータを取得するにはどうすればよいかということです。

JSON を使用してデータベースを更新します。これが私が現在持っているコードです：

$("#addToDisplay").click(function (event) {
    $("#tblProducts").removeClass("hide");
    var counter = 1;
    event.preventDefault();
    counter++;
    var prod = {prodName: $("#txtProducts").val(), prodQty: $("#txtQty").val()}
    $.ajax({
        type: "POST",
        traditional: true,
        url: "/Service/JsonUpdateProduct",
        dataType: "json",
        data: prod,
        success: function (result) {
            var newRow = "<tr><td id='rowProd" + counter + "'>" + $("#txtProducts").val() + "</td><td id='rowQty" + counter + "'>" + $("#txtQty").val() + "</td><td><input type='button' value='Remove' id='btnRemove" + counter + "' class='remove' /></td></tr>";
            $("#tblProducts").append(newRow);

            $("#tblProducts").on("click", ".remove", function () {
                $(this).closest("tr").remove();
                var rowCount = $("#tblProducts tr").length;
                var removeProd = {revertName: $("#rowProd" + counter).val(), revertQty: $("#rowQty" + counter).val()}
                $.ajax({
                    type: "POST",
                    traditional: true,
                    url: "/Service/JsonRemoveProduct",
                    dataType: "json",
                    data: removeProd,
                    success: function (result) {
                        if (rowCount == 1) {
                            $("#tblProducts").addClass("hide");
                        }
                    }
                });
                $("#productQty").val("");
                $("#autoCompleteText").val("");
            });
        }
    });
});

私はそのコードを試してきましたが、エラーを引き起こす数量の null 値しか得られません。では、選択した行から選択した ProductName と Quantity のデータを正確に取得するにはどうすればよいですか?

私は基本的にこのようなものを取得しようとしています:

var data = { prodName: $("#selectedRowCell1")}

そのため、それをクラスのメソッドに渡してデータベースを更新できます。

また、別のテーブルの現在の Id を取得し、それを別のテーブル + 1 に挿入することは可能ですか? 次のようなもの:

Select id from Details
then
Update Products set detailId = Details.id + 1

? 私はすでに試したので、これがうまくいかないことを知っています。では、このようなことは可能なのでしょうか?

4

1 に答える 1

1

まず、これらは個別のクリック イベントである必要があります。Ajax コールバック内でクリック イベントを定義しないでください。これが、メソッドを使用する理由ですon()。.on()として機能しevent delegatorます。はドキュメントへのバインドselectorです。これは、イベントをこの親要素にバインドできることを意味し、2 番目の引数として指定された場合、その子にイベントが委譲されます。static elementon page load and not after

 $("#addToDisplay").click(function (event) {
    //nothing to change here, omitted for length
 });

ここで、問題は を取得する方法ですproductData。.remove定義によると、製品データは、クラス要素がクリックされたときの行の前の 2 つの列です。やってみましょう。

$("#tblProducts").on("click", ".remove", function() {
    //when you do the following, you remove the entire row we need
    //lets not do that yet.
    //$(this).closest("tr").remove();

    var $this = $(this); //cachable -- save some performance, reference success

    var col1 = $this.closest('tr').find('#rowProd').text(), // first column
        col2 = $this.closest('tr').find('#rowQty').text(), //second column
        productData = { 'product' : col1, 'quantity' : col2};

    //now productData is properly populated with the values we need.

    $.ajax({
        type: "POST",
        traditional: true,
        url: "/Service/JsonRemoveProduct",
        dataType: "json",
        data: productData,
        success: function(result) {

            //ajax successful, NOW we'll remove the row.      
            $this.closest("tr").remove();

            if ($this.find('tr').length;) {
                $("#tblProducts").addClass("hide");
            }
        }
    });
    $("#txtQty").val("");
    $("#txtProducts").val("");
});​
于 2012-11-13T08:31:06.343 に答える