jQuery UI Widgets Forums Grid using jqxvalidation , jqxwindow ,jqx tabs all together

This topic contains 2 replies, has 2 voices, and was last updated by  pankhi 8 years, 9 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author

  • pankhi
    Participant

    I am using jqxtabs ,and each tab has form. The issue is i want error icon to come on all tabs if there is any validation error inside any tab on click of a button . But currently error icon is getting displayed only on tab which is currently selected by user. not on unselected tabs, Please help me out.
    following is the code i am using:-

    $ = jQuery.noConflict();
    $(document).ready(function() {
        //===========================
        // show the grid for email Template
        //===========================
        var url = "/ebays/emailtemplatejson"; // action from where we get the result in json
        var source = {
            datatype: "json",
            datafields: [{
                name: 'Subject',
                type: 'string',
                map: 'SystemUserEmailTemplate>Subject'
            }, {
                name: 'Type',
                type: 'string',
                map: 'SystemEmailTemplateType>Type'
            }, {
                name: 'TypeDisplay',
                type: 'string',
                map: 'SystemEmailTemplateType>TypeDisplay'
            }, {
                name: 'PlainTextBody',
                type: 'string',
                map: 'SystemUserEmailTemplate>PlainTextBody'
            }, {
                name: 'UserPlateformId',
                type: 'string',
                map: 'SystemUserEmailTemplate>UserPlateformId'
            }, {
                name: 'TypeId',
                type: 'string',
                map: 'SystemUserEmailTemplate>Type'
            }, {
                name: 'Enable',
                type: 'string',
                map: 'SystemUserEmailTemplate>Enable'
            }, {
                name: 'Explanation',
                type: 'string',
                map: 'SystemUserEmailTemplate>Explanation'
            }, {
                name: 'Bcc',
                type: 'string',
                map: 'SystemUserEmailTemplate>Bcc'
            }],
            updaterow: function(rowid, rowdata, commit) {
                // synchronize with the server - send update command
            },
            id: 'SystemUserEmailTemplate>Id',
            url: url,
            pagesize: 30
        };
    
        var cellsrenderer = function(row, columnfield, value, defaulthtml, columnproperties) {
            if (value == "1") {
                return "yes";
            } else if (value == "0") {
                return "No";
            }
        }
        var dataAdapter = new $.jqx.dataAdapter(source);
        var editrow = -1;
    
        // initialize jqxGrid
        $("#jqxgrid").jqxGrid({
            width: '100%',
            theme: KiouiTheme,
            height: 350,
            source: dataAdapter,
            pageable: true,
            autoheight: true,
            sortable: true,
            altrows: true,
            enabletooltips: true,
            pagesizeoptions: ['10', '20', '30', '40'],
            showfilterrow: true,
            filterable: true,
            showtoolbar: false,
            enablebrowserselection: true,
            selectionmode: 'singlecell',
            // columns shown in grid are mention below
            columns: [{
                text: '',
                datafield: 'Edit',
                columntype: 'number',
                filterable: false,
                sortable: false,
                width: '5%',
                cellsrenderer: function() {
                    return '<div style="width: 100%"><img src="/images/edit.png" title="Edit" style=" margin-top: 10%;margin-left: 25%" /></div>';
                }
            }, {
                text: 'Type',
                datafield: 'TypeDisplay',
                width: '35%',
                filtertype: 'checkedlist'
            }, {
                text: 'Subject',
                datafield: 'Subject',
                width: '35%'
            }, {
                text: "User",
                datafield: 'UserPlateformId',
                width: '10%'
            },  {
                text: "Bcc",
                datafield: 'Bcc',
                width: '5%',
    			cellsrenderer:cellsrenderer,
            }, {
                text: "Enable",
                datafield: 'Enable',
                width: '5%',
                cellsrenderer: cellsrenderer,
            }, {
                text: '',
                datafield: 'Delete',
                columntype: 'number',
                filterable: false,
                sortable: false,
                width: '5%',
                cellsrenderer: function() {
                    return '<div><img src="/images/trash.png"  title="Delete" style="margin-top:10%;margin-left:25%" /></div>';
                }
            }, ]
    
        });
        //------------------------------------
        // adding validation to the form
        //------------------------------------
        $('#addtemplateForm').jqxValidator({
    		
            rules: [{
                input: '#SystemUserEmailTemplateType',
                message: 'Please select a message type.',
                action: 'keyup,blur',
                rule: function(input, commit) {
                    var type = $("#SystemUserEmailTemplateType").val();
                    if (type != 0) {
                        return true;
                    }
                    return false;
    				}
    			}, {
    				input: '#SystemUserEmailTemplateSubject',
    				message: 'Subject is required!',
    				action: 'keyup,blur',
    				rule: 'required'
    			}]
        });
        $('#edittemplateForm').jqxValidator({
            rules: [{
                input: '#Subject',
                message: 'Subject is required!',
                action: 'blur',
                rule: 'required'
            }]
        });
    
        // on click of edit and delete
        $("#jqxgrid").on("cellclick", function(event) {
            var column = event.args.column;
            var rowindex = event.args.rowindex;
            var columnindex = event.args.columnindex;
    
            //when user wants to edit the record
            if (columnindex == 0) {
    
                // open the popup window when the user clicks a button.
                editrow = rowindex;
                var offset = $("#jqxgrid").offset();
                $("#popupWindow").jqxWindow({
                    theme: KiouiTheme,
                    position: {
                        x: parseInt(offset.left) + 60,
                        y: parseInt(offset.top) - 20
                    }
                });
                // get the clicked row's data and initialize the input fields.
                var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
                $("#Subject").val(dataRecord.Subject);
                $("#Type").val(dataRecord.TypeId);
                $("#Enable").val(dataRecord.Enable);
                $("#WaitForDays").val(dataRecord.WaitForDays);
                $("#Bcc").val(dataRecord.Bcc);
    
                if (($("#PlainTextBody").val() == "") && (dataRecord.PlainTextBody != "")) { // after page loads
                    $("#PlainTextBody").html(dataRecord.PlainTextBody);
                } else {
                    $("#PlainTextBody").jqxEditor('val', dataRecord.PlainTextBody);
                }
    
                // show the popup window.
                $("#popupWindow").jqxWindow('show');
    
            };
            // if user click want to delete record
            if (columnindex == 5) {
                if (confirm('Are you sure you want to delete this record?')) {
    
                    deleterow = rowindex;
                    var rowID = $('#jqxgrid').jqxGrid('getrowid', deleterow); // fetch the deleted id
                    var del = "param=delete&Id=" + rowID;
                    $.ajax({
                        url: '/ebays/deleteemailtemplateajax',
                        data: del,
                        type: "POST",
                        cache: false,
                        async: false,
                        success: function(response) {
                            var res = response.match(/success/g);
                            if (response.replace(/\s+/, "") == res) {
                                var action = "delete";
                                gridmessage(action); //function called to disaply me
                                $('#jqxgrid').jqxGrid('updatebounddata');
                            }
                        }
                    });
                };
            };
        });
    
        var initGrid = function() {
            // update the edited row when the user clicks the 'Update' button.
            $(".Saverecord").click(function(event) {
                var checkedit = $('#edittemplateForm').jqxValidator('validate'); // adding validation in add form
                if (checkedit == true) {
                    showloader(); // to disable button and show loader image
                    var rowID = $('#jqxgrid').jqxGrid('getrowid', editrow);
                    var row = {
                        Subject: $("#Subject").val(),
                        Type: $("#Type").val(),
                        PlainTextBody: $("#PlainTextBody").val(),
                        UserPlateformId: $("#UserPlateformId").val(),
                        Enable: $("#Enable").val(),
                        WaitForDays: $("#WaitForDays").val(),
                        Bcc: $("#Bcc").val(),
                        Id: rowID,
                    };
                    // ajax called to UPDATE the row on edit
                    $.ajax({
                        url: "/ebays/updateemailtemplateajax",
                        type: "POST",
                        cache: false,
                        async: true,
                        data: row,
                        success: function(response) {
                            var res = response.match(/success/g);
                            if (response.replace(/\s+/, "") == res) {
                                $('#popupWindow').jqxWindow('close');
                                var action = 'edit';
                                showbuttons(); // function created in function.js file to show button enabled and hide loader
                                gridmessage(action);
                                $('#jqxgrid').jqxGrid('updatebounddata');
    
                            }
                        }
                    });
                    $("form").submit(function() {
                        return false;
                    });
    
                } else {
                    showbuttons();
                    event.preventDefault(); //If this method is called, the default action of the event will not be triggered.
                }
            });
        }
    
        var initWidgetAdd = function(tab) {
            switch (tab) {
                case 0:
                    initGridAdd();
                    break;
                case 1:
                    $("#SystemUserEmailTemplatePlainTextBody").jqxEditor({
                        height: '450px',
                        width: '650px'
                    });
                    break;
            }
    
        }
        var initGridAdd = function() {
                //======================================================
                // called ajax to save the data on click of "add template"
                //=======================================================
                $(".addtemplate").click(function(event) {
                    event.preventDefault(); //If this method is called, the default action of the event will not be triggered.
                    var check = $('#addtemplateForm').jqxValidator('validate'); // adding validation in add form
    
                    if (check === true) {
    
                        showloader(); // to disable button and show loader image
                        var EmailTemplateType = $('#SystemUserEmailTemplateType').val();
                        var Subject = $('#SystemUserEmailTemplateSubject').val();
                        var PlainTextBody = $('#SystemUserEmailTemplatePlainTextBody').val();
                        var ebayuser = $('#ebayuser').val();
                        var Enable = $('#SystemUserEmailTemplateEnable').val();
                        var WaitForDays = $('#SystemUserEmailTemplateWaitForDays').val();
                        var Bcc = $('#SystemUserEmailTemplateBcc').val();
    
                        $.ajax({
                            url: "/ebays/addemailtemplateajax",
                            type: "POST",
                            cache: false,
                            async: true,
                            data: {
                                Type: EmailTemplateType,
                                Subject: Subject,
                                PlainTextBody: PlainTextBody,
                                UserPlateformId: ebayuser,
                                Enable: Enable,
                                Bcc: Bcc,
                            },
                            success: function(response) {
                                if ($.trim(response) == "success") {
                                    $('#TempForm').jqxWindow('close');
                                    var action = 'add';
                                    showbuttons(); // function created in function.js file to show button enabled and hide loader
                                    gridmessage(action);
                                    $('#jqxgrid').jqxGrid('updatebounddata');
                                }
                            }
                        });
                        $("#addtemplateForm").submit(function() {
                            return false;
                        });
                    } else {
                        showbuttons();
                        event.preventDefault(); //If this method is called, the default action of the event will not be triggered.
                    }
                });
            }
            //---------------------------------
            // widget to show tabs for edit section
            //---------------------------------
    
        // init widgets to add in different tabs
        var initWidgets = function(tab) {
            switch (tab) {
                case 0:
                    initGrid();
                    break;
                case 1:
                    $("#PlainTextBody").jqxEditor({
                        height: '450px',
                        width: '650px'
                    });
                    break;
            }
        }
        $('#jqxTabs').jqxTabs({
            width: "750px",
            initTabContent: initWidgets
        }); // adding tabS
        //---------------------------------
        // widget to show tabs for add section
        //---------------------------------
    
        $('#jqxTabsAdd').jqxTabs({
            width: "750px",
            initTabContent: initWidgetAdd
        }); // adding tabS
        // the Tab Contents will be loaded with Ajax 
        $('#jqxTabsAdd').on('selected', function(event) {
            var pageIndex = event.args.item + 1;
    
            // if the type is nt selected we will disabled the other tabs.		
            if ($('#SystemUserEmailTemplateType').val() == 0) {
                var check = $('#addtemplateForm').jqxValidator('validate'); // adding validation in add form
    
                $('#jqxTabsAdd').jqxTabs({
                    disabled: true
                }); // disabled tab
            }
    
            $('#SystemUserEmailTemplateType').on('change', function(event) {
    
                if ($('#SystemUserEmailTemplateType').val() == 0) {
                    var check = $('#addtemplateForm').jqxValidator('validate'); // adding validation in add form
    
                    $('#jqxTabsAdd').jqxTabs({
                        disabled: true
                    }); // disabled tab
                } else {
                    $('#jqxTabsAdd').jqxTabs({
                        disabled: false
                    }); // enabled tab on select of the type
                }
    
            });
    
            if (pageIndex == 2) {
    
                $("#SystemUserEmailTemplatePlainTextBody").jqxEditor({
                    height: '450',
                    width: '650'
                });
                $.ajax({
                    url: "/ebays/prefilledcontentajax",
                    type: "POST",
                    cache: false,
                    async: true,
                    data: {
                        Type: $("#SystemUserEmailTemplateType").val(),
                    },
                    dataType: "json",
                    success: function(response) {
                        // response is JSON
                        if (response[0] != undefined) {
                            if (response[0].Subject != undefined) {
                                $("#SystemUserEmailTemplateSubject").val(response[0].Subject);
                            }
                            if (response[0].PlainTextBody != undefined) {
                                $("#SystemUserEmailTemplatePlainTextBody").val(response[0].PlainTextBody);
                            }
                        } else {
                            $("#SystemUserEmailTemplateSubject").val('');
                            $("#SystemUserEmailTemplatePlainTextBody").val('');
                        }
                    }
                });
            }
    
        });
    
        // show the explanation on elect of the type fro Add form 
        $("#SystemUserEmailTemplateType").change(function() {
            $.ajax({
                url: "/ebays/fetchTypeDetailajax",
                type: "POST",
                cache: false,
                async: true,
                data: {
                    Type: $("#SystemUserEmailTemplateType option:selected").val(),
                },
                dataType: "json",
                success: function(response) {
                    // response is JSON
    
                    if (response[0] != undefined) {
                        $('.displayExplanation').css('visibility', 'visible');
                        $('.displayExp').html(response[0].Explanation);
                    } else {
                        $('.displayExplanation').css('visibility', 'hidden');
                    }
                }
            });
        });
        // show the explanation on elect of the type for Edit form 
        $("#Type").change(function() {
            $.ajax({
                url: "/ebays/fetchTypeDetailajax",
                type: "POST",
                cache: false,
                async: true,
                data: {
                    Type: $("#Type option:selected").val(),
                },
                dataType: "json",
                success: function(response) {
                    // response is JSON
    
                    if (response[0] != undefined) {
                        $('.displayExplanation').css('visibility', 'visible');
                        $('.displayExp').html(response[0].Explanation);
                    } else {
                        $('.displayExplanation').css('visibility', 'hidden');
                    }
                }
            });
        });
    
        //=====================================
        // Tooltip code
        //=====================================
        $(".TypeTooltip").jqxTooltip({
            content: '<p align=left>Select the type of message you want to create.<BR>A brief explanation will appear bellow upon selecting one.</p>',
            position: 'mouse',
            name: 'movieTooltip',
            position: 'right',
            autoHideDelay: '30000'
        });
        $(".DaysTooltip").jqxTooltip({
            content: '<p align=left>Number of days to wait after the order has been paid to send this message.</p>',
            position: 'mouse',
            name: 'movieTooltip',
            position: 'right',
            autoHideDelay: '30000'
        });
        $(".UserTooltip").jqxTooltip({
            content: '<p align=left>Makes this template available to the Customers of this Seller Id.</p>',
            position: 'mouse',
            name: 'movieTooltip',
            position: 'right',
            autoHideDelay: '30000'
        });
        $(".htmlTooltip").jqxTooltip({
            content: '<p align=left>The core message send to the Buyer.<BR>This can be plain text or HTML.</p>',
            position: 'mouse',
            name: 'movieTooltip',
            position: 'right',
            autoHideDelay: '30000'
        });
        $(".EnableTooltip").jqxTooltip({
            content: '<p align=left>Please enable or disable this message template.<BR>A disabled message is ignored by the application.</p>',
            position: 'mouse',
            name: 'movieTooltip',
            position: 'right',
            autoHideDelay: '30000'
        });
        $(".SubjectTooltip").jqxTooltip({
            content: '<p align=left>The Subject of the message.</p>',
            position: 'mouse',
            name: 'movieTooltip',
            position: 'right',
            autoHideDelay: '30000'
        });
    	$(".BccTooltip").jqxTooltip({
            content: '<p align=left>Select BCC yes if you want to send email.</p>',
            position: 'mouse',
            position: 'right',
            autoHideDelay: '30000'
        });
    
    });
    
    //==================================================================
    //  window open in email template view "/settings/usersemailtemplate"
    //==================================================================
    var basicDemo = (function() {
        //Adding event listeners
        function _addEventListeners() {
            $('#addrowbutton1').click(function() {
                $('#SystemUserEmailTemplateSubject').val('');
                $('#SystemUserEmailTemplatePlainTextBody').val('');
                $('#ebayuser').val('All');
                $('#SystemUserEmailTemplateWaitForDays').val('0');
                $('#SystemUserEmailTemplateType').val('0');
                $('#TempForm').jqxWindow('open'); // to open the window onclick of open button
            });
            $('#hideWindowButton').mousedown(function() {
                $('#TempForm').jqxWindow('close'); // to close the add emailtemplate window onclick of cancel button
            });
            $('#cancel').mousedown(function() {
                $('#popupWindow').jqxWindow('close'); // to close the edit emailtemplate window onclick of close button of the details tab
            });
            $('.cancelUser').mousedown(function() {
                $('#popupWindow').jqxWindow('close'); // to close the edit emailtemplate window onclick of close button of the rule
            });
        };
    
        //Creating all page elements which are jqxWidgets
        function _createElements() {
            $('#addrowbutton1').jqxButton({
                width: '70px',
                theme: KiouiTheme
            });
        };
    
        //Creating the window
        function _createWindow() {
            var offset = $("#jqxgrid").offset();
            $('#TempForm').jqxWindow({
                theme: KiouiTheme,
                position: {
                    x: parseInt(offset.left) + 60,
                    y: parseInt(offset.top) - 20
                },
                isModal: true,
                modalOpacity: 0.3,
                height: 800,
                width: 800,
                resizable: false,
                autoOpen: false,
                initContent: function() {
                    $('#TempForm').jqxWindow('focus');
                },
            });
    
            // initialize the edit pop up window.
            $("#popupWindow").jqxWindow({
                resizable: false,
                isModal: true,
                autoOpen: false,
                cancelButton: $("#cancel"),
                modalOpacity: 0.3,
                theme: KiouiTheme,
                height: 800,
                width: 800,
            });
    
        };
        return {
            config: {
                dragArea: null
            },
            init: function() {
                _createElements();
                _addEventListeners();
                _createWindow();
            }
        };
    }());
    
    $(document).ready(function() {
        //Initializing the demo
        basicDemo.init();
    });

    Dimitar
    Participant

    Hello pankhi,

    Maybe you can display a custom message on a form’s validationError event. E.g.: the second tab is selected, you click the button and the first tab’s form does not pass the validation. You can then show a custom div in the second tab with an error message.

    Best Regards,
    Dimitar

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


    pankhi
    Participant

    thanks validationError works for me. 🙂

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

You must be logged in to reply to this topic.