Problem to add html Tags in editor templates
Problem to add html Tags in editor templates
Andreas S.
Posts: 207Questions: 73Answers: 4
in Editor
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'
}
]
} );
This question has an accepted answers - jump to answer
Answers
Looks like you have two
divelements with the same ID that you are using for your template:The
idis to be unique on the page. So Editor is only removing the first ID found.Kevin
I have checked, the id is unique. I have the same problem with the login Windows. If i add some html tags in the login template, the did not shown in the modal window. Only on the webpage.
Andreas
That id is not unique on your page, as @Kevin says.
I have now changed the id to a different id. The same Problem. How can i find the possible double id on a Page?
Andreas
Looks like you changed the id to
regTpl. I used the browser's View Source option and searched for the id ofregTpl. It finds thisdivtwice:Once on line 197 and the second on line 293. Remove the
divthat you don't want to use as the template.Kevin
Yes i found it, but i did not understand, why this is. I have only one template with this name. I see, that i have this problem only, wenn i use the Editor standalone. Did i oversee something by using templates in the Editor Standalone mode?
Andreas
An id on a HTML page must be unique on that page.
Not a DataTables issue.
I'm not sure I understand your comments. You define the HTML layout of the template
within a
divelement, then tell the Editor to use the template withtemplate: '#tplRegistration',. The Editor then removes the element from the DOM and uses it for the form. See the template docs for details. The Editor is not creating thedivelements. You need to remove the extradivfrom your source code as these aren't created by Datatalbes nor Editor. If you ahve something generating the HTMl that you need to look at that process.Kevin
Thanks all, for your help. Found the Problem