2

select2プラグインに関連付けられた入力ボックスを使用して、独自の先行入力実装を展開しています。ユーザーは、電子メールの正規表現に対して onchange イベントで検証される手動の電子メール アドレスを入力するか、すでにアカウントに関連付けられている受信者の DisplayName を入力し始めることができます。このリストは、コントローラーへの ajax 呼び出しを介してフェッチされます。コントローラーはサービス呼び出しを行い、データを取得します。データは、動的に作成されたリストアイテムを介して取得されます。ユーザーが表示されている DisplayNames の 1 つをクリックまたはタップすると、その受信者が選択された受信者のリストに追加され、その時点から select2 に表示されます。

typeahead と ajax 呼び出しは正しく機能しており、データが返されて正しく表示されています。ただし、最初の ajax 呼び出しから返されたオブジェクトをパラメーターとして関数に渡すことができないようです。生の値を渡そうとすると'unexpected identifier'、コンソール デバッガーでエラーが発生します。JSON.stringify(value)を渡そうとすると'unexpected token ;.' 、受信者の ID プロパティを渡すことでいつでもフォールバックできることがわかります (これは問題なく機能します。複雑なオブジェクトを渡そうとすると問題が発生します)。オブジェクトを再度再構築しますが、これを回避し、別のサービス呼び出しを行わないようにすることが明らかに望ましいでしょう。前もって感謝します。

スクリプトは次のとおりです。

  $(document).ready(function () {
            $("#selectedRecipientList").select2({ tags: null, tokenSeparators: [",", " "] });
            $('.select2-input').keyup(function (e) {                    
                var currentString = $('.select2-input').val();
                $.ajax({
                    dataType: 'json',
                    url: '@Url.Action("RecipientTypeAhead", "RecipientManager")',
                    data: { query: currentString },
                    success: (function (data) {
                        $('#TypeAheadRecipientsList').empty();
                        $(data).each(function (index, value) {
                            $('#TypeAheadRecipientsList').append('<li onclick="AddRecipientFromPicker(' + JSON.stringify(value) + ')">' + value.DisplayName + '</li>');
                        });
                    })
                });
            });
        });

function AddRecipientFromPicker(someData){} //only ever reaches here if int primitive is passed in

ajax メソッドで返された後のオブジェクトの例を次に示します。 {"AccountName":"abc","DisplayName":"abc","Email":"abc@test.net","Id":94654}

4

1 に答える 1

2

次のことはできません。

$(data).each(function (index, value) {
    $('#TypeAheadRecipientsList').append('<li onclick="AddRecipientFromPicker(' + JSON.stringify(value) + ')">' + value.DisplayName + '</li>');
});

datadom要素ではないので。

代わりにこれを試してください：

for(var index in data) {
   var value = data[index];
   $('#TypeAheadRecipientsList').append('<li onclick="AddRecipientFromPicker(' + JSON.stringify(value) + ')">' + value.DisplayName + '</li>');
}

また、インライン イベント ハンドラを使用しないようにしてください。

すべてをまとめると、次のようになります。

for(var index in data) {
   var value = data[index];
   var listItem = $('<li>' + value.DisplayName + '</li>');
   listItem.data('value', JSON.stringify(value)).on('click', function(){
       AddRecipientFromPicker($(this).data('value'));
   });
   $('#TypeAheadRecipientsList').append(listItem);
}
于 2012-12-27T20:11:15.513 に答える