DMXzone Calendar 2 Support Product Page

Solved

Problems with 2 calendars in the same page

Reported 03 Oct 2013 19:27:06
1
has this problem
03 Oct 2013 19:27:06 Luca lucag posted:
Hello
I have two calendars in the same form: date start and date end.
Problem:
when i open one of two calendars, for the first time, is displayed. If I try to open the second or reopen the first, not works.

DATE START:
        <input id="dmxCalendar22"  name="dmxCalendar22" class="dmxCalendar2" readonly="readonly" />
<script type="text/javascript">
  // <![CDATA[
jQuery(document).ready(
   function()
     {
       jQuery("#dmxCalendar22").dmxCalendar2(
         {"dateFormat": "dd/mm/yy", "altFormat": "yy/mm/dd", "condDates": [], "firstDay": 1, "duration": "slow", "showOptions": {"direction": "up", "easing": "swing"}, "yearRange": "c-10:c 10"}
       );
     }
);
  // ]]>
</script>

DATE END
        <input id="dmxCalendar21"  name="dmxCalendar21"  class="dmxCalendar2" readonly="readonly" />
<script type="text/javascript">
  // <![CDATA[
jQuery(document).ready(
   function()
     {
       jQuery("#dmxCalendar21").dmxCalendar2(
         {"dateFormat": "dd/mm/yy", "altFormat": "yy/mm/dd", "condDates": [], "firstDay": 1, "duration": "slow", "showOptions": {"direction": "up", "easing": "swing"}, "yearRange": "c-10:c 10"}
       );
     }
);
  // ]]>
</script>

inspected with firebug the calendar div don't change the state (display and position)

Calendar displayed
<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" style="z-index: 1; position: absolute; top: 494.233px; left: 277.317px; display: block;">

when I jump on the second textbox (or return on the same):
<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" style="z-index: 1; position: absolute; top: 494.233px; left: 277.317px; display: none; opacity: 0;">

in all browsers..
In the page are also present two textarea with HTML editor 3

Thank you
Regards
Luca

Replies

Replied 04 Oct 2013 06:54:14
04 Oct 2013 06:54:14 Miroslav Zografski replied:
Hello Luca,

Please, provide a link to the page in question as testing your case did not reveal any problems.

Regards.
Replied 04 Oct 2013 07:49:21
04 Oct 2013 07:49:21 Luca lucag replied:
Hello Miroslav
I solved it
it was only a matter of hierarchy between scripts.
As usual after update JQ need to review all, is very frustrating when the pages to be checked are dozens
This does not work

<script type="text/javascript" src="../../ScriptLibrary/require.js"></script>
<link rel="stylesheet" type="text/css" href="../../Styles/jqueryui/blitzer/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="../../Styles/jqueryui/blitzer/jquery-ui.min.css" />
<link rel="stylesheet" type="text/css" href="../../Styles/jqueryui/blitzer/jquery.ui.theme.css" />
<script type="text/javascript" src="../../ScriptLibrary/jquery-latest.pack.js"></script>
<script type="text/javascript" src="../../ScriptLibrary/jquery-ui-core.min.js"></script>
<script type="text/javascript" src="../../ScriptLibrary/jquery-ui-effects.min.js"></script>
<script type="text/javascript" src="../../ScriptLibrary/jquery.inputHintBox.js"></script>
<script type="text/javascript" src="../../ScriptLibrary/jquery.maskedinput-1.2.2.js"></script>
<script type="text/javascript" src="../../ScriptLibrary/jquery.validate.min.js"></script>
<script type="text/javascript" src="../../ScriptLibrary/dmx.jquery.validate.js"></script>
<script type="text/javascript" src="../../ScriptLibrary/jquery.tooltip.min.js"></script>
<script type="text/javascript" src="../../ScriptLibrary/jquery.hoverIntent.min.js"></script>
<link rel="stylesheet" type="text/css" href="../../Styles/dmxEditor.css" />
<link rel="stylesheet" type="text/css" href="../../Styles/dmxCalendar2.css" />
<link rel="stylesheet" type="text/css" href="../../Styles/jqueryui/blitzer/blitzer.css" />
<script type="text/javascript" src="../../ScriptLibrary/jsvat.js"></script>
<script type="text/javascript" src="../../ScriptLibrary/dmxEditor.min.js"></script>
<script type="text/javascript" src="../../ScriptLibrary/dmxCalendar2.js"></script>
<script type="text/javascript" src="../../ScriptLibrary/dmxCalendar2/lang/Italian/jquery.ui.datepicker-it.js"></script>
<link rel="stylesheet" href="../../Styles/dmxValidator/validatorHint6.css" type="text/css">
<link rel="stylesheet" href="../../Styles/dmxValidator/validatorError6.css" type="text/css">


This works:

<link rel="stylesheet" type="text/css" href="../../Styles/dmxCalendar2.css" />
<link rel="stylesheet" type="text/css" href="../../Styles/jqueryui/blitzer/blitzer.css" />
<link rel="stylesheet" type="text/css" href="../../Styles/jqueryui/blitzer/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="../../Styles/jqueryui/blitzer/jquery-ui.min.css" />
<link rel="stylesheet" type="text/css" href="../../Styles/jqueryui/blitzer/jquery.ui.theme.css" />
<link rel="stylesheet" type="text/css" href="../../Styles/dmxEditor.css" />
<script type="text/javascript" src="../../ScriptLibrary/require.js"></script>
<script type="text/javascript" src="../../ScriptLibrary/jquery-latest.pack.js"></script>
<script type="text/javascript" src="../../ScriptLibrary/jsvat.js"></script>
<script type="text/javascript" src="../../ScriptLibrary/jquery-ui-core.min.js"></script>
<script type="text/javascript" src="../../ScriptLibrary/jquery-ui-effects.min.js"></script>
<script type="text/javascript" src="../../ScriptLibrary/dmxCalendar2.js"></script>
<script type="text/javascript" src="../../ScriptLibrary/dmxCalendar2/lang/Italian/jquery.ui.datepicker-it.js"></script>
<script type="text/javascript" src="../../ScriptLibrary/dmxEditor.min.js"></script>
<link rel="stylesheet" href="../../Styles/dmxValidator/validatorHint12.css" type="text/css">
<link rel="stylesheet" href="../../Styles/dmxValidator/validatorError12.css" type="text/css">
<script type="text/javascript" src="../../ScriptLibrary/jquery.inputHintBox.js"></script>
<script type="text/javascript" src="../../ScriptLibrary/jquery.maskedinput-1.2.2.js"></script>
<script type="text/javascript" src="../../ScriptLibrary/jquery.validate.min.js"></script>
<script type="text/javascript" src="../../ScriptLibrary/dmx.jquery.validate.js"></script>
<script type="text/javascript" src="../../ScriptLibrary/jquery.tooltip.min.js"></script>
<script type="text/javascript" src="../../ScriptLibrary/jquery.hoverIntent.min.js"></script>

Thank you
Regards
Luca

Reply to this topic