2016-09-02 11 views
0

jQueryクローンを使用してオブジェクトの現在のGUIDを増やすことは可能ですか?Formstone Classicセレクタ - jQueryクローンと変更GUID

現在のところ、セレクタが初期化されると、隠されたものを含むすべての選択にGUIDが割り当てられます。

クローニングプロセスでは、単にテンプレートdivを複製します。問題は隠しセレクトのGUIDもクローン化するという問題です。つまり、動的に追加されたセレクトは、複数のセレクトが同じGUIDを共有するため、使用できなくなります。次のように選択がある含む行のクローンを作成する

$(document).ready(function() { 
    $("select").selecter(); 
}); 

コード:

私は以下のコードを使用していますフォーム上のすべての選択を実現するために

$('.addButton').on('click', function() { 
    var $template = $('#Template'), 
     $clone = $template 
      .clone(true, true) 
      .removeClass('hide') 
      .removeAttr('id') 
      .attr('title', 'DynamicRow') 
      .insertBefore($template); 

    $("#Form").validate(); 

    $clone.find('[name="Type[]"]').rules("add", { required: true });  
}); 

私はまた、クローン化されているものを証明するためにHTML以下に含まれている:

<div class="fieldset"> 
    <div class="col-sm-1"> 
     <div> 
      <button type="button" class="btn btn-default addButton"><i class="fa fa-plus"></i></button> 
     </div> 
    </div> 
    <div class="col-sm-11"> 
     <div class="field"> 
      @Html.LabelFor(model => model.Type) 
      <select name="Type[]" id="Type[]"> 
       <option value="">Type</option> 
       <option value="1">Other</option> 
       <option value="2">Maintenance</option> 
       <option value="3">Attendance</option> 
      </select> 
     </div> 
    </div> 
</div> 
<div class="fieldset hide" id="Template"> 
    <div class="col-sm-1"> 
     <div> 
      <button type="button" class="btn btn-default removeButton"><i class="fa fa-minus"></i></button> 
     </div> 
    </div> 
    <div class="col-sm-11"> 
     <div class="field"> 
      @Html.LabelFor(model => model.Type) 
      <select name="Type[]" id="Type[]"> 
       <option value="">Type</option> 
       <option value="1">Other</option> 
       <option value="2">Maintenance</option> 
       <option value="3">Attendance</option> 
      </select> 
     </div> 
    </div> 
</div> 

FormstoneクラシックのSeレクターライブラリがで見つけることができます:

https://github.com/FormstoneClassic/Selecter/blob/master/jquery.fs.selecter.js

この問題の解決にどのような援助を、私はずっと

答えて

0

:-)私は見つけることができる唯一の回避策を高く評価しますので、個別に選択した各フォームを初期化することでした$("select").selecter();は使用できませんでした。これは、隠し文字を含むすべての選択肢を初期化するためです。最初、私は$('#Types').find('[name="Type[]"]').selecter();を使用して隠されたクローンは、私は、これは他の人に役立ち願ってい$clone.find('[name="Type[]"]').selecter();

を使用選択初期化するために選択を初期化するために

HTML

<div class="fieldset" id="Types"> 
    <div class="col-sm-1"> 
     <div> 
      <button type="button" class="btn btn-default addButton"><i class="fa fa-plus"></i></button> 
     </div> 
    </div> 
    <div class="col-sm-11"> 
     <div class="field"> 
      @Html.LabelFor(model => model.Type) 
      <select name="Type[]" id="Type[]"> 
       <option value="">Type</option> 
       <option value="1">Other</option> 
       <option value="2">Maintenance</option> 
       <option value="3">Attendance</option> 
      </select> 
     </div> 
    </div> 
</div> 
<div class="fieldset hide" id="Template"> 
    <div class="col-sm-1"> 
     <div> 
      <button type="button" class="btn btn-default removeButton"><i class="fa fa-minus"></i></button> 
     </div> 
    </div> 
    <div class="col-sm-11"> 
     <div class="field"> 
      @Html.LabelFor(model => model.Type) 
      <select name="Type[]" id="Type[]"> 
       <option value="">Type</option> 
       <option value="1">Other</option> 
       <option value="2">Maintenance</option> 
       <option value="3">Attendance</option> 
      </select> 
     </div> 
    </div> 
</div>