دوستان عزیز سلام و خداقوت .
من توی یک صفحه فرم گسترش یابنده دارم ، یعنی کاربر بسته به نیاز خودش می تونه فیلدهایی رو به فرم ارسالی اضافه کنه [توی بخش اضافه کردن فیلدها از کتابخونه BootStrap Form-Repeater استفاده کردم ] . حالا توی دیزاین این فرم های تکرارشونده هم برای یکی از فیلدهاش از کتابخونه Tagify استفاده کردم .
حالا مشکل من اینجاست که توی حالت پیشفرض که یک عدد فرم وجود داره ، کتابخونه Tagify به درستی روی اون فیلدی که می خوام کار می کنه ، اما زمانیکه دکمه افزودن رو میزنم و فیلدی به فرمم افزوده می شه ؛ توی این فرم جدید کتابخونه Tagify روی اون فیلدی که باید کار نمیکنه و یجورایی کلا اون input مربوط به Tagify کلا کار نمیکنه .
اینم قطعه کد init کردن Tagify :
/**
* Tagify
*/
"use strict";
(function () {
// Custom list & inline suggestion
//--------------------------------
let TagifyCustomListSuggestionEl = document.querySelectorAll('input[name="form_repeater_categories[]"]');
const whitelist = [];
// List
TagifyCustomListSuggestionEl.forEach((e) => {
console.log("yes");
new Tagify(e, {
whitelist: whitelist,
maxTags: 13,
dropdown: {
maxItems: 20,
classname: "",
enabled: 0,
closeOnSelect: false,
},
});
});
})();
اینم قطعه کد init کردن BootStrap Form-Repeater :
// bootstrap-maxlength & repeater (jquery)
$(function() {
var formRepeater = $('.form-repeater');
// Form Repeater
// ! Using jQuery each loop to add dynamic id and class for inputs. You may need to improve it based on form fields.
// -----------------------------------------------------------------------------------------------------------------
if (formRepeater.length) {
var row = 2;
var col = 1;
formRepeater.on('submit', function(e) {
e.preventDefault();
});
formRepeater.repeater({
show: function() {
var fromControl = $(this).find('.form-control, .form-select');
var formLabel = $(this).find('.form-label');
fromControl.each(function(i) {
var id = 'form-repeater-' + row + '-' + col;
$(fromControl[i]).attr('id', id);
$(formLabel[i]).attr('for', id);
col++;
});
row++;
$(this).slideDown();
},
hide: function(e) {
confirm('Are you sure to delete this form?') && $(this).slideUp(e);
}
});
}
});
اینم از قطعه کد HTML :
<div class="form-repeater">
<div data-repeater-list="Partitions-Group">
<div data-repeater-item>
<div class="row">
<div class="mb-3 col-lg-6 col-xl-3 col-12 mb-0">
<label class="form-label" for="form-repeater-1-1">PartNumber:<small class="text-danger">*</small></label>
<input type="number" name="form_repeater_partnum" id="form-repeater-1-1" class="form-control text-start" dir="rtl" placeholder="1">
</div>
<div class="mb-3 col-lg-6 col-xl-3 col-12 mb-0">
<label class="form-label" for="form-repeater-1-2">Details:<small class="text-danger">*</small></label>
<input type="number" name="form_repeater_partcellnum" id="form-repeater-1-2" class="form-control text-start" dir="rtl" placeholder="10">
</div>
<!-- Custom Suggestions: List -->
<div class="mb-3 col-lg-12 col-xl-10 col-12 mb-0">
<label for="form-repeater-1-3" class="form-label">Categories:<small class="text-danger">*</small></label>
<input name="form_repeater_categories" id="form-repeater-1-3" class="form-control form_repeater_categories" dir="rtl" placeholder="SelectCategories..." value="">
</div>
<div class="mb-3 col-lg-12 col-xl-2 col-12 d-flex align-items-center mb-0">
<span class="btn btn-label-danger mt-4" data-repeater-delete>
<i class="bx bx-x"></i>
<span class="align-middle">Delete</span>
</span>
</div>
</div>
</div>
</div>
<div class="mb-0">
<span class="btn btn-primary" data-repeater-create>
<i class="bx bx-plus"></i>
<span class="align-middle">Add Form</span>
</span>
</div>
</div>
به سام شادکام کمک کنید تا مشکل خودش را حل کند؛ اینطور میتوانیم با هم پیشرفت کنیم.
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