Member Avatar for kevindougans

Can anyone help me with jquery ui selectable please?

My html is:

<input style="" id="input_4" name="input_4" value="" />
                        <ol id="selectable">
                            <li class="ui-widget-content">Reservations </li>
                            <li class="ui-widget-content">Information and Enquiries</li>
                            <li class="ui-widget-content">Mambo Tours &amp; Events</li>
                            <li class="ui-widget-content">Press, Marketing &amp; PR</li>
                            <li class="ui-widget-content">Business Development &amp; Franchise</li>
                            <li class="ui-widget-content">Mambo TV &amp; Livestreaming</li>
                            <li class="ui-widget-content">Mambo Studio</li>
                            <li class="ui-widget-content">VIP Services</li>
                            <li class="ui-widget-content">Merchandise</li>
                            <li class="ui-widget-content">Wedding Planning</li>
                            <li class="ui-widget-content">Club Tickets</li>
                        </ol>​

and my jquery is:

$(function() {
    $("#selectable").selectable(selected: function(event, ui) { 
            var text = $(this).text();
            $("#input_4").val(text); 
      });

});​

I want whatever is selected to update the input text field which I want to hide and store the value in.

Anyone please? It's driving me insane with the lack of documentation on jquery ui selectable.

Cheers,

Kevin


http://jsfiddle.net/kevindougans/J7BQx/2/

  • 3 Contributors
  • 5 Replies
  • 523 Views
  • 5 Months Discussion Span
  • Latest Post Latest Post by abtraju

Dani AI

Generated

Quick, practical follow‑up (builds on ’ fix) that handles single or multiple selections and dynamic (AJAX) lists.

As pointed out, initialize the widget with an options object — the selectable callbacks/events give you the element that was selected (the API provides the selected/ui objects). For a single selection you can read the element from the event and put its text into the hidden input: use the widget event (or bind the selectableselected event) and read ui.selected. (api.jqueryui.com)

Example — capture the clicked/selected item (uses the event's ui.selected element):

$('#selectable').on('selectableselected', function(e, ui){
  var txt = $(ui.selected).text().trim();
  $('#input_4').val(txt);
});

If you want to support multi‑select and store all selected labels when the operation finishes, use the stop callback and collect the current selected items (this example uses a native DOM query to avoid re-querying the whole page):

$('#selectable').selectable({
  stop: function(){
    var vals = Array.prototype.map.call(
      this.querySelectorAll('.ui-selectee.ui-selected'),
      function(el){ return el.textContent.trim(); }
    ).join(', ');
    $('#input_4').val(vals);
  }
});

The stop callback fires at the end of the select operation and is ideal for building a final value. (api.jqueryui.com)

For AJAX‑added items (question from ): if you append new <li>s after initialization, call the widget's refresh() method (or reinitialize if you destroyed it). By default autoRefresh is true (it recalculates at the start of a select), but for large lists you can set autoRefresh: false and call .selectable('refresh') yourself for better performance. (api.jqueryui.com)

Quick troubleshooting pointers: include the jQuery UI CSS (selectable needs its CSS), check cancel (default prevents starting a selection on form inputs), and if things behave oddly try $('#selectable').selectable('destroy') then re-init. (api.jqueryui.com)

Recommended Answers

All 5 Replies

Member Avatar for pritaeas

You forgot {} around your options, and this points to selectable, not the selected item.

$(function() {
    $("#selectable").selectable({selected: function(event, ui) { 
            var text = $('.ui-selected').text();
            $("#input_4").val(text); 
    }});
});
Edited by pritaeas because: n/a
commented: very fast and fixed my dodgy code +3
Member Avatar for kevindougans

Thanks for replying but sorry I don't understand where I forgot to put them?

Member Avatar for pritaeas

See my snippet, I was editing while you replied ;)

Member Avatar for kevindougans

Mate... you just saved me about 5,000 strands of hair!!!!!!! Thank you ever so much!!!!!

Member Avatar for abtraju

is any possible to add jQuery ui selectable for content loaded via AJAx i.e after page load content added automatically like twitter tweet. i tried but it works only page initial page loaded content.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.