IE Browser Specific Problem

[basumrinmoyParticipant]

When I click on Date icon to open popup / Calendar it opens on all browser except IE 7.0 . Please tell in why its not open and in there any limitation for IE.

[DimitarParticipant]

Hello basumrinmoy,

We were not able to reproduce the reported issue by testing the demos on the site. Please provide us with a sample code which we may determine the source of the issue from and share the version of jQWidgets you are working with.

Best Regards,
Dimitar

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

[basumrinmoyParticipant]

Is it workin in all version of IE ?

[basumrinmoyParticipant]

Is it working in all version of IE ?

[DimitarParticipant]

Hello basumrinmoy,

jqxDateTimeInput works and is tested with IE7, IE8, IE9 and IE10. We do not support IE6. If you have an issue on your side, please provide a sample code which demonstrates it/

Best Regards,
Dimitar

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

[basumrinmoyParticipant]

DateTimeInput opens in IE 7.0 . Actual issue I have found – I have several forms open using jqxWindow and in those forms DateTime Calender not open in IE 7.0 otherwise if the DateTimeInput is inside jqxExpandar or not opens.

[basumrinmoyParticipant]

my html designl design

<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
    <div id="jqxgrid">
    </div>
    <div style='margin-top: 20px;'>
      
        <div style='margin-left: 10px; float: left;'>
           
            <input type="button" value="Open" id='openit' />
        </div>
    </div>
</div>
<div id="Accounteditform">
    <div>
        <table border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td>
                    Date
                </td>
                <td>
                    <div id="dtDOB">
                    </div>
                </td>
            </tr>
        </table>
    </div>
</div>

[basumrinmoyParticipant]

My Script:

<link rel="stylesheet" href="../../Scripts/jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="../../Scripts/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../Scripts/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../Scripts/gettheme.js"></script>
<script type="text/javascript" src="../../Scripts/jqwidgets/jqxdatetimeinput.js"></script>
<script type="text/javascript" src="../../Scripts/jqwidgets/jqxcalendar.js"></script>
<script type="text/javascript" src="../../Scripts/jqwidgets/jqxtooltip.js"></script>
<script type="text/javascript" src="../../Scripts/jqwidgets/jqxwindow.js"></script>
<script src="../../Scripts/jqwidgets/globalization/globalize.js" type="text/javascript"></script>
<script src="../../Scripts/jqwidgets/globalization/jquery.global.js" type="text/javascript"></script>
@{
    ViewBag.Title = "Home Page";
}
<script type="text/javascript">
    $(document).ready(function () {
        var theme = getDemoTheme();
        $('#dtDOB').jqxDateTimeInput({ width: '200px', height: '25px', theme: theme });
        $("#Accounteditform").jqxWindow({ height: 420, width: 850, resizable: false, theme: theme, isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.30 });
        $("#openit").click(function () {
            $("#Accounteditform").jqxWindow('show');
            //$("#jqxgrid").jqxGrid('exportdata', 'json', 'jqxGrid');
        });
    });
</script>

[basumrinmoyParticipant]

Please help me I already send you the sample Code which demonstrates it.

@{
ViewBag.Title = “Home Page”;
}

<script type="text/javascript">
    $(document).ready(function () {
        var theme = getDemoTheme();
        $('#dtDOB').jqxDateTimeInput({ width: '200px', height: '25px', theme: theme });
        $("#Accounteditform").jqxWindow({ height: 420, width: 850, resizable: false, theme: theme, isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.30 });
        $("#openit").click(function () {
            $("#Accounteditform").jqxWindow('show');
            //$("#jqxgrid").jqxGrid('exportdata', 'json', 'jqxGrid');
        });
    });
</script>

<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
    <div id="jqxgrid">
    </div>
    <div style='margin-top: 20px;'>
      
        <div style='margin-left: 10px; float: left;'>
           
            <input type="button" value="Open" id='openit' />
        </div>
    </div>
</div>
<div id="Accounteditform">
    <div>
        <table border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td>
                    Date
                </td>
                <td>
                    <div id="dtDOB">
                    </div>
                </td>
            </tr>
        </table>
    </div>
</div>

[Peter StoevKeymaster]

Hi guys,

I wanted to update this post by providing a working sample with jQWidgets 2.8.1.

The following code displays a jqxDateTimeInput within jqxWindow. When the DateTimeInput’s Calendar is opened, it is displayed over the window as expected. The code is tested with jQWidgets 2.8.1 and IE7. If you use an earlier version of jQWidgets, please consider updating to the latest one.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#window").jqxWindow({
                    width: 400, height: 100, initContent: function () {
                        $("#input").jqxDateTimeInput({ width: '300px', height: '25px'});
                    }
                });
            });
        </script>
        <div id="window">
            <div>Title</div>
            <div>
                <div id='input'>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[basumrinmoyParticipant]

Thanks Its working.

[Author]

Posts