How to get the innerHTML of selectable jquery element?

Question

I have a php generated list whose list items are selectable using jquery selectable widget. The list for all intents and purposes is:

<ul id="#select-image">
    <li class="ui-widget-content">Item 1</li>
    <li class="ui-widget-content">Item 2</li>
    <li class="ui-widget-content">Item 3</li>
    <li class="ui-widget-content">Item 4</li>
    <li class="ui-widget-content">Item 5</li>
    <li class="ui-widget-content">Item 6</li>
    <li class="ui-widget-content">Item 7</li>
</ul>

And the jQuery selectable is declared as:

<script>
    $(function() {
        $("#select-image").selectable({
            selected: function( event, ui ) { 
                var $variable = $('.ui-selected').innerHTML; 
                console.log($variable);
            }
        });
    });
</script>

An event takes place after a list item has been selected, in the example it outputs to the browser console. The output however is "undefined." The selector $('.ui-selected'). is correct as it shows as an object in the browser's console. Where am I going wrong?

I think innerHTML() only works for document elements, not jQuery objects. Use .html() instead — Kiro Coneski, Sep 13 '13 at 12:15
`
` would not be matched by `$("#select-image")`, you need to make it `
` for the selector to match it. I'm not sure if this is the case in your actual HTML or just a typo in the sample above. — Rogier Pennink, Sep 13 '13 at 12:16
– Kiro Coneski is has found the problem and the solution. I suggest he posts it as an answer so I can give it a green tick. — , Sep 13 '13 at 12:26

score 92 · Accepted Answer · answered Sep 13 '13 at 12:16

92

Try

.text() or .html() instead of .innerHTML

answered Sep 13 '13 at 12:16

Tushar Gupta - curioustushar

58,085
24
103
107

1

html() worked for me. – bandito40 Jan 02 '23 at 13:50

score 9 · Answer 2 · edited Nov 12 '15 at 05:45

9

Use .val() instead of .innerHTML for getting value of selected option

Use .text() for getting text of selected option

Thanks for correcting :)

edited Nov 12 '15 at 05:45

Anik Islam Abhi

25,137
8
58
80

answered Sep 13 '13 at 12:14

Ganesh Pandhere

1,612
8
11

score 5 · Answer 3 · answered Sep 13 '13 at 12:26

$(function() {
        $("#select-image").selectable({
            selected: function( event, ui ) { 
                var $variable = $('.ui-selected').html(); 
                console.log($variable);
            }
        });
    });

or

$(function() {
        $("#select-image").selectable({
            selected: function( event, ui ) { 
                var $variable = $('.ui-selected').text(); 
                console.log($variable);
            }
        });
    });

or

$(function() {
        $("#select-image").selectable({
            selected: function( event, ui ) { 
                var $variable = $('.ui-selected').val(); 
                console.log($variable);
            }
        });
    });

score 0 · Answer 4 · answered Sep 13 '13 at 12:17

The parameter ui has a property called selected which is a reference to the selected dom element, you can call innerHTML on that element.

Your code $('.ui-selected').innerHTML tries to return the innerHTML property of a jQuery wrapper element for a dom element with class ui-selected

$(function () {
    $("#select-image").selectable({
        selected: function (event, ui) {
            var $variable = ui.selected.innerHTML; // or $(ui.selected).html()
            console.log($variable);
        }
    });
});

Demo: Fiddle

How to get the innerHTML of selectable jquery element?

4 Answers4

Linked