jQuery UI Widgets › Forums › Editors › DateTimeInput › Problem with dateTimeInput and form.reset()

Tagged: , , ,

This topic contains 2 replies, has 2 voices, and was last updated by  vorius 12 years, 1 month ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Problem with dateTimeInput and form.reset() Posts
  • December 4, 2012 at 1:09 am Problem with dateTimeInput and form.reset() #11852

    vorius
    Participant

    I am having trouble setting the dateTimeInput’s value after the form has been reset – I cant figure out any way to do it. Its as if reset screws it up?

    See below example to reproduce:

    <!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.2.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/globalization/jquery.global.js"></script>
    </head>
    <body>
    <div id='content'>
    <script type="text/javascript">
    $(document).ready(function () {
    var theme = getTheme();
    // Create a jqxDateTimeInput
    $("#jqxWidget").jqxDateTimeInput({ width: '250px', height: '25px', theme: theme });
    $("#jqxWidget").jqxDateTimeInput('setDate', null);
    });
    function doreset() {
      $('#testForm')[0].reset();
      $("#jqxWidget").jqxDateTimeInput('setDate', null);
    }
    </script>
    <form id="testForm">
    <div id='jqxWidget'><
    </div>
    <br/>
    <input type="button" onclick="doreset()" value="Reset">
    </form>
    </div>
    </body>
    </html>
    December 4, 2012 at 6:48 am Problem with dateTimeInput and form.reset() #11864

    Dimitar
    Participant

    Hello vorius,

    Here is a solution on the matter:

    <!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.2.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/globalization/jquery.global.js"></script>
    </head>
    <body>
        <div id='content'>
            <script type="text/javascript">
                $(document).ready(function () {
                    var theme = getTheme();
                    // Create a jqxDateTimeInput
                    $("#jqxWidget").jqxDateTimeInput({ width: '250px', height: '25px', theme: theme });
                    $("#jqxWidget").jqxDateTimeInput('setDate', null);
                });
                function doreset() {
                    $('#testForm')[0].reset();
                    setTimeout(function () {
                        $("#jqxWidget").jqxDateTimeInput('setDate', null);
                    }, 10);
                };
            </script>
            <form id="testForm">
            <div id='jqxWidget'>
            </div>
            <br />
            <input type="button" onclick="doreset()" value="Reset" />
            </form>
        </div>
    </body>
    </html>

    We hope it is helpful to you.

    Best Regards,
    Dimitar

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

    December 4, 2012 at 3:47 pm Problem with dateTimeInput and form.reset() #11887

    vorius
    Participant

    Oh interesting! So it’s like the reset() function does an asynchronous call and my setting of the dropdown values after calling reset was happening before the reset() finished? That’s pretty odd! (More reasons to hate web ui development lol)

    Thanks for your help!

    IS there any chance this delayed setting will still happen too quickly say if the user’s machine is particularly slow?

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

You must be logged in to reply to this topic.