如何通過ajaxform將多個記錄添加到select2表單中？

select2/3.5.2/如何通過ajaxform將多個記錄添加到select2表單中？

我重新發布這是因爲我的第一篇文章格式不正確。

以下項目正在使用：

多個記錄可以在選擇2表單字段
自舉模式彈出有一個形式，進入一個新的記錄進行搜索，如果沒有在發現select2表單。
給ajaxForm用於從模態形式通過新的記錄到SELECT2形式

問題：

如果添加第二個記錄，它替換傳遞給SELECT2字段的第一個記錄而不是追加它。
當select2表單被提交處理時，它會傳遞select2中選中的記錄，但不會從ajaxform（模態）中添加。
模態不會清除表單值。

我是新來的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 -->

來源

2015-11-07 Robin

你能顯示你的HTML嗎？ –

我加了。謝謝你與我一起看。 – Robin

我在這裏有一個工作解決方案：http://stackoverflow.com/questions/35561229/ajaxform-select2-concatenate-multiple-ids/35580613#35580613 – Robin

讓我們嘗試採用解決的問題之一。

如果添加第二個記錄，它替換傳遞給選擇2場，而不是追加它的第一個記錄。

的問題是在這部分代碼：

$("#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);

模態不清除的形式的值。

這是一種預期，因爲你只"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 
    ... 
}

下面是這些解決方案的工作樣本inside a JSFiddle

來源

2015-11-10 13:08:02 Dethariel

謝謝！我不確定如何在有人發表評論時收到電子郵件提醒。我能夠得到這個代碼工作。我不熟悉「推」。我想通過$（'＃contactform'）[0] .reset（）;清除輸入值。我很高興也有你的方法。我感謝您的幫助和時間！ – Robin

我在這裏有一個工作解決方案：http://stackoverflow.com/questions/35561229/ajaxform-select2-concatenate-multiple-ids/35580613#35580613 – Robin

如何通過ajaxform將多個記錄添加到select2表單中？

回答

相關問題