1

select2/3.5.2/

最初の投稿が正しくフォーマットされなかったため、これを再投稿します。

以下のアイテムが使用されています。

  1. 複数のレコードを select2 フォーム フィールドで検索できます
  2. ブートストラップ ポップアップ モーダルには、select2 フォームに見つからない場合に新しいレコードを入力するためのフォームがあります。
  3. AjaxForm は、新しいレコードをモーダル フォームから select2 フォームに渡すために使用されます。

問題：

  1. 2 番目のレコードが追加されると、select2 フィールドに渡された最初のレコードが追加されるのではなく、置き換えられます。
  2. select2 フォームが処理のために送信されると、select2 で選択されているが ajaxform (モーダル) から追加されていないレコードが渡されます。
  3. モーダルはフォームの値をクリアしません。

私は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>

形：

<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>

お問い合わせモーダル

<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 -->
4

1 に答える 1

0

一つ一つ問題を解いていきましょう。

  1. 2 番目のレコードが追加されると、select2 フィールドに渡された最初のレコードが追加されるのではなく、置き換えられます。

問題は、コードのこの部分にあります。

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

新しいアイテムを追加するのではなく、選択をリセットします。「追加」機能は次のように実装できます。

// 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);
  1. モーダルはフォームの値をクリアしません。

"hide"基礎となるDOMコンテンツを操作せずにモーダルのみを使用するため、これは予想どおりです。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
    ...
}

JSFiddle 内のこれらのソリューションの実際のサンプルを次に示します。

于 2015-11-10T13:08:02.967 に答える