Custom Window Dialog – No Modal Content displayed

[saravananParticipant]

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>

[DimitarParticipant]

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/

[Author]

Posts