Driving me crazy - navbar taps hangs or requires two taps on iOS phone

[sideqik]

Hi
Almost done with my jQuerymobile app for distributing to AppStore and Gopogle Play.
I have one major flaw in my app though on iPhones. First time app is run navbar responds ok but then becomes unresponsive, or every navbar icon needs two taps in order to work.

My app fetches json from main website and put into listviews, shows details etc. All this works like a charm.
I also uses fastclick.js, jqm.page.params.js, iscroll.js and jquery.mobile.iscrollview.js.

I hope that anyone can help me out here.

Ex. from index.html:

<!-- Events Template -->
<div id="eventsListTemplate" style="display:none">
    <li data-icon="false" class="listItem" data-theme="c">
        <a class="eventUrl" href="" data-url="">
            <div class="eventDate"></div>
            <div class="eventTitle"></div>
        </a>
    </li>            
</div>
<div id="eventsListTemplateDetails" style="display:none">
    <div class="data">  
        <h2 class="eventDetailTitle"></h2>
        <div class="eventDetailDate"></div>
        <div class="eventDetailLocation"></div>
        <div class="eventDetailArranger"></div>
        <div class="eventDetailDescription"></div>
    </div>
</div>
...
<!-- Events -->        
<div data-role="page" id="events" data-add-back-btn="false">
    <div data-role="header" data-position="fixed" id="header" data-theme="b">
        <h1>Events</h1>
        <a href="#createevent" class="ui-btn-left">Opret</a>
        <a href="#home" class="ui-btn-right" data-icon="home" data-iconpos="notext" data-direction="reverse">Forside</a>
    </div>
    <div data-iscroll=""  data-role="content">
        <ul data-role="listview" id="eventsList">
        </ul>
    </div>
    <div data-role="footer" data-position="fixed" data-id="footer">
        <div data-role="navbar" class="nav-custom">
            <ul>
                <li><a href="#news" id="nav-news" data-icon="custom">News</a></li>                        
                <li><a href="#events" id="nav-events" data-icon="custom" class="ui-btn-active">Events</a></li>
                <li><a href="#clubs" id="nav-clubs" data-icon="custom">Clubs</a></li>
                <li><a href="#styles" id="nav-styles" data-icon="custom">Styles</a></li>
                <li><a href="#more" id="nav-about" data-icon="custom">More...</a></li>                          
            </ul>
        </div><!-- /navbar -->
    </div>
</div>

Ex. from application.js:

// Wait for PhoneGap to load
document.addEventListener("deviceready", onDeviceReady, false);

// PhoneGap is ready
function onDeviceReady() {
    navigator.splashscreen.hide();      
}

$(document).on("mobileinit", function() {
    $.mobile.page.prototype.options.backBtnText = "Tilbage";
    $.mobile.loader.prototype.options.text = "Indlæser";
    $.mobile.pageLoadErrorMessage = "Fejl under indlæsning";
    $.mobile.buttonMarkup.hoverDelay = 0;
    $.mobile.defaultPageTransition = "none";
    $.mobile.phonegapNavigationEnabled = true;
    
    //Fastclick
    window.addEventListener('load', function() {
        new FastClick(document.body);
    }, false);      
    
    setupPages();
});

function setupPages(){   
    //Get events
    $('#events').live('pagecreate', function(){
        getEvents();
    });
    
    //Get event details
    $('#eventdetails').live('pagebeforeshow', function(e, data){
        if ($.mobile.pageData && $.mobile.pageData.eventid){
            showEventDetails($.mobile.pageData.eventid);
        }
    });
    
    $(document).bind("pagebeforechange", function( event, data ) {
        $.mobile.pageData = (data && data.options && data.options.pageData)
            ? data.options.pageData
            : null;
    });       
}

function getEvents(){
    $.getJSON(urlEvents,    
        function(data) {
                         
            //$.mobile.loading('show');
            
            var items = data.results;
            var list = $('#eventsList');
             
            list.html("");
             
            $.each(items, function() {
                         
                // create a list item template
                var $listItem = $("#eventsListTemplate").find(".listItem").clone();
                 
                // Set all the values in the template
                $listItem.find(".eventUrl").attr('href', pageEventDetails + '?eventid=' + this.eventid);
                $listItem.find(".eventDate").html(this.eventdate);
                $listItem.find(".eventTitle").html(this.eventtitle);                                
 
                // Add the new list itlem to the list
                list.append($listItem);
           });             
             list.listview('refresh');
            //$.mobile.loading('hide');
        });    
}

function showEventDetails(eventId){
    $.getJSON(urlEventDetails + eventId,    
        function(data) {
                         
            //$.mobile.loading('show');
        
            var items = data.results;
            var details = $('div[data-provider="event"] .iscroll-content');
            
            details.html("");
             
            $.each(items, function() {
                // Create details item template
                var $detailItem = $("#eventsListTemplateDetails").find(".data").clone();
                
                // Set all the values in the template                               
                $detailItem.find(".eventDetailTitle").html(this.eventtitle);
                $detailItem.find(".eventDetailDate").html('<strong>Dato:</strong> ' + this.eventdate);
                $detailItem.find(".eventDetailLocation").html('<strong>Sted:</strong> ' + this.eventaddress + ', ' + this.eventaltaddress + ' - ' + this.eventzip + ' ' + this.eventcity);
                $detailItem.find(".eventDetailArranger").html('<strong>Arrangør:</strong> ' + this.eventarranger);
                $detailItem.find(".eventDetailDescription").html(this.eventdescription);                                
                details.append($detailItem);
           });
            $('div[data-provider="event"]').jqmData('iscrollview').iscroll.scrollTo(0,0,0,false);
            $('div[data-provider="event"]').jqmData('iscrollview').refresh();            
            //$.mobile.loading('hide');
        });
}

[Ivan K. Ivanov]

Hello Jan,

We have difficulties to reproduce the issue you reported. Could you shoot a short video so we can take a look at what's actually happening or just provide us with some more detail instructions.

Is there a chance that your internet connection becomes slow at times and it takes too long to fetch all the required data? If you click and wait long enough, is the data get received at the end? If this is the case, you could introduce some kind of progress bar which indicates that a long running operation is being processed.

Kind regards,

Ivan K. Ivanov
the Telerik team

Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Pluralsight.

[sideqik]

Hi Ivan

Thanks for replying.
As written i've been struggling with this quite some time, but now finally found a solution.
The solution is not in any code but in CSS that was conflicting.

I'm using  "iOS-Inspired jQuery Mobile theme by @taitems". This was making the trouble :-)