jQWidgets Forums

This topic contains 3 replies, has 2 voices, and was last updated by Stef 10 years, 4 months ago.

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

Author

2 events produces with 'setDate' Posts

March 12, 2015 at 10:01 am 2 events produces with 'setDate' #68407

Stef

Participant

Hello,

I just want to know if it’s normal that 2 events are product when the function ‘setDate’ is call with a bind(‘valueChanged’,…) on jqxDateTimeInput ?

Code:


<html lang="en">
   <head>
      <title>jQuery DateTimeInput Sample</title>
         <link rel="stylesheet" href="jqwidgets-ver3.7.1/jqwidgets/styles/jqx.base.css" type="text/css"/>
         <script type="text/javascript" src="jquery-2.1.3/jquery-2.1.3.js"></script>
         <script type="text/javascript" src="jqwidgets-ver3.7.1/jqwidgets/jqxcore.js"></script>
         <script type="text/javascript" src="jqwidgets-ver3.7.1/jqwidgets/jqxdatetimeinput.js"></script>
         <script type="text/javascript" src="jqwidgets-ver3.7.1/jqwidgets/jqxcalendar.js"></script>
         <script type="text/javascript" src="jqwidgets-ver3.7.1/jqwidgets/jqxtooltip.js"></script>
         <script type="text/javascript" src="jqwidgets-ver3.7.1/jqwidgets/jqxbuttons.js"></script>
         <script type="text/javascript" src="jqwidgets-ver3.7.1/jqwidgets/globalization/globalize.js"></script>

         <script type="text/javascript">
            $(document).ready(function () {
               $("#jqxdatetimeinput").jqxDateTimeInput({ width: '250px', height: '25px' });

               // init buttons.
               $("#getDateButton").jqxButton();
               $("#setDateButton").jqxButton();

               // set new date.
               $("#setDateButton").bind('click', function () {
                  var date = new Date();
                  date.setFullYear(2012, 11, 7);
                  $('#jqxdatetimeinput').jqxDateTimeInput('setDate', date);
               });

               // get date.
               $("#getDateButton").click(function () {
                  var date = $('#jqxdatetimeinput').jqxDateTimeInput('getDate');
               });
               
               $('#jqxdatetimeinput').bind('valueChanged', function (event) {
                  alert("#" + event.target.id + ': ' + $('#jqxdatetimeinput').jqxDateTimeInput('getDate'));
               });
            });
      </script>  
   </head>
   <body>
      <div id='content'>
         <div id='jqxdatetimeinput'></div>
         <div style="margin-top: 10px;">
            <input id="getDateButton" type="button" value="Get Date"/>
            <input id="setDateButton" type="button" value="Set Date"/>
         </div>
      </div>
   </body>
</html>

March 12, 2015 at 12:12 pm 2 events produces with 'setDate' #68411

Peter Stoev

Keymaster

Hi Stef,

valueChanged is raised each time setDate is called or value is changed. It is very sensitive event. You may use “change” instead which is less sensitive on changes.

Regards,
Petet Stoev

March 12, 2015 at 2:47 pm 2 events produces with 'setDate' #68425

Stef

Participant

Hi Peter,

thank you for your answer and that’s a hassle because I am writing an app which is jqwidget client side, the web server side java is J2E – Apache Tomcat and finally the server side data and programs is an as400.
I need the “valueChanged” function to approach “real time” and synchronize each server.

I am afraid to saturate the socket between Tomcat and AS400 whether the events are doubled for a single call to ‘setDate’ or other as a change in value of any input I have not tried it yet.

Is JQuery or JQWidget doubling the event?

Sincerely, Stephane.

March 12, 2015 at 9:50 pm 2 events produces with 'setDate' #68440

Stef

Participant

Hi Peter,
I found a way to solve my problem;
I have only a single event now. I really do not know why I had two events … the mystery of javascript.

Here’s the code:


<html lang="en">
   <head>
      <title>jQuery DateTimeInput Sample</title>
         <link rel="stylesheet" href="jqwidgets-ver3.7.1/jqwidgets/styles/jqx.base.css" type="text/css"/>
         <script type="text/javascript" src="jquery-2.1.3/jquery-2.1.3.js"></script>
         <script type="text/javascript" src="jqwidgets-ver3.7.1/jqwidgets/jqxcore.js"></script>
         <script type="text/javascript" src="jqwidgets-ver3.7.1/jqwidgets/jqxdatetimeinput.js"></script>
         <script type="text/javascript" src="jqwidgets-ver3.7.1/jqwidgets/jqxcalendar.js"></script>
         <script type="text/javascript" src="jqwidgets-ver3.7.1/jqwidgets/jqxtooltip.js"></script>
         <script type="text/javascript" src="jqwidgets-ver3.7.1/jqwidgets/jqxbuttons.js"></script>
         <script type="text/javascript" src="jqwidgets-ver3.7.1/jqwidgets/globalization/globalize.js"></script>

         <script type="text/javascript">
            $(document).ready(function () {
               $("#jqxdatetimeinput").jqxDateTimeInput({ width: '250px', height: '25px', formatString: 'dd.MM.yyyy' });

               // init buttons.
               $("#setDateButton").jqxButton();
               $("#getDateButton").jqxButton();

               // get date.
               $("#getDateButton").bind('click', function () {
                  alert("#"   + event.target.id + ':\n' 
                              + $('#jqxdatetimeinput').jqxDateTimeInput('getText') + "\n"
                              + $('#jqxdatetimeinput').jqxDateTimeInput('getDate'));
               });

               // set new date.
               $("#setDateButton").bind('click', function () {
                  var isoDate = '2015-05-11';
                  $('#jqxdatetimeinput').jqxDateTimeInput('setDate', isoDate);
               });

               // listen to new value.
               $('#jqxdatetimeinput').bind('valueChanged', function (event) {
                  alert("#" + event.target.id + ': ' + $('#jqxdatetimeinput').jqxDateTimeInput('getDate'));
                  $("#dateinfo").text($('#jqxdatetimeinput').jqxDateTimeInput('getText'));
               });
            });
      </script>  

   </head>
   <body>
      <div id='content'>
         <div id='jqxdatetimeinput'></div>
         <div style="margin-top: 10px;">
            <input id="setDateButton" type="button" value="Set Date"/>
            <input id="getDateButton" type="button" value="Get Date"/>
         </div>
         <span id="dateinfo">
         </span>
      </div>
   </body>
</html>

Thanks for your help, Stephane.

Author

Posts

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

You must be logged in to reply to this topic.