This topic contains 3 replies, has 2 voices, and was last updated by  Martin 3 weeks, 1 day ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • dynamic jqxWalidator #102812

    atomic
    Participant

    Hi guys,
    I am trying to make fully dynamic forms (multiple forms on same page). I would like to render html in for each loop and to add jqxWalidator on that form with on validation success event.
    Number of input elements is variable as well as submit buttons.

    Thanks

    dynamic jqxWalidator #102827

    Martin
    Participant

    Hello atomic,

    Could you clarify what is the issue with achieving this?
    You should add the jqxValidator to a form, once the form is created.
    Can you send us an example of what you are doing?

    Best Regards,
    Martin

    jQWidgets Team
    http://www.jqwidgets.com/

    dynamic jqxWalidator #102835

    atomic
    Participant

    Hi Martin,
    Thanks for reply.
    I managed to dynamically added validators and jqx events. My form is dynamic and very big (more then 100 input fields and are different for different case).
    For anyone who needs something similar:
    There are three function createDataEntryBoxDetail, createDataEntryBoxGroup, createDataEntryBox that creates HTML dynamically.
    then I create for dynamically created inputs validation rules, event on validation success and at the end save function..

    
                    $.each( genData['general']['reactors'], function( id, reactor ) {
                        reactorType = reactor['type'];
                        reactorName = reactor['name']
                        let reactorVar = reactorName.replace(/\s/g, "");
                        //createDataEntryBoxdynamicaly creates HTML
                        createDataEntryBox(reactorName, reactorVar, reactorType, flag);
                        flag = 'collapsed';
                        let flagDetails = '';
                        $.each( iGroups, function( gid, group ) {
                            //createDataEntryBoxGroup dynamicaly creates HTML
                            createDataEntryBoxGroup(reactorName, reactorVar, reactorType, group['nameID'], group['name'], flagDetails);
                            flagDetails = 'collapsed';
                            rule[reactorVar+'_'+group['nameID']] = [];
                                $.each( bVars, function( bid, object ) {
                                if( (object[reactorName] != 'null' && !isNaN(object[reactorName])) && object['gid'] == group['nameID'] ){
                                    //createDataEntryBoxDetail creates HTML
                                    createDataEntryBoxDetail(reactorName,reactorVar, group['nameID'], object);
                                    $("#id_"+reactorVar+"_"+object['var']).val(object[reactorName]);
                                    rule[reactorVar+'_'+group['nameID']].push(
                                            { input: "#id_"+reactorVar+"_"+object['var'], message: object['var']+" is required!", action: "keyup", rule: "required" },
                                            { input: "#id_"+reactorVar+"_"+object['var'], message: object['var']+" is not number!", action: 'keyup', rule: function () {
                                                var value = $("#id_"+reactorVar+"_"+object['var']).val();
                                                var result = !isNaN(value);
                                                return result;
                                                }
                                            }
                                        
                                    );
                                }                            
                            });
                            $('#form_'+reactorVar+'_'+group['nameID']).change(function(){
                                $("#msgDetail_"+reactorVar+'_'+group['nameID']).text("Input has been changed. Please save changes.").removeClass("jqx-validator-success-label").addClass("jqx-validator-info-label").show();
                                $("#msgParent_"+reactorVar).text("Data not saved!.").removeClass("jqx-validator-success-label").addClass("jqx-validator-warning-label").show();
                            });
                            $('#form_'+reactorVar+'_'+group['nameID']).jqxValidator({ hintType: 'label', rules: rule[reactorVar+'_'+group['nameID']] }); 
    
                            $("#"+reactorVar+'_'+group['nameID']).on('click', function (event) {
                                reac = $(this).attr('reactor-data');
                                $('#form_'+reactorVar+'_'+group['nameID']).jqxValidator('validate');
                            })
    
                            $('#form_'+reactorVar+'_'+group['nameID']).on('validationSuccess', function (event) {
                                values = $( '#form_'+reactorVar+'_'+group['nameID'] ).serializeArray();
                                let data = [];
                                $.each( values, function( id, object ) {
                                    let chunk = {};
                                    let name = object['name'];
                                    let value = object['value']
                                    let res = name.split("_");
                                    let uid = res[0];
                                    let varName = res[1];
                                    chunk['reactor'] = reac;
                                    chunk['id'] = uid;
                                    chunk['var'] = varName;
                                    chunk['value'] = value;
                                    data.push(chunk);
                                });
                                saveBasic(JSON.stringify(data))
                                    .then(responseData => {
                                        switch (responseData["type"]) {
                                            case 'ERROR':
                                                ShowErrorMessage(responseData["msg"]);
                                            break;
                                            case 'SUCCESS':
                                                ShowSuccessMessage(responseData["msg"]);
                                                console.log(reactorVar+'_'+group['nameID']);
                                                $("#msgDetail_"+reactorVar+'_'+group['nameID']).html("Data have been saved.").removeClass("jqx-validator-info-label").addClass("jqx-validator-success-label").show();
                                                $("#msgParent_"+reactorVar).html("").removeClass("jqx-validator-warning-label").addClass("jqx-validator-success-label").show();
                                            break;
                                        }
                                    })
                                    .catch(error => {
                                        let responseData = error;
                                        ShowErrorMessage(responseData);
                                    });
                            })
                        });
                    });

    Thanks Martin anyway

    dynamic jqxWalidator #102838

    Martin
    Participant

    Hello atomic,

    Thank you for the update!

    Best Regards,
    Martin

    jQWidgets Team
    http://www.jqwidgets.com/

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.