Link to test case: https://www.stoneship.at
Debugger code (debug.datatables.net): https://debug.datatables.net/ivukoy
Error messages shown: no error shown
Description of problem:
I have add a standalone editor for login and registration. In the templates i have add some html tags, for example tabs to switch more forms inputs. The problem is, that the html tag's are shown on the webpage if you start the Page. If you click on the registration link, the html are shown in the modal Windows, but the tabs switch not the content in the window. You see in the background that the tabs switch the content. Only the html tag that i have added. I have do this with BS4 and it works, but not with BS5
I have no idea where my Problem is. The debugger shows me some error with the input names, but the names are correct in the template.
Andreas
my Template:
<div id="tplRegistration">
<ul class="nav nav-tabs" id="myUser" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="user-tab" data-bs-toggle="tab" data-bs-target="#user-tab-pane" type="button" role="tab" aria-controls="user-tab-pane" aria-selected="true">
<?= $lang->user ?>
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#club-tab-pane" type="button" role="tab" aria-controls="club-tab-pane" aria-selected="false">
<?= $lang->club ?>
</button>
</li>
</ul>
<div class="tab-content" id="myUserContent">
<div class="tab-pane fade show active" id="user-tab-pane" role="tabpanel" aria-labelledby="user-tab" tabindex="0">
<div class="row mb-0">
<div data-editor-template="u_email" class="col-lg-6"></div>
<div class="col-lg-6"></div>
</div>
<div class="row mb-0">
<div data-editor-template="u_pwd" class="col-lg-6"></div>
<div data-editor-template="u_retypepwd" class="col-lg-6"></div>
</div>
<div class="row mb-0">
<div data-editor-template="u_lastname" class="col-lg-6"></div>
<div data-editor-template="u_firstname" class="col-lg-6"></div>
</div>
<div class="row mb-0">
<div data-editor-template="u_prefix" class="col-lg-3"></div>
<div data-editor-template="u_gender" class="col-lg-3"></div>
<div data-editor-template="u_birthdate" class="col-lg-3"></div>
<div data-editor-template="u_language" class="col-lg-3"></div>
</div>
<div class="row mb-0">
<div data-editor-template="u_nation" class="col-lg-6"></div>
<div class="col-mg-12 ml-15"><?= $lang->register; ?></div>
</div>
<div class="row">
<div data-editor-template="token" class="col-mg-12"></div>
</div>
</div>
<div class="tab-pane fade" id="club-tab-pane" role="tabpanel" aria-labelledby="club-tab" tabindex="0">
<div class="row mb-0">
<div data-editor-template="u_club" class="col-md-6"></div>
<div class="col-md-6 pt-25"></div>
</div>
<h5 class="pt-10 text-center mb-10"><?= $lang->clubInfo; ?></h5>
<div class="row mb-0">
<div data-editor-template="user_Club_Name" class="col-md-6"></div>
<div data-editor-template="c_shortname" class="col-md-6"></div>
</div>
<div class="row mb-0">
<div data-editor-template="c_code" class="col-md-3"></div>
<div data-editor-template="c_zip" class="col-md-3"></div>
<div data-editor-template="c_location" class="col-md-6"></div>
</div>
<div class="row mb-0">
<div data-editor-template="c_street1" class="col-md-6"></div>
<div data-editor-template="c_nation" class="col-md-6"></div>
</div>
<div class="row mb-0">
<div data-editor-template="c_street2" class="col-md-6"></div>
<div data-editor-template="c_email" class="col-md-6"></div>
</div>
<div class="row mb-0">
<div data-editor-template="c_state" class="col-md-6"></div>
<div data-editor-template="c_website" class="col-md-6"></div>
</div>
<div class="row mb-0">
<div data-editor-template="c_phone" class="col-md-6"></div>
<div class="col-mg-12 ml-15"><?= $lang->clubRegister; ?></div>
</div>
</div>
</div>
</div>
my editor JS:
reg = new $.fn.dataTable.Editor( {
ajax: ajaxAuthUrl + '?user=3',
template: '#tplRegistration',
fields: [
{
label: frmAuthInfo.u_email + ': <span class="txt-Red">*</span>',
name: 'u_email',
type: 'text'
},{
label: frmAuthInfo.u_passwd + ': <span class="txt-Red">*</span>',
name: 'u_pwd',
type: 'password'
},{
label: frmAuthInfo.u_retypepwd + ': <span class="txt-Red">*</span>',
name: 'u_retypepwd',
type: 'password'
},{
label: frmAuthInfo.u_firstname + ': <span class="txt-Red">*</span>',
name: 'u_firstname',
type: 'text'
},{
label: frmAuthInfo.u_lastname + ': <span class="txt-Red">*</span>',
name: 'u_lastname',
type: 'text'
},{
label: frmAuthInfo.u_gender + ': <span class="txt-Red">*</span>',
name: 'u_gender',
type: 'select',
options: [
{ label: 'Select one', value: '' },
{ label: 'Female', value: 'FEMALE' },
{ label: 'Male', value: 'MALE' }
]
},{
label: frmAuthInfo.u_birthdate + ': <span class="txt-Red">*</span>',
name: 'u_birthdate',
data: 'birthday',
type: 'datetime',
opts: {
momentLocale: 'de-at',
minDate: new Date( '1940-01-01' ),
maxDate: new Date()
},
format: 'DD.MM.YYYY'
},{
label: frmAuthInfo.u_lng + ': <span class="txt-Red">*</span>',
name: 'u_language',
data: 'lang',
type: 'select',
options: [
{ label: 'Select one', value: '' },
{ label: frmAuthInfo.u_lng_en, value: 'EN' },
{ label: frmAuthInfo.u_lng_de, value: 'DE' },
{ label: frmAuthInfo.u_lng_hu, value: 'HU' }
]
},{
label: frmAuthInfo.u_club + ': <span class="txt-Red">*</span>',
name: 'u_club',
data: 'club.user_uuid',
type: 'select'
},{
label: frmAuthInfo.u_nation + ': <span class="txt-Red">*</span>',
name: 'u_nation',
data: 'nationality.iso3166_1_alpha3',
type: 'select'
},{
label: frmAuthInfo.u_prefix + ':',
name: 'u_prefix',
type: 'text'
},{
label: 'token',
name: 'token',
type: 'hidden'
},{
label: frmClubInfo.user_Club_Name + ': <span class="txt-Green">*</span>',
name: 'user_Club_Name',
data: 'name'
},{
label: frmClubInfo.c_shortname + ': <span class="txt-Green">*</span>',
name: 'c_shortname',
data: 'shortName'
},{
label: frmClubInfo.c_code + ': <span class="txt-Green">*</span>',
name: 'c_code',
data: 'code'
},{
label: frmClubInfo.c_street1 + ': <span class="txt-Green">*</span>',
name: 'c_street1',
data: 'street1'
},{
label: frmClubInfo.c_street2 + ':',
name: 'c_street2',
data: 'street2'
},{
label: frmClubInfo.c_zip + ': <span class="txt-Green">*</span>',
name: 'c_zip',
data: 'postalCode'
},{
label: frmClubInfo.c_location + ': <span class="txt-Green">*</span>',
name: 'c_location',
data: 'location'
},{
label: frmClubInfo.c_state + ':',
name: 'c_state',
data: 'state'
},{
label: frmClubInfo.c_country + ': <span class="txt-Green">*</span>',
name: 'c_nation',
data: 'nationality.iso3166_1_alpha3',
type: 'select'
},{
label: frmClubInfo.c_email + ': <span class="txt-Green">*</span>',
name: 'c_email',
data: 'email'
},{
label: frmClubInfo.c_web + ':',
name: 'c_website',
data: 'website'
},{
label: frmClubInfo.c_phone + ':',
name: 'c_phone',
data: 'phone'
}
]
} );