[alexferreira21Participant]

Hi Dimitar,

Thank you for your answer. I even tried to search this problem in this forum, but I did not found that topic.

[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.

[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]

Ok. Thank you very much!

[alexferreira21Participant]

Thank you very much Peter! This solved my problem perfectly!

[alexferreira21Participant]

Hi Dimitar,

Here:

http://jsfiddle.net/7ytUr/2/

In this example you can see that the last item of the list can’t be clicked 100% of the times. If you open in google chrome, and inspec the list with the Developer Tools, you will see that the item with the id “listitem4jqxListBox” (the hidden last element) very often is rendered over the item “listitem3jqxListBox” (Caffé Latte). When this happens I can’t click in the link of the last element of my list. You can see that the mouse pointer don’t even change.

This behaviour seems to be random. In most cases, when you scroll to the bottom of the list, the item “listitem4jqxListBox” overlaps the “listitem3jqxListBox”, but sometimes it doesn’t. If it doesn’t happen, scroll up and down, I assure you that this behaviour will happen.

[Author]

Posts