Jquery Question posted in
The official Jquery Api Documentation can be found here.

Bootstrap 5 Bundle and Jquery Spinner issue

I’m facing a problem using Bootstrap 5.3.3 (BS5) bundle with JQuery spinner (for inputs with quantity spinner) – it all works fine however the up and down arrows don’t display on the spinner – the space that would have the arrows are clickable, but just display correctly)
If I use the non bundle BS5 version it does, however, other BS5 functionality then doesn’t work (such as the built in BS5 carousels).

Is there a trick to using these two successfully or working around the problem?

I’m assuming there is some kind of conflict going on, I don’t want to lose BS5 built-in functionality, but also need the quantity spinner to work.

I’ve tried noconflict(), but this appears to require me to modify all my JS calls that use $ for JQuery – and I’m not sure that is even the issue: I notice on the output, these arrow spans are not even being created by JQuery.

Here’s my example code with BS5 bundle included:

$(function() {
  var spinner = $("#spinner").spinner();
});
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.14.0/jquery-ui.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.14.0/themes/base/jquery-ui.min.css" integrity="sha512-F8mgNaoH6SSws+tuDTveIu+hx6JkVcuLqTQ/S/KJaHJjGc8eUxIrBawMnasq2FDlfo7FYsD8buQXVwD+0upbcA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<link href="//cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>


<input id="spinner" name="value">
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    So I believe I found an answer that works for my situation.

    The issue is that for whatever reason the correct classes and arrow spans are not added to the a tags when I build my spinners, so I have to add them in myself as well as the style classes.

    My solution: Add BS5 and Jquery/Jquery-UI as normal, then I have a script that builds my spinners for 0 to many spinners on a page. Within this buildspinners method, after the spinners are applied to the inputs add the following:

    $(".input-group.spinner").each(function () {
        $upButton = $(this).find(".ui-spinner-up");
        $downButton = $(this).find(".ui-spinner-down");
        $upButton.append('<span class="ui-button-icon ui-icon ui-icon-triangle-1-n"></span><span class="ui-button-icon-space"> </span>');
        $downButton.append('<span class="ui-button-icon ui-icon ui-icon-triangle-1-s"></span><span class="ui-button-icon-space"> </span>');
        $upButton.addClass("ui-button").addClass("ui-widget").addClass("ui-button-icon-only");
        $downButton.addClass("ui-button").addClass("ui-widget").addClass("ui-button-icon-only");
    });

    This seems to address the issue and my inputs look as I was expecting.


  2. 0

    Here is one way. Let the jQuery UI create the spinner and then load the bootstrap

    $(function() {
  var spinner = $("#spinner").spinner();

  const bslink = document.createElement('link')
  bslink.src = 'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css';
  bslink.rel = 'stylesheet';
  bslink.addEventListener('load', () => document.querySelector('head').appendChild('bslink'));
  const bsscript = document.createElement('script')
  bsscript.src = 'https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js';
  bsscript.addEventListener('load', () => document.querySelector('head').appendChild('bsscript'));


});
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.14.0/jquery-ui.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.14.0/themes/base/jquery-ui.min.css" integrity="sha512-F8mgNaoH6SSws+tuDTveIu+hx6JkVcuLqTQ/S/KJaHJjGc8eUxIrBawMnasq2FDlfo7FYsD8buQXVwD+0upbcA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>


<input id="spinner" name="value">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search