0

わかりましたので、これに対する答えを見つけ始める最善の方法はわかりません。そのため、この質問は紛らわしいと思われるかもしれません。

これが取引です。特定の合計を作成するために、複数の「子アイテム」に依存する、私が作成した API を利用したいと思います。

したがって、「アイテム入力行」が動的に作成される UI を構築したい (難しいことではありません) が、同様の方法で入力を使用して、これらの行のセットを ajax できるようにしたいと考えています。

{
    item01:
        input1: value,
        input2: value
    item02:
        input1: value,
        input2: value
.....

もちろん、最初に考え[]たのは、入力名で使用して、同じ名前の入力を複数回渡すことです。これは、各行に同じ入力があるためです。ただし、各投稿アイテムはその入力名を介した各入力の配列になるため、これは私が望む POST 形式を提供しません。これは、結果が返されたときにすべてが正しいアイテム行に関連付けられていることを確認するための作業が増えることを意味します (合計だけでなく個々の結果も存在するため)。

それで、誰かが私が達成したいと思っていることに似たようなことをしましたか? シリアル化する前に、入力を 1 つの大きな POST オブジェクト内の個々のオブジェクトにグループ化する方法はありますか?

サンプル HTML

<div id="Items" class="row">
    <fieldset class="fieldset-item ui-corner-all">
        <legend><p>Item</p></legend>
        <fieldset class="fieldset-item-input ui-corner-all">
            <legend><p>Input</p></legend>
            <table>
                <thead>
                    <tr>
                        <th><div>In 1</div></th>
                        <th><div>In 2</div></th>
                        <th><div>In 3</div></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><div><input name="in1" type="text" class="text-center ui-widget-content ui-corner-all"></div></td>
                        <td><div><input name="in2" type="text" class="text-center ui-widget-content ui-corner-all" /></div></td>
                        <td><div><input name="in3" type="text" class="text-center ui-widget-content ui-corner-all" /></div></td>
                    </tr>
                </tbody>
            </table>
        </fieldset>
        <fieldset class="fieldset-item-output ui-corner-all ui-corner-all">
            <legend><p>Output</p></legend>
            <table>
                <thead>
                    <tr>
                        <th><div>Out 1</div></th>
                        <th><div>Out 2</div></th>
                        <th><div>Out 2</div></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><div><input name="out1" readonly="readonly" type="text" class="text-center ui-widget-content ui-corner-all"></div></td>
                        <td><div><input name="out2" readonly="readonly" type="text" class="text-center ui-widget-content ui-corner-all"></div></td>
                        <td><div><input name="out3" readonly="readonly" type="text" class="text-center ui-widget-content ui-corner-all"></div></td>
                    </tr>
                </tbody>
            </table>
        </fieldset>
    </fieldset>
    <fieldset class="fieldset-item ui-corner-all">
        ...etc...
</div>

フィドルのサンプル

4

1 に答える 1

0

私は好きな解決策を見つけました

送信前に各行を調べて、その行の入力のシリアル配列を作成し、送信するデータ オブジェクトに追加します。魔法のように動作します！

$(document).on('blur change keyup', '#Items .fieldset-item-input input, #Items .fieldset-item-input select', function(e) {
    var submitData = {},
        $input = $(this).closest('.fieldset-item').find('.fieldset-item-input'),
        $output = $(this).closest('.fieldset-item').find('.fieldset-item-output');

    //  here is the key factor that helped!
    //  here i make a serial array of each items inputs
    //  and then add that array to a data object to be
    //  submitted with ajax! WORKS GREAT!
    $('#Items .fieldset-item').each(function(i) {
        submitData[i] = $(this).children('.fieldset-item-input').serializeArray();
    });

    $.ajax({
        data: submitData,
        dataType: 'json',
        type: "POST",
        url: $.myURL('v2', 'quote', 'calc'),
        beforeSend: function (xhr, settings) { /*console.log(settings.data);*/ $output.find('input').val(''); },
        success: function(data, status, xhr) {
            console.log(data);
        }
    });
});
于 2013-09-12T18:22:47.163 に答える