jQuery UI selectable widget

Question

My setup: jQuery 1.6.2, jQuery UI 1.8.15

I got the selectable interaction to work but unfortunately anchors in the element itself are not active. Here's a snippet of the code I'm working with

<ul id="selectable">
  <li>John Doe
      <br/>(111) 222-3333
      <br/><a href="mailto:[email protected]">[email protected]</a>
      <br/>
        <a href="/comments?user=15">3 comments</a>
        <br/>
      <br/>
      <a href="/users/15/edit">Edit</a>    
      <a href="/users/15" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Delete</a>
    <hr/>
  </li>
  <li>Jane Smith
      <br/>(222) 333-4444
      <br/><a href="mailto:[email protected]">[email protected]</a>
      <br/>
        <a href="/comments?user=17">1 comment</a>
        <br/>
      <br/>
      <a href="/users/17/edit">Edit</a>
      <a href="/users/17" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Delete</a>
    <hr/>
  </li>
</ul>

As @fehays indicated, I want the anchors to simply behave like anchors inside of the selectable li. I figure I should be able to do that in this block of code but I don't know exactly what

<script>
$(function() {
    $( "#selectable" ).selectable({
      selected: function(ev, ui) {
      //insert code here?
    }
    });
});
</script>

fehays · Accepted Answer · 2011-08-18 22:36:37Z

1

You could add a click event to your anchor tags that uses javascript to open the right page.

http://jsfiddle.net/fehays/UUEwd/

<ul id="selectable">
  <li>John Doe
      <br/>(111) 222-3333
      <br/><a href="mailto:[email protected]">[email protected]</a>
      <br/>
      <a href="/comments?user=15">3 comments</a>
        <br/>
      <br/>
      <a href="/users/15/edit">Edit</a>

      <a href="/users/15" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Delete</a>
    <hr/>
  </li>

</ul>

js:

$(function(){

    $('#selectable').selectable({
        selected: function(ev, ui) {
         //maybe do something
        }
    });

    $('#selectable li a').click(function(){     
         var url = $(this).attr('href');

         if ($(this).data('confirm')) {
            var answer = confirm($(this).data('confirm'));
            var method = $(this).data('method');
            if (method && answer) {
                // execute method?
                // do redirect?
                window.location = url; 
            }
         } else {
            window.location = url;             
         }
    });

});

edited Aug 18, 2011 at 22:36

answered Aug 18, 2011 at 21:27

fehays

3,1671 gold badge26 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Bob Over a year ago

Hmm, it worked in your example but it didn't in mind, I noticed that you didn't add any selectable CSS, could that be why?

fehays Over a year ago

I added css to the jsfiddle and it still appears to work. mb something else in your code is causing it?

Bob Over a year ago

My bad, I must have copied something wrong, it works perfectly now, thanks you are a rock star!

Bob Over a year ago

One other issue, the delete with with JS confirmation no longer works properly, it doesn't show the confirmation dialog box, if you have any thoughts, I would appreciate it. Thanks.

fehays Over a year ago

I updated the example with some untested code. I'm not exactly sure how your data-method works. But i think you can get the idea. Basically just check for those data elements and do some things based on what you find.

|

Jason Kaczmarsky · Accepted Answer · 2011-08-18 21:13:46Z

0

Well selectable can only select li's, and you only have one so it won't work the way you structured your HTML. If you put each element in it's own li, then you can individually select each one. I added CSS just so you can tell whats going on: http://jsfiddle.net/sEkPP/

answered Aug 18, 2011 at 21:13

Jason Kaczmarsky

1,6861 gold badge18 silver badges30 bronze badges

4 Comments

fehays Over a year ago

You can select elements other than 'li' by using the filter option.

Bob Over a year ago

Actually a single element works as well, I can see it selected so that's not the issue, let me take a look at your CSS. I am going to update my example so it's more clear the level of selectable.

fehays Over a year ago

@Jason, I think what the OP wants is for the anchors to simply behave like anchors inside of the selectable li.

Bob Over a year ago

yes @fehays, that's exactly what I want. Yes, I have tried the filter option as well. I tried wrapping say the name, e.g, "John Doe" in a span and filter on span which works but anchors still don't act like anchors.

Collectives™ on Stack Overflow

jQuery UI selectable widget

2 Answers 2

7 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related