lorderich
Goto Top

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?

$('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

Content-Key: 391775

Url: https://administrator.de/contentid/391775

Printed on: April 27, 2024 at 23:04 o'clock

Member: godlie
godlie Nov 06, 2018 updated at 13:54:50 (UTC)
Goto Top
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:

function addValidators(form) {
var formsToAddValidators = form ? [$(form)] : $('form');  

formsToAddValidators.each(function validate() {
.......
});

grüße