jQWidgets Forums

Tagged: add, datetimeinput, dynamically, jqxdatetimeinput, Widget

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

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

Author

Dynamically adding widgets Posts
December 17, 2012 at 4:25 pm Dynamically adding widgets #12474

zorba
Member

I’m trying to dynamically/programmatically add calendar widgets to static divs from the code behind of an asp.net page. At first the divs have a display property of “none”, but if the conditions call for a calendar control, this property is set to “block” and the div is located in the correct location. Basically, I’m building a control bar, and the number of controls/widgets isn’t known until runtime. I use static divs rather than adding them through code behind because I’m having no luck getting this to work. All my regular asp.net controls do work, however. It’s just the jqwidget calendar with which I’m having problems. It doesn’t render at all.

Oh, of course…I get the error “Microsoft JScript runtime error: Object doesn’t support property or method “jqxDateTimeInput”

The error is thrown on this:

<scripttype=’text/javascript’>$(document).ready(function () { $(‘#cal_1’).jqxDateTimeInput({ width: ‘250px’, height: ’25px’ });$(‘#cal_1’).bind(‘valuechanged’,

Any help is greatly appreciated.

Thanks!

Follow-up…

I’ve added this to the head section of my asp page:

$(document).ready(function () {

$(‘#cal_1’).jqxDateTimeInput({ width: ‘250px’, height: ’25px’ });

$(‘#cal_1’).bind(‘valuechanged’, function (event) { var dt = event.args.date;

alert(dt); });

});

The div with id=”cal_1″ is hard-coded on the page yet I still get the error. Very weird.

December 18, 2012 at 6:21 am Dynamically adding widgets #12493
Dimitar
Participant
Hello lroper,

Here is a basic example of adding a jqxDateTimeInput widget dynamically through JavaScript:
```
<!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>
    <title>jQuery DateTimeInput Sample</title>
    <link rel="stylesheet" href="../2.5.5/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="../2.5.5/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../2.5.5/jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../2.5.5/jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="../2.5.5/jqwidgets/jqxtooltip.js"></script>
    <script type="text/javascript" src="../2.5.5/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../2.5.5/jqwidgets/globalization/jquery.global.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#createDateTimeInput").click(function () {
                    $("#jqxdatetimeinput").jqxDateTimeInput({ width: '250px', height: '25px' });
                });
            });
        </script>
        <button id="createDateTimeInput">
            Create a DateTimeInput widget</button>
        <div id='jqxdatetimeinput'>
        </div>
    </div>
</body>
</html>
```
Please, remember to add links to all needed .js and .css files as shown.

Best Regards,
Dimitar

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

Posts

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

You must be logged in to reply to this topic.