jqxComboBox determine item clicked

[edwardsmarkfParticipant]

hello –

this jqxComboBox with multi-select is perfect for my app.

https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxcombobox/index.htm?(arctic)#demos/jqxcombobox/multiselect.htm

using your example, is there any way the user can click on “Germany” and trigger an event? of course they can delete and create Germany again, but i was hoping for some way to just click Germany and trigger an event.

thank you!

[edwardsmarkfParticipant]

here is a horrible solution:

$(document).click(function(event) {

        if      (       ( event.target.tagName === 'SPAN'               )
                &&      ( 'classList' in event.toElement                )
                &&      ( typeof event.toElement.classList === 'object' )
                )
        {
                if      (       (       event.toElement.classList.contains('jqx-listitem-state-normal')         )
                        &&      (       event.toElement.classList.contains('jqx-listitem-state-disabled')       )
                        &&      (       event.toElement.classList.contains('jqx-fill-state-disabled')           )
                        &&      (       event.toElement.classList.contains('jqx-rc-all')                        )
                        )
                {
                        var text = $(event.target).text();      // event.toElement.innerText
                        console.log('result: ' , text);
                }
        }
});

this is getting close, but only if you click on the grayed-out drop-down item. and i cant figure out how to determine which listItem i am actually in, except by looking at the data.

[edwardsmarkfParticipant]

https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxcombobox/index.htm?(arctic)#demos/jqxcombobox/multiselect.htm

i am trying to figure out how to get the name of the combo box back; in this specific example i want to return ‘jqxComboBox’

[edwardsmarkfParticipant]

getting there:

$('#jqxComboBox').on('close', function (event) {

    jQuery('div#jqxSoundsComboBox').find('a').each(  (index, element) => {  
             var dataValue = jQuery(element).data('value') ; 
             var functionCall = 'javascript:myFunctionName'
                              + '('   // opening parenthesis
                              + "'"   // opening single quote
                              +  + dataValue.replace(/'/g, "\\'")   // escape single quotes
                              + "'"   // closing singlequote
                              + ')'   // closing parenthesis
                              + ';'   // closing semicolon
                              ;
             jQuery(element).attr('href', functionCall  ) ; 
    }) 
});

[edwardsmarkfParticipant]

working solution:

        jQuery('#jqxComboBox').on('close', function (event) {
                bindItems();
        });
.
.
.      
function bindItems()       {
        jQuery('div#jqxComboBox').find('a').each(  (index, element) => {
                var dataValue = jQuery(element).data('value') ;
                var functionCall        =       ''
                                        +       'javascript:prepareText'
                                        +       '('   // opening parenthesis
                                        +       "'"   // opening single quote
                                        +       dataValue.replace(/'/g, "\\'")   // escape single quotes
                                        +       "'"   // closing singlequote
                                        +       ')'   // closing parenthesis
                                        +       ';'   // closing semicolon
                                        ;
                jQuery(element)
                        .attr           (       'onClick', functionCall                 )
                        .mouseover      (       () => { mouseOverEnter();       }       )
                        .mouseenter     (       () => { mouseOverEnter();       }       )
                        .mouseout       (       () => { mouseOutLeave();        }       )
                        .mouseleave     (       () => { mouseOutLeave();        }       )
                        ;

        })
}

function mouseOverEnter()       {
        jQuery('div#jqxComboBox').jqxComboBox({ openDelay: 0      , closeDelay: 0  });   // make open happen instantly
        jQuery('div#jqxComboBox').on('open', () => { jQuery('div#jqxComboBox').jqxComboBox('close') } );  // temporarily set a new open binding to close
}

function mouseOutLeave()        {
        jQuery('div#jqxComboBox').jqxComboBox({ openDelay: 350    , closeDelay: 350  });
        jQuery('div#jqxComboBox').off('open');   // remove open binding
}

function prepareText(input)        {
   // whatever you want to do
}

[Author]

Posts