
Viewing 3 posts - 1 through 3 (of 3 total)
-
AuthorPosts
-
March 20, 2025 at 2:22 pm #1479798
Hi,
On some pages, we would like to add code in a codeblock. This for a booking system we use.
Code works on other website (with different theme) but not on Enfold. Can you help me out on this?This is the code:
<style> .bootstrap .player-selection-ul li.player-selection-li{ padding: 6px 15px; line-height: 1; } </style> <link href="https://nl.escapeall.com/Content/API/styles.css" rel="stylesheet"> <link href="https://nl.escapeall.com/CustomCss/fun-thrills.css" rel="stylesheet"> <script type="text/javascript"> function updatePlayersOptions(element) { var jThis = ea_jQuery(element); const selectedLanes = parseInt(jThis.find('option:selected').data('quantity')) || 0; const maxPlayers = selectedLanes * 6; jThis.closest(".alert-reservation-added").find('.extra-options-row-2 option').each(function () { const playerCount = parseInt(ea_jQuery(this).val()) || 0; if (playerCount > maxPlayers) { ea_jQuery(this).prop('disabled', true).hide(); } else { ea_jQuery(this).prop('disabled', false).show(); } }); } $(document).ready(function() { $.getScript("https://nl.escapeall.com/Scripts/API/all.js", function (data, textStatus, jqxhr) { GetBookingCalendra('#BookingId', { ServiceId: ['23fa314b-449e-4881-9b8d-3674fa6bdeab'], lang: 'nl', Template: 9, QuantitySelectionAsPlayers: true, FirstWeekDay: 'Monday', InitialQuantity: 1, successReservationSelected: function (reserv) { console.log('hello'); }, success: function () { ea_jQuery('.choose-player-panel h4').text('Aantal banen'); ea_jQuery('.service-time-selection-panel h4').text('Tijd en Prijs'); ea_jQuery('.player-selection-ul li[data-quantity="1"]').html('1<br/><small>1-6 spelers</small>'); ea_jQuery('.player-selection-ul li[data-quantity="2"]').html('2<br/><small>2-12 spelers</small>'); ea_jQuery('.player-selection-ul li[data-quantity="3"]').html('3<br/><small>3-18 spelers</small>'); ea_jQuery('.player-selection-ul li[data-quantity="4"]').html('4<br/><small>4-24 spelers</small>'); ea_jQuery('.service-time-selection-panel h4').text(' Activiteit en tijd'); ea_jQuery(document).on('change', '.multiple-reservation-price', function (e) { updatePlayersOptions(this); }); }, successReservationSelected: function (toBeAppended) { updatePlayersOptions(ea_jQuery(".multiple-reservation-price", toBeAppended)); } }); }); }); </script> <div id="BookingId"></div> <div class="escapeall">Booking System powered by: <a href="https://nl.escapeall.com/">Escape<span>All</span></a></div>
March 20, 2025 at 5:00 pm #1479805Hey Freek,
I see you have the error:Uncaught TypeError: $ is not a function
your top half of the code is javascript, but the second half is jQuery which needs to be wrapped with this:(function($) { //your code here })(jQuery);
like this:
<style> .bootstrap .player-selection-ul li.player-selection-li{ padding: 6px 15px; line-height: 1; } </style> <link href="https://nl.escapeall.com/Content/API/styles.css" rel="stylesheet"> <link href="https://nl.escapeall.com/CustomCss/fun-thrills.css" rel="stylesheet"> <script type="text/javascript"> function updatePlayersOptions(element) { var jThis = ea_jQuery(element); const selectedLanes = parseInt(jThis.find('option:selected').data('quantity')) || 0; const maxPlayers = selectedLanes * 6; jThis.closest(".alert-reservation-added").find('.extra-options-row-2 option').each(function () { const playerCount = parseInt(ea_jQuery(this).val()) || 0; if (playerCount > maxPlayers) { ea_jQuery(this).prop('disabled', true).hide(); } else { ea_jQuery(this).prop('disabled', false).show(); } }); } (function($) { $(document).ready(function() { $.getScript("https://nl.escapeall.com/Scripts/API/all.js", function (data, textStatus, jqxhr) { GetBookingCalendra('#BookingId', { ServiceId: ['23fa314b-449e-4881-9b8d-3674fa6bdeab'], lang: 'nl', Template: 9, QuantitySelectionAsPlayers: true, FirstWeekDay: 'Monday', InitialQuantity: 1, successReservationSelected: function (reserv) { console.log('hello'); }, success: function () { ea_jQuery('.choose-player-panel h4').text('Aantal banen'); ea_jQuery('.service-time-selection-panel h4').text('Tijd en Prijs'); ea_jQuery('.player-selection-ul li[data-quantity="1"]').html('1<br/><small>1-6 spelers</small>'); ea_jQuery('.player-selection-ul li[data-quantity="2"]').html('2<br/><small>2-12 spelers</small>'); ea_jQuery('.player-selection-ul li[data-quantity="3"]').html('3<br/><small>3-18 spelers</small>'); ea_jQuery('.player-selection-ul li[data-quantity="4"]').html('4<br/><small>4-24 spelers</small>'); ea_jQuery('.service-time-selection-panel h4').text(' Activiteit en tijd'); ea_jQuery(document).on('change', '.multiple-reservation-price', function (e) { updatePlayersOptions(this); }); }, successReservationSelected: function (toBeAppended) { updatePlayersOptions(ea_jQuery(".multiple-reservation-price", toBeAppended)); } }); }); }); })(jQuery); </script> <div id="BookingId"></div> <div class="escapeall">Booking System powered by: <a href="https://nl.escapeall.com/">Escape<span>All</span></a></div>
Best regards,
MikeMarch 20, 2025 at 5:41 pm #1479809Hi Mike,
Very much appreciated. Works fine!
THXWesaca – Freek
-
AuthorPosts
Viewing 3 posts - 1 through 3 (of 3 total)
- The topic ‘Add Jquery code does not work’ is closed to new replies.