0

I have a very strange behavior with a datepicker loaded with data-type="ajax" inside the fancybox.

  1. It is not possible to change month and year in the datepicker.
  2. If I open datepicker and close the fancybox not by using the close "x", the datepicker still remains, but then with working select boxes for month and year

Here's my code from the calling script:

<html>
<head>
<title>test fancybox with datepicker</title>
<script language="javascript" type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script></head>
<body>
    <a data-fancybox data-type="ajax" href="testfancy-call.php">
        Load Fancybox Content
    </a>
</body>
</html>

And this is the very simple code from testfancy-call.php:

<html>
<head>
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            $("#date").datepicker({
                changeMonth: true,
                changeYear: true,
            });
        });
    </script>
</head>
<body>
<h1>Datepicker</h1>
<input type="text" name="date" value="" id="date">
</body>
</html>

I tried to use data-type="iframe". Here I get the datepicker working, but I have to include all external script inside "testfancy-call.php". This is not a proper solution for me, because the used software's architecture doesn't allow this. So I need to find a way using data-type="ajax".

EDIT

The behavior is only when loading with data-type="ajax". If I place the code stuff from the ajax-loaded file testfancy-call.php directly inside the calling script like in https://codepen.io/fancyapps/pen/QqLXaz it works!

EDIT 2

After some research I found that it's a crossbrowser problem for issue 1. In Firefox the selectboxes for month and year so not work. Internet Explorer and Chrome work like exspected. Is there a way to get Firefox working?

All three testet browsers have the problem that is described in issue 2.

EDIT 3

I've uploaded a demo: http://marcox.square7.ch/testfancy.html

6
  • Possible duplicate of Datepicker (month and year) not working inside fancybox
    – Janis
    Commented Feb 3, 2018 at 11:06
  • @Janis: It's not duplicate. the way, that you just show up an code which is already on the site works, but in my case I load on demand a new script with data-type="ajax" and href="testfancy-call.php"
    – Marco
    Commented Feb 3, 2018 at 13:34
  • Since you have not provided a demo, it is not possible to help you, because it just works. Make sure you have not enabled touch event simulation, because then firefox will send both touch and click events thus effectively breaking the script.
    – Janis
    Commented Feb 4, 2018 at 8:49
  • @Janis: Here is a Demo: marcox.square7.ch/testfancy.html I cannot provide an codepen demo, because I have to rload the fancyboy with an ajax request.
    – Marco
    Commented Feb 4, 2018 at 17:18
  • 1
    Did you not notice that you have not disabled touch gestures? You can close it by dragging up/down. So, either initialize fancyBox using selector option (see docs for samples) or execute $('selector').fancybox() again after loading the content (or defaults will be used).
    – Janis
    Commented Feb 5, 2018 at 8:06

1 Answer 1

Reset to default
0

Try disabling touch events using touch: false, because fancyBox catches touch events by default to enable swiping gestures.

1
  • I tried it using: $("[data-fancybox]").fancybox({ touch: false }); but it doesn't help me out. Do you think the touch behavior can make problems here? Aktually I'm testing on a desktop without touch functions.
    – Marco
    Commented Feb 3, 2018 at 10:57

Not the answer you're looking for? Browse other questions tagged or ask your own question.