Cant get selected item on mobile

[alexferreira21Participant]

I have a combobox that executes code after a item getting selected. It works fine on pc, but on Ipad nothing happens when I select a item.

On pc I use the “renderSelectedItem” method, but on ipad this method is never called.

So I changed my approach and used the ‘change’ event instead, but still nothing. But now I could see that in pc the ‘change’ event is different that the same event triggered on mobile. The console.log(event) of the change event on ipad outputed me this:

Object
altKey: undefined
bubbles: true
cancelable: false
ctrlKey: undefined
currentTarget: HTMLDivElement
data: undefined
delegateTarget: HTMLDivElement
eventPhase: 3
handleObj: Object
isDefaultPrevented: function ba() {return!1;}
jQuery1113031307529052719474: true
metaKey: false
originalEvent: Event
relatedTarget: undefined
shiftKey: undefined
target: HTMLInputElement
timeStamp: 1460501713210
type: "change"
view: undefined
which: undefined
__proto__: —

And on pc, where it works fine, printed this:

Object
args: Object
currentTarget: HTMLDivElement
data: undefined
delegateTarget: HTMLDivElement
handleObj: Object
isTrigger: 3
jQuery111306463364869284765: true
namespace: ""
namespace_re: null
owner: Object
result: undefined
target: HTMLDivElement
timeStamp: 1460501763427
type: "change"
__proto__: —

As I can assume, on ipad, the ‘change’ event is not the same type as in pc. On ipad it has no ‘args’ attribute.
I also tried the methods jqxComboBox(‘selectedIndex’) and jqxComboBox(‘listBox’).selectedIndex both work on pc but on the ipad they return ‘-1’

How I can use the selected item of the combobox on Mobile?

(English is not my first language, so sorry for the grammar, I hope you guys can understand my problem)

Thanks!

[Peter StoevKeymaster]

Hi alexferreira21,

“change” event is raised by jqxComboBox when selection is changed. If selection is changed, the event will be raised and this does not depend on the device. Could you share a jsfiddle.net demo which shows how you use the widget.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[alexferreira21Participant]

Hi,

a jsfiddle could not represent the exact use because I am using remoteAutoComplete, so I will paste here my real code:

The instantiation:

$buscaGlobal.jqxComboBox({
                height: '25px',
                theme: 'menuPrincipalAxis',
                source: dataAdapter,
                remoteAutoComplete: true,
                remoteAutoCompleteDelay: 700,
                searchMode: 'containsignorecase',
                showArrow: false,
                minLength: 3,
                renderer: renderItem,
                renderSelectedItem: renderSelectedItemFromDataAdapter,
                dropDownHeight: 550,
                dropDownWidth: 600,
                popupZIndex: 100,
                placeHolder: traducao["buscaGlobal.placeHolder.defaultSearch"],
                search: function (searchString) {
                    executarBusca();
                }
            });

The renderSelectedItem method:

var renderSelectedItemFromDataAdapter = function(index){
            var item = dataAdapter.records[index];
            if (item != null) {
                if(item.selecionavel){
                    exibirBotoes("selecao", item.codigoGrupo);
                    return item.label;
                }else if(item.cssClass == 'maisResultados'){
                    $buscaGlobal.data('tiposAtivosExpandidos').push(item.codigoGrupo);
                    executarBusca();
                    exibirBotoes("busca");
                    return $buscaGlobal.jqxComboBox('searchString');
                }else{
                    exibirBotoes("busca");
                    return $buscaGlobal.jqxComboBox('searchString');
                }
            }
            return "";
        };

My dataAdapter:

