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

3 posts, 0 answers
  1. sideqik
    sideqik avatar
    4 posts
    Member since:
    Jun 2012

    Posted 19 Feb 2013 Link to this post

    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');
            });
    }
  2. Ivan K. Ivanov
    Admin
    Ivan K. Ivanov avatar
    32 posts

    Posted 20 Feb 2013 Link to this post

    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.
  3. sideqik
    sideqik avatar
    4 posts
    Member since:
    Jun 2012

    Posted 20 Feb 2013 Link to this post

    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 :-)
Back to Top