CODEWITHSUNDEEP
jqueryjquery-ui-selectable
DSG
DSG

Reputation: 11

jQuery ui selectable not working

<ol>
    <li>tafe</li>
    <li>college</li>
    <li>uni</li>
    <li>school</li>
</ol>

<script>
    $("ol").selectable();
</script>

I am able to make a box around the elements but I am not able to select the elements either individually or in a group.

Upvotes: 0

Views: 3612

Answers (3)

Ravi Kumar Yadav
Ravi Kumar Yadav

Reputation: 339

I think the problem is with css. I had the same problem. I just included ui-selected{background:gold;} and it worked. Don't forget to include these all:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

If your code is still not working see the exact problem using inspect element

Upvotes: 1

renakre
renakre

Reputation: 8291

It worked for me, after I included the related libraries in the html:

 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
 <script src="//code.jquery.com/jquery-1.10.2.js"></script>
 <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

Here is a demo: https://jsfiddle.net/6cht0v0L/

The jquery code:

 $(function() {
      $( "#selectable-1" ).selectable();
 });

Here is the html:

 <ol id="selectable-1">
     <li class="ui-widget-content">Product 1</li>
     <li class="ui-widget-content">Product 2</li>
     <li class="ui-widget-content">Product 3</li>
     <li class="ui-widget-content">Product 4</li>
     <li class="ui-widget-content">Product 5</li>
     <li class="ui-widget-content">Product 6</li>
     <li class="ui-widget-content">Product 7</li>
  </ol>

Upvotes: 1

James Grundner
James Grundner

Reputation: 1484

You need to wrap the call in the jQuery onload function 

<script>
$(function() {
    $( "ol" ).selectable();
});
</script>

Doc: https://jqueryui.com/selectable/

Upvotes: 0

Related Questions