如何通过ajaxform将多个记录添加到select2表单？

Question

select2/3.5.2/ 选择2 / 3.5.2 /

I am reposting this because my initial post wouldn't format correctly. 我将其重新发布，因为我的初始帖子格式不正确。

The following items are being used: 正在使用以下项目：

multiple records can be searched in a select2 form field 可以在select2表单字段中搜索多个记录
A bootstrap popup modal has a form to enter a new record if it isn't found in the select2 form. 如果在select2表单中找不到引导记录弹出模式，则该表单可以输入新记录。
AjaxForm is used to pass the new record from the modal form to the select2 form AjaxForm用于将新记录从模式形式传递到select2形式

Issues: 问题：

If a second record is added, it replaces the first record passed to the select2 field rather than appending it. 如果添加了第二条记录，它将替换传递给select2字段的第一条记录，而不是附加它。
When the select2 form is submitted for processing, it will pass records selected in the select2 but not added from the ajaxform (modal). 提交select2表单进行处理时，它将传递在select2中选择但未从ajaxform（模态）添加的记录。
The modal does not clear the form values. 模态不会清除表单值。

I am new to js and jquery, so any help would be appreciated. 我是js和jquery的新手，所以将不胜感激。

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/3.51/jquery.form.js"></script>

        <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.css" rel="stylesheet"/>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2-bootstrap.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.js"></script>

        <script>
            $(document).ready(function() { 
                //select2
                $("#contact_search").select2({
                    width: '100%',
                    allowClear: true,
                    minimumInputLength: 3
                });

                // ajaxform
                $('#contactform').ajaxForm({
                    dataType: 'json',
                    success: processJson
                });

                function processJson(data) { 
                    //close the modal
                    $('#contactmodal').modal('hide');
                    // set the returned data to a variable
                    var newcontactid = data.DATA;
                    //output data to console
                    console.log(data);

                    var firstname = $('#fname').val();
                    var lastname = $('#lname').val();
                    var name = firstname + ' ' + lastname;
                    $("#contact_search").select2("data", [{id: data.DATA, text: name}]);
                };
            }); 
        </script>

Form: 形成：

<div class="row indent">
    <div class="col-md-5">
        <form name="searchform" action="ajaxform_action.cfm" method="post">
            <label>Search for People</label>

            <select id="contact_search" multiple size="50" name="people">
            <cfoutput query="people">
                <option value="#people.contactid#" >#firstname# #lastname#</option>
            </cfoutput>
            </select> 

            <input type="submit" value="Save" name="submit" class="btn btn-primary btn-xs" />
        </form>

        <!---Add New Person--->
        <a href="#newAuthorModal" data-toggle="modal" title="New Profile" data-field="contactform" data-target="#contactmodal">
            <img src="img/user_add.png" alt="Add New Person" title="Add New Person" border="0">
        </a>
    </div>
</div>

Contact Modal 联系方式

<div class="modal fade" id="contactmodal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                </button>
            </div>
            <div class="modal-body">
                <!---Form--->
                <form id="contactform" action="cfc/insert.cfc?method=insertcontact" method="post" name="testform">
                    First Name: <input type="text" name="firstname" id="fname" /> 
                    Last Name: <input type="text" name="lastname" id="lname" />
                    <input id="btnSave" type="submit" value="Submit" /> 
                </form>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Answer 1

Let's try and solve problems one by one. 让我们尝试一一解决问题。

If a second record is added, it replaces the first record passed to the select2 field rather than appending it. 如果添加了第二条记录，它将替换传递给select2字段的第一条记录，而不是附加它。

The problem is in this part of your code: 问题出在代码的这一部分：

$("#contact_search").select2("data", [{id: data.DATA, text: name}]);

What it does is it resets the selection, instead of appending a new item. 它的作用是重置选择，而不是附加新项目。 The "append" functionality may be implemented this way: “追加”功能可以通过以下方式实现：

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

The modal does not clear the form values. 模态不会清除表单值。

That's kind of expected, since you only "hide" the modal, without manipulating its underlying DOM content. 这是预料之中的，因为您仅"hide"了模式，而没有操纵其底层DOM内容。 This can be fixed by adjusting the processJson function to be: 可以通过将processJson函数调整为：

function processJson(data) { 
    //close the modal
    $('#contactmodal').modal('hide');
    // set the returned data to a variable
    var newcontactid = data.DATA;
    //output data to console
    console.log(data);

    var firstname = $('#fname').val();
    var lastname = $('#lname').val();

    // Clear the input values!
    $('#contactmodal input[type=text]').val("");

    // the rest of the function
    ...
}

Here's a working sample of these solutions inside a JSFiddle 这是JSFiddle中这些解决方案的工作示例

如何通过ajaxform将多个记录添加到select2表单？

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-11-10 13:08:02

如何通过ajaxform将多个记录添加到select2表单？

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-11-10 13:08:02

解决方案1
0 已采纳 2015-11-10 13:08:02