locked
Beginner's problem with jQueryUI RRS feed

  • Question

  • User625999351 posted

    I'm new to jQueryUI.  I have an app I'm learning  to maintain that has a fairly typical setup of two lists side by side in which you drag items from one to the other.  (There's no real documentation.)

    I'm trying to implement the ability to select multiple items as in the example: http://jqueryui.com/selectable/#default

    I've added pretty much everything I think I need, as close to the example as possible.  (The only real difference is that my lists use <ul> rather than <ol>.)

    I can see the click action when I click on individual items but it doesn't stick and I can't select multiple items.

    Suggestions?

    Friday, August 26, 2016 7:43 PM

Answers

  • User625999351 posted

    Actually I just got it to work a few minutes ago. 

    I admit to still being a bit confused about this whole disableSelection thing since I was able to get your code to work with both jquery1.8.2/jquery-ui 1.9 and jquery-1.12.4/jquery-ui-1.12. 

    I had a bit more trouble getting it to work in my actual program due to the multiple screens and references I had to wade through but it's finally working too. 

    I should mention that our program is actually using jquery 1.8.2 and jquery-ui 1.9.0.  Why I don't know, but now we have to think about upgrading that as well.

    Thanks!

    (Incidentally that link in your last post is broken.)

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, September 2, 2016 2:31 PM

All replies

  • User2117486576 posted

    Probably need to see the relevant portions of your code.

    Friday, August 26, 2016 9:25 PM
  • User-1142886626 posted

    Hi bchernick,

    I can see the click action when I click on individual items but it doesn't stick and I can't select multiple items.

    It seems you have two lists side by side and you want drag items from one to the other.

    You could use the jquery.multisortable, extension of jQuery UI Sortable, which works with multiple selected elements. You could use ctrl+click choose multiple elements.

    Code below is for your reference:

    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
      <link rel="stylesheet" href="/resources/demos/style.css">
      <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
      <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
        <style>
       #sortable1, #sortable2 {
        border: 1px solid #eee;
        width: 142px;
        min-height: 20px;
        list-style-type: none;
        margin: 0;
        padding: 5px 0 0 0;
        float: left;
        margin-right: 10px;
      }
      #sortable1 li, #sortable2 li {
        margin: 0 5px 5px 5px;
        padding: 5px;
        font-size: 1.2em;
        width: 120px;
      }
    li { margin: 2px 0; cursor: pointer; }
    li.selected { outline: 1px solid red; }
    li.child { margin-left: 20px; }
      </style>
      <script type="text/javascript">
          $(function () {
              $("#sortable1").sortable({
                  cancel: ".disable-sort"
              });
              $("#sortable2").sortable({
                  cancel: ".disable-sort"
              });
          $('ul.sortable').multisortable();
          $('ul#sortable1').sortable('option', 'connectWith', 'ul#sortable2');
          $('ul#sortable2').sortable('option', 'connectWith', 'ul#sortable1');
      });
      </script>
    <body>
        <div>
     <ul id="sortable1" class="sortable">
      <li class="ui-state-default">Item 1</li>
      <li class="ui-state-default">Item 2</li>
      <li class="ui-state-default">Item 3</li>
      <li class="ui-state-default">Item 4</li>
      <li class="ui-state-default">Item 5</li>
    </ul>
    <ul id="sortable2" class="sortable"">
      <li class="ui-state-highlight">Item 1</li>
      <li class="ui-state-highlight">Item 2</li>
      <li class="ui-state-highlight">Item 3</li>
      <li class="ui-state-highlight">Item 4</li>
      <li class="ui-state-highlight">Item 5</li>
    </ul>
        </div>
    </body>
    

    Best Regards,

    Ailleen

    Sunday, August 28, 2016 12:04 PM
  • User625999351 posted

    That's the problem.  I'm not sure what sort of code you need to see or even where that code is. 

    As I said, I tried to duplicate the functionality of that page I referenced.

    Here's the modified area of my cshtml.

     <div class="col-md-4 month left">
            <div class="text-center">
                <h4>Available Fields</h4>
            </div>
            <style>  
                #test .ui-selecting { background: #FECA40; }
                #test .ui-selected { background: #F39814; color: white; }
                #test { list-style-type: none; margin: 0; padding: 0; width: 60%; }
                #test li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: auto; }
            </style>
    
            <script >
                $(function () {
                    $("#test").selectable();
                });
            </script>
            <ul id="test" class="raw-data-container">
                @foreach (var item in Model.AvailableFields)
                {
                                <li data-key="@item" class="ui-widget-content">
                                    <i class="glyphicon glyphicon-list"></i> @item
                                </li>
                }
            </ul>
        </div>

    (When I look at the Console in Chrome's tools, it's apparent that I'm leaving something out.  I'm getting an error: 247 Uncaught TypeError: $(...).selectable is not a function.)

    PPS:  I'm missing the obvious.  I'm trying to modify an app that is using jquery-u1 1.9 using an example that is using 1.12.  Of course it doesn't work.  

    Sorry for the excessively quick append.  That's not it either.  I was able to construct a test html page that used 1.9 and it worked. 

    I found the problem.  I was operating under the assumption that I was already dealing with jQueryUI.  This apparently was not the case.  When I added a reference to the existing jQuery-Ui, Selectable worked.  Of course this is only one problem...

    Tuesday, August 30, 2016 2:05 PM
  • User625999351 posted

    Actually I've just investigated multisortable and in theory it's exactly what I need.

    However it has one flaw.  It calls a jQueryUI function that apparently has been removed: disableSelection and it hasn't been updated in 3 years.   (Crashes)

    Still investigating.  If there's any way I can use this I will.  Thanks.

    (I may have spoken too soon, since your example works.  Not sure why it's failing with jquery 1.9.)

    Thursday, September 1, 2016 8:06 PM
  • User-1142886626 posted

    Hi bchernick,

    It calls a jQueryUI function that apparently has been removed: disableSelection and it hasn't been updated in 3 years.   (Crashes)

    The method is not used.

    You can refer the following link.

    http://api.jqueryui.com/disableselection/#disableSelection

    Best Regards,

    Ailleen

    Friday, September 2, 2016 9:21 AM
  • User625999351 posted

    Actually I just got it to work a few minutes ago. 

    I admit to still being a bit confused about this whole disableSelection thing since I was able to get your code to work with both jquery1.8.2/jquery-ui 1.9 and jquery-1.12.4/jquery-ui-1.12. 

    I had a bit more trouble getting it to work in my actual program due to the multiple screens and references I had to wade through but it's finally working too. 

    I should mention that our program is actually using jquery 1.8.2 and jquery-ui 1.9.0.  Why I don't know, but now we have to think about upgrading that as well.

    Thanks!

    (Incidentally that link in your last post is broken.)

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, September 2, 2016 2:31 PM