jqxValidator rules in a counter loop

[RobWarningParticipant]

Hi,
I have a dynamically generated table in witch i put a jqxdropdownlist on every row.
I need to validate each dropdown.

I have followed the instructions in your topic https://www.jqwidgets.com/community/topic/dynamic-adding-to-validator-rules/
witch is working very nice.
Then in the loop where I create my table I do this:

 for (i = 1; i <= duration; i++) {
            firstDate = firstDate + 1000 * 60 * 60 * 24; //Add one day to the date.
            $('#scheduleTable').append('<tr><td> ' + i + ' </td><td>' + $.format.date(firstDate, 'ddd dd/MM/yyyy') + '</td><td><div class="shiftdd" id="shiftdd' + i + '"></div> </td></tr>'); //Add a table row
            $('#shiftdd' + i).jqxDropDownList({ source: Shifts, placeHolder: "Select shift", displayMember: 'text', width: '120px', height: '25px' }); //Create the dropdownList
            //Set the validation for this dropdownlist to the rules collection.
            rules.push({
                input: '#shiftdd' + i, message: 'Select a shift', action: 'select', rule: function () { //here I get the right reference.
                    var index = $('#shiftdd' + i).jqxDropDownList('getSelectedIndex'); //here i stays refering to the counter value
                    if (index < 0) { return false; }
                    else { return true; }
                }
            });
        }
        console.log(rules);
        //Update the validation rules collection to the Validator.
        $('#testForm').jqxValidator('rules', rules);

The problem is now that the first occurrence of “#shiftdd’ + i” in the input parameter works fine. But the second one, to get the ‘getSelectedIndex’, the value of i will not translate to a value.

I do understand by now that I need a javascript Closure, but I am breakeng my head what the syntax should be.
Could you please help me?

[RobWarningParticipant]

Very proud to solve this myself…
following code works:

 for (i = 1; i <= duration; i++) {
            firstDate = firstDate + 1000 * 60 * 60 * 24; //Add one day to the date.
            $('#scheduleTable').append('<tr><td> ' + i + ' </td><td>' + $.format.date(firstDate, 'ddd dd/MM/yyyy') + '</td><td><div class="shiftdd" id="shiftdd' + i + '"></div> </td></tr>'); //Add a table row
            $('#shiftdd' + i).jqxDropDownList({ source: Shifts, placeHolder: "Select shift", displayMember: 'text', width: '120px', height: '25px' }); //Create the dropdownList
            //Set the validation for this dropdownlist to the rules collection.
            (function (index) {  //put it in a immediately-invoked function expression
                rules.push({
                    input: '#shiftdd' + [index], message: 'Select a shift', action: 'select', rule: function () {
                        var indexe = $('#shiftdd' + [index]).jqxDropDownList('getSelectedIndex');
                        if (indexe < 0) { return false; }
                        else { return true; }
                    }
                });
            })(i);  //this (i) is important!!!
        }
        console.log(rules);

[MartinParticipant]

Hello RobWarning,

Thank you for the update!

Best Regards,
Martin

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

[Author]

Posts