0

新しいフォームエントリを元のselect2検索フォームに連結するajaxformを備えたselect2検索フォームがあります。複数の新しいエントリが追加された場合、新しいテキスト値は検索フィールドに正しく連結されますが、新しい非表示の ID は既存の ID を置き換えます。すべての新しいテキスト値が select2 検索フィールドに表示されるため、追加されたように見えます。問題は、テキスト フィールドを検索フィールドに連結するだけでなく、新しい ID を非表示の cropstageid フィールドに連結する必要があることだと思います。これを行う方法がわかりません。あなたの助けに感謝します。

<script>
$(document).ready(function() { 

$("#search").select2({
width: '60%',
allowClear: true,
minimumInputLength: 0
});

$('#btnSubmit').on('click', function() {

$.ajax({
    asynch : true,
    type : 'POST',
    dataType : 'json',
    url: '../cfc/stages.cfc?method=addstage&returnformat=json',
    //all form fields submitted to url
    data: $("form").serialize(),

    success : function(data, textStatus) {
        //close the modal
        $('#stagemodal').modal('hide');

        //set the returned data to a variable
        var fullname = $('#stagename').val();
        $("#cropstageid").val(data.DATA);

        //get current selection
        var selection = $(search).select2("data");
        //add a new item to the selection
        selection.push({id: data.DATA, text: fullname})
        //set the updated selection
        $(search).select2("data",selection);

        //reset form
        $('#addstageform')[0].reset();
        //output data to console
        console.log(data.DATA);

}
});
});

});
</script>


<cfform name="stageform" id="stageform" action="settings_form_action.cfm" method="post" ENCTYPE="multipart/form-data">

<h4 class="text-primary">Select Crop Stages</h4>
<input type="hidden" id="cropstageid" name="cropstageid">

<cfselect id="search" multiple name="cropstageid" >
<cfloop query="stages" >
<option value="#cropstageid#" >#stage#</option>
</cfloop>

</cfform>

*新規エントリー用のAjaxForm

<cfform id="addstageform" name="addstageform" action="" method="post">
<input type="text" name="stagename" id="stagename" autofocus size="35">
<input type="button" id="btnSubmit" value="Add" /><
</cfform>
4

1 に答える 1

0

同僚の助けのおかげで、解決策は以下のとおりです。

  1. 成功すると、非表示フィールドにアタッチしなくなります。そのため、$("#cropstageid").val(data.DATA); を削除します。
  2. 成功したら、 $('#search').append('' + フルネーム + ''); を追加します。この行は、新しく追加された ajaxform レコードから別の選択オプションを追加します
  3. 選択オプションとしてアタッチされているため、非表示の値は不要になったため、フォーム内の非表示の cropstageid フォーム フィールドを削除します。

クリーンアップされたスクリプトは次のとおりです。

<script>
$(document).ready(function() { 

$("#search").select2({
width: '60%',
allowClear: true,
minimumInputLength: 0
});

$('#btnSubmit').on('click', function() {

$.ajax({
asynch : true,
type : 'POST',
dataType : 'json',
url: '../cfc/stages.cfc?method=addstage&returnformat=json',
//all form fields submitted to url
data: $("form").serialize(),

success : function(data, textStatus) {
//close the modal
$('#stagemodal').modal('hide');
//set the returned data to a variable
var fullname = $('#stagename').val();
//get current selection
var selection = $('#search').select2("data");
//add the new option to the select 
$('#search').append('<option value="' + data.DATA + '">' + fullname +    '</option>');
//add a new item to the selection array
selection.push({
id: data.DATA, 
text: fullname
});
//set the updated selection
$('#search').select2("data",selection);
//reset the modal form
$('#addstageform')[0].reset();
//output to the console
console.log(data.DATA);
}

});
});

});
</script>
于 2016-02-23T14:48:50.920 に答える