var dataAdapter = new $.jqx.dataAdapter(source,
            {
                loadError: function(jqXHR, status, error){
                    $botaoBuscar.removeClass('executandoBusca');
                    if(jqXHR.responseText != 'mensagemInvalida'){
                        $buscaGlobal.jqxComboBox('disabled',false);
                        self.buscasAtivas--;
                    }
                },
                beforeLoadComplete: function (records, originalData) {
                    var returnList = [];
                    self.selecaoCorrente = originalData;

                    // usado para adicionar algumas propriedades ao registro do adapter
                    var ativoExtender = {
                        cssClass:"ativoBuscaGlobal"
                        ,selecionavel:true
                    };

                    for(var indiceBusca = 0 ; indiceBusca < self.filtroBuscaSelecionado.categorias.length ; indiceBusca++){
                        var tipoAtivo = self.filtroBuscaSelecionado.categorias[indiceBusca];

                        returnList.push(new this.Record(tipoAtivo.descricao, undefined, undefined, tipoAtivo.codigo, "categoriaBuscaGlobal",false ));

                        var ativosEncontrados = records.filter(function(item){return item.codigoGrupo == tipoAtivo.codigo});
                        var indexTipoAtivo = $buscaGlobal.data('tiposAtivosExpandidos').indexOf(tipoAtivo.codigo);
                        if(ativosEncontrados.length > 0){
                            if(ativosEncontrados.length > 5 && indexTipoAtivo < 0){
                                for(var k = 0 ; k < 5 ; k++){
                                    var ativo = ativosEncontrados.shift();
                                    returnList.push($.extend(ativo,ativoExtender));
                                }
                                returnList.push(new this.Record(traducao["buscaGlobal.maisResultados"] + " (" + ativosEncontrados.length + ")", undefined, undefined, tipoAtivo.codigo , "maisResultados",false));
                            }else{
                                if(indexTipoAtivo >= 0){
                                    $buscaGlobal.data('tiposAtivosExpandidos').splice( indexTipoAtivo, 1 );
                                }
                                returnList.pushAll(
                                    ativosEncontrados.map(function(ativo){
                                        ativo.cssClass = "ativoBuscaGlobal";
                                        ativo.selecionavel = true;
                                        return ativo;
                                    })
                                );
                            }

                        }else{
                            returnList.push(new this.Record(traducao["buscaGlobal.naoLocalizado"], undefined, undefined, -1 , "naoLocalizado",false ));
                        }
                    }
                    $botaoBuscar.removeClass('executandoBusca');
                    if(!$buscaGlobal.jqxComboBox('isOpened')){
                        setTimeout(function(){$buscaGlobal.jqxComboBox('open')}, 0);
                    }
                    $buscaGlobal.jqxComboBox('disabled',false);
                    self.buscasAtivas--;
                    $buscaGlobal.jqxComboBox('focus');
                    if(self.buscasAtivas > 0){
                        return [];
                    }
                    return returnList;
                },
                Record: function(label, informacaoAdicional, eapc, codigoGrupo, cssClass, selecionavel, nivel){
                    this.label = label;
                    this.informacaoAdicional = informacaoAdicional;
                    this.codigoGrupo = codigoGrupo;
                    this.cssClass = cssClass;
                    this.selecionavel = selecionavel;
                    this.nivel = nivel;
                    this.eapc = eapc;
                },
                isCNPJ: function(searchString){
                    var mascaraCNPJ = /^\d{2}.\d{3}.\d{3}\/\d{4}-\d{2}$/;
                    return searchString.match(mascaraCNPJ) != null;
                },
                isCodigoSUSEP: function(searchString){
                    var mascaraSUSEP15 = /^\d{2}.\d{6}\/\d{2}-\d{2}$/;
                    var mascaraSUSEP18 = /^\d{5}.\d{6}\/\d{2}-\d{2}$/;
                    var mascaraSUSEP20 = /^\d{5}.\d{6}\/\d{4}-\d{2}$/;

                    return searchString.match(mascaraSUSEP15) !== null
                        || searchString.match(mascaraSUSEP18) !== null
                        || searchString.match(mascaraSUSEP20) !== null;
                }
            }
        );

I dont use the ‘change’ event, actually I dont use any event. All my logic is in the renderSelectedItem method, but it is never called in mobile, so I tried the change event, but, as I posted, it not worked.

The logs that I post before were captured using weinre, so they came directly from the ipad’s Safari. And it happens on two diffent Ipads on IOS7 and IOS9.

The version of jQWidgets I am using is 3.9.0.

I did not post the whole code, because it is relativelly long, but if you need anything else I can post.

Thanks!

[alexferreira21Participant]

After some tests, I could see that the “change” event logged on mobile is not the jqxCombobox’s change event, is a standard html input change event. I tried the “select” event, but it is triggered only on pc.

On ipad the selection of a item on combobox is not working, and I have no idea why.

[Author]

Posts