jQuery UI Widgets Forums Dialogs and Notifications Window Custom Window Dialog – No Modal Content displayed

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 9 years, 4 months ago.

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

  • saravanan
    Participant

    Hi,

    Am in the process of creating custom modal dialog for Alert and Confirm by using jqxWindow.
    Problem am facing is when i click on SUBMIT Button for first time,my dialog is getting displayed but not the content (e.g. Name is Mandatory) ,whereas on second click – dialog content is getting displayed.

    The Below listed my code .
    kindly help me….

    
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <div class="container">
        <form id="frmMasterOne" name="frmMasterOne" method="post">        
            <table>
                <tr>
                    <td>
                        <fieldset>
                            <table id="tabMasterOne" style="width:450px">
                                <tr>
                                    <td>
                                        <label>Name</label>
                                        <div class="input-control text" data-role="input-control" data-hint-position="right">                                       
                                            <input id="name" name="Name" placeholder="Enter Your Name" type="text" value="" />
                                        </div>
                                    </td>
                                </tr>                           
                            </table>
                        </fieldset>
                    </td>               
                </tr>
                <tr>
                    <td>
                        <input type="button" class="primary" value="SUBMIT" onclick="ValidateAndSave(this)">
                    </td>
                </tr>
            </table>
            <br />
            <div style="visibility: hidden;display:none;" id="jqxWidget">
                <div style="width: 100%; height: 250px; border: 0px solid #ccc; margin-top: 10px;" id="mainDemoContainer">
                    <div id="eventWindow">
                        <div>
                            <img width="14" height="14" src='~/images/word.png' />
                            Modal Window
                        </div>
                        <div>
                            <center>
                                <div id="modalcontent">
                                </div>
                                <div>
                                    <div style="float: right; margin-top: 15px;">
                                        <input type="button" id="ok" value="OK" style="margin-right: 90px" class="success" />                                   
                                    </div>
                                </div>
                            </center>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#eventWindow').jqxWindow('close');            
        });    
    
        $("#name").jqxInput({ placeHolder: "Your User Name", height: 25, width: 450, minLength: 1, theme: "arctic" });
               
        function AlertWithFocus(element, msg) {        
            $('#eventWindow').jqxWindow({
                maxHeight: 150, maxWidth: 280, minHeight: 30, minWidth: 250, height: 105, width: 270,
                resizable: false, isModal: true, modalOpacity: 0.3,
                okButton: $('#ok'),
                initContent: function () {
                    $('#ok').jqxButton({ width: '65px' });                
                    $('#ok').focus();
                }
            }).on('close', function (event) {
                if (event.type === 'close') {
                    if (event.args.dialogResult.OK) {
                        $(element).focus();
                    } else if (event.args.dialogResult.Cancel) {
                    } else {
                    }
                }
            }).on('open', function (event) {
                if (event.type === 'close') {
                    if (event.args.dialogResult.OK) {
                    } else if (event.args.dialogResult.Cancel) {
                    } else {
                    }
                }
            });
    
            $('#eventWindow').jqxWindow('open');
            <strong>$("#modalcontent").text(msg);    </strong>            
        }
        
        function ValidateAndSave(dlg) {
            if (document.getElementById('name')) {
                var name = $("#name").val().trim();
                if (name == '') {
                    AlertWithFocus("#name", "Name is Mandatory");
                    return false;
                }
            }
    	else
    	{
    	}                   
        }
    </script>
    

    Dimitar
    Participant

    Hello saravanan,

    It is not a good practice to call the initialization code of a widget multiple times. We recommend initializing the window on $(document).ready() with autoOpen set to false and in the function AlertWithFocus only call its open method.

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.