Jquery: Validation for Child-Row
Hallo zusammen,
irgendwie hänge ich gerade an einem Problem fest.
Ich erstelle über das Jquery Plugin Datatables eine Tabelle mit Child-Rows. Beim Aufbau der Tabelle sind diese natürlich im DOM noch nicht enthalten.
Innerhalb der Child Rows gibt es allerdings eine Form Element, welches ich gern mit Bootstrap Validator entsprechend validieren möchte.
Da der entsprechende Code zum validieren natürlich schon beim Seitenaufbau geladen wird, kann er die Form, welche sich innerhalb der ChildRows befindet natürlich zu diesem Zeitpunkt noch nicht im DOM Tree finden. Dementsprechend funktioniert dann natürlich auch die Validierung nicht.
Das hier ist der entsprechende Validation Code-Block. Dieser soll dann zum Einsatz kommen, wenn die TR entsprechend angezeigt wird. Habt ihr da vielleicht eine Idee, wie ich beides zusammen bringe?
Und hier der Block, mit dem die Childrows angezeigt werden.
Danke und Grüße
Der Lordi
irgendwie hänge ich gerade an einem Problem fest.
Ich erstelle über das Jquery Plugin Datatables eine Tabelle mit Child-Rows. Beim Aufbau der Tabelle sind diese natürlich im DOM noch nicht enthalten.
Innerhalb der Child Rows gibt es allerdings eine Form Element, welches ich gern mit Bootstrap Validator entsprechend validieren möchte.
Da der entsprechende Code zum validieren natürlich schon beim Seitenaufbau geladen wird, kann er die Form, welche sich innerhalb der ChildRows befindet natürlich zu diesem Zeitpunkt noch nicht im DOM Tree finden. Dementsprechend funktioniert dann natürlich auch die Validierung nicht.
Das hier ist der entsprechende Validation Code-Block. Dieser soll dann zum Einsatz kommen, wenn die TR entsprechend angezeigt wird. Habt ihr da vielleicht eine Idee, wie ich beides zusammen bringe?
$('form').each(function validate() { // attach to all form elements on page
$(this).bootstrapValidator({// initialize plugin on each form
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: ''},
live: 'enabled',
trigger: null,
fields: {
gender: {
validators: {
notEmpty: {message: "<?php echo $Missing_Gender ?>"}}},
}})
.on('success.form.bv', function(e, data) {
// Prevent form submission
e.preventDefault();
// Get the form instance
var $form = $(e.target);
// Get the BootstrapValidator instance
var bv = $form.data('bootstrapValidator');
// Use Ajax to submit form data
// Use Ajax to submit form data
$.ajax({
url: $form.attr('action'),
type: 'POST',
contentType: "application/x-www-form-urlencoded;charset=utf-8",
data: $form.serialize(),
success: function(data)
{
var parts = data.split('|')
var type = parts
var text = parts[1]
if(type==1){
// If Success type is 1, show success message with type success
$('.top-right').notify({
message: { text: text },
type: 'info',
}).show();}
else if(type==2){
// If Success type is 1, show success message with type success
$('.top-right').notify({
message: { text: text },
type: 'danger',
}).show();}
else if(type==3){
// If Success type is 3, print messaage to #ResponseDIV
$('#ResponseDiv').html(text);}
else if(type==4){
// If Success type is 1, show success message with type success
$('.top-right').notify({
message: { text: text },
type: 'info',
}).show();
location.reload();}
else {
// If Success type is 3, print messaage to #ResponseDIV
$('#ResponseDiv').html(text);}
},
error: function(xhr)
{
// If Success type is 1, show success message with type success
$('.top-right').notify({
message: { text: xhr.status + " " + xhr.statusText },
type: 'danger',
}).show();},});})
});
Und hier der Block, mit dem die Childrows angezeigt werden.
// Add event listener for opening and closing details
$("#openpayments tbody").on("click", "td.details-control", function () {
var tr = $(this).closest("tr");
var form = $(this).closest("form");
var row = table.row( tr );
if ( row.child.isShown() ) {
// This row is already open - close it
row.child.hide();
tr.removeClass("shown");
}
else {
// Open this row
row.child( openpayments(row.data()) ).show();
$('.paymentdate').mask('00-00-0000');
tr.addClass("shown");
}
} );
Danke und Grüße
Der Lordi
Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben
Content-ID: 391775
Url: https://administrator.de/contentid/391775
Ausgedruckt am: 25.11.2024 um 15:11 Uhr
1 Kommentar
Hallo,
ich würde die Initialiserung der Form Validators einfach in eine Function packen und selbige dann triggern, wenn ich die Table erzeuge und wenn ich die Row anzeige.
So in der Art ca:
grüße
ich würde die Initialiserung der Form Validators einfach in eine Function packen und selbige dann triggern, wenn ich die Table erzeuge und wenn ich die Row anzeige.
So in der Art ca:
function addValidators(form) {
var formsToAddValidators = form ? [$(form)] : $('form');
formsToAddValidators.each(function validate() {
.......
});
grüße