0

EDIT : @Mike 'Pomax' Kamermans, sorry about the link shortners, you're absolutely right!

I have added a datepicker to a form on my website but it is only working when i browse directly to the page, for example if you open the first link directly (Reservation Page) the datepicker should work properly (that means that there is no errors in the code i just added).

But if you browse to the index page first (Link 2) and THEN click on Reservation, the page is loaded using page.js librairie and it seems my code isn't executed !

Here is the relevant part of the code placed just before the closing body tag on my reservation.html page :

<script src="./plugin/components/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
<script src="./plugin/components/bootstrap-datepicker/locales/bootstrap-datepicker.fr.min.js"></script> 
<script src="./plugin/components/moment/moment.min.js"></script>
<script src="./plugin/components/TouchSwipe/jquery.touchSwipe.min.js"></script> 
<script src="./plugin/datepicker-in-fullscreen.js"></script>

<script>
    $('#date').datepickerInFullscreen({
        fakeInput           : false,
        format              : 'DD/MM/YYYY',
        effect              :   '16',
        template        :   ' <div class="datepicker-in-fullscreen-modal dpifs-inverted-colors"> ' +
                                ' <div class="datepicker-in-fullscreen-content"> ' +
                                    ' <div class="datepicker-in-fullscreen"></div> ' +
                                    ' <div class="datepicker-in-fullscreen-controls"> ' +
                                        ' <a class="dpifs-today">{{today}}</a><a class="dpifs-clear">{{clear}}</a><a class="dpifs-close">{{close}}</a> ' +
                                    ' </div> ' +
                                ' </div> ' +   
                            ' </div> '+
                            ' <div class="datepicker-in-fullscreen-background dpifs-inverted-colors"></div> ',
        datepicker             : { 
            daysOfWeekDisabled: [0],
            language : 'fr'
        }
    });
</script>
<script>

var cleave = new Cleave('#phone', { phone: true, phoneRegionCode: 'fr' });

</script>

Reservation page

Index page

Javascript main code

Only solution for now is to refresh the page to have the datepicker working..

Why is my JS not executed ? And what is the proper way to add custom js file in this case ?

Thanks a lot for all of you who read all of topic!

Julien Leper
  • 11
  • 1
  • 2
    Don't use link shorteners: no one can tell whether they'll go to where you claim they will. But far more importantly: where are your details? You made sure your code has breakpoints or console logs to show how far it gets into loading, you opened your dev tools, and... then what? What do you see your code do? And of course, based on that, what have you done to try to get it to load further? – Mike 'Pomax' Kamermans Nov 10 '20 at 19:16
  • It would be easier for us to help if you share your HTML and JS code for the reservation page. – Link Nov 10 '20 at 19:17
  • Page.js is probably not executing scripts when it asynchronously loads new content. There might be some events in Page.js you can attach to, so your datePicker initialization code is executed after a new page has been loaded. Or, you could try wrapping your datePicker initialization code in a DOM-ready event, $(function() { ... code here .... }); to see if that makes any difference. – HaukurHaf Nov 10 '20 at 19:23

0 Answers0