CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-selectable
InsI
InsI

Reputation: 177

jquery ui selectable - preventing user from selecting an item

I have below html layout. When i enters a, b or c in to the text box (#txtprevent). i need to stop the user from selecting the specific item which has the data-attribute value. e.g.: if i enter b. i should not be allowed to select b. The problem have is event.preventDefault(); is not stopping the selection action. If this the expected functionality.

If there a different workaround for this?

Below is my Html

<input id="txtprevent" type="text">
<table id="mySelectable" class="ui-selectable">
    <tbody><tr id="1" data-myapp="a" class="ui-selectee">
        <td>Row 2</td>
    </tr>
    <tr id="2" data-myapp="b" class="ui-selectee">
        <td>Row 3</td>
    </tr>
    <tr id="3" data-myapp="c" class="ui-selectee">
        <td>Row 1</td>
    </tr>
</tbody></table>

My js

    $(function () {
      $('#mySelectable').selectable({
          filter: "tr",
          selecting: function (event, ui) {
              var item = $(ui.selecting);
              var itemVal = item.prop('data-myApp');
              if(itemVal == $('#txtprevent').val()){
                  //does not stop the selection process
                  event.preventDefault();
              }
           }
       });
    });

Upvotes: 0

Views: 523

Answers (2)

InsI
InsI

Reputation: 177

I found a workaround for this, instead of using the 'selecting' event i use the 'selected' event and remove the 'ui-selected' class of the selected item. Below is the implementation

$(function () {
      $('#mySelectable').selectable({
          filter: "tr",
          selected: function (event, ui) {
              var item = $(ui.selected);
              var itemVal = item.prop('data-myApp');
              if(itemVal == $('#txtprevent').val()){
                    //Can give any msg if required.
                    //Remove the selected class
                    item.removeClass('ui-selected');
              }
           }
       });
    });

Upvotes: 0

user3677895
user3677895

Reputation: 21

simply return false

if(itemVal == $('#txtprevent').val()){
   //does not stop the selection process
   return false;
}

Upvotes: 1

Related Questions