Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Contributor
Dhivyamanohari
Posts: 11
Registered: ‎02-22-2014
My Device: Z10
My Carrier: Blazedream Technologies

Issue with both Activity Indicator and back button when using BBUI.js

Hi I am new blackberry applicaton development.i have used BBUi.js in my project.

I have designed three screens.

1)Home page for searching places

2)List page for showing results

3)detail page to display details about particular place

 

I have used back button alone in list page,in detail page used back button along with three buttons in action bar.

 

Without using activity indicator in list page,push and pop working fine,but when i use activity indicator its not hiding when i click back button from details page..only on find time search its working properly,clicking on back button its not working.When i hide manually,detail page back button not working,

 

Help me out with solution I am strugging with this issue for past one week :smileysad:

Please use plain text.
Administrator
astanley
Posts: 1,382
Registered: ‎07-02-2009
My Device: BlackBerry Bold 9900
My Carrier: Bell

Re: Issue with both Activity Indicator and back button when using BBUI.js

I would suggest using web inspector to debug your app. It sounds like a runtime error is preventing the 'back' button from receiving your click/touch event. 

 

https://developer.blackberry.com/html5/documentation/beta/debugging_using_web_inspector.html

 

 

Questions:

Follow me on Twitter: @n_adam_stanley
-------------------------------------------------------------------------------------------------------------------------
Your app doesn't work? Use BlackBerry remote web inspector to find out why.
Please use plain text.
Contributor
Dhivyamanohari
Posts: 11
Registered: ‎02-22-2014
My Device: Z10
My Carrier: Blazedream Technologies

Re: Issue with both Activity Indicator and back button when using BBUI.js

[ Edited ]

ya i am using BBUI activity indicator in list.html.used only hide() to hide activity indicator when displaying result,am not using remove() method..also causing prob with push and pop screens


home.html:

<!DOCTYPE html>
<script type="text/javascript" src="js/home.js"></script>
<div style="background: #ffffff;" data-bb-type="screen" data-bb-effect="fade" data-bb-scroll-effect="off">
    <div class="ui-header">
        <div class="home-logo"></div>
            <div class="search">
            <input type="text"  placeholder="Search Places..." id="searchText" onkeypress="displayResult(event);" />
            </div>    
         </div>        
        <ul class="search-list clearfix">
        <li class="icon-1"><a href="#" >Restaurants</a><div class="bottom-line"></div></li>
            <li class="icon-2"><a href="#">Coffee shops</a><div class="bottom-line"></div></li>
            <li class="icon-3"><a href="#">Pubs</a><div class="bottom-line"></div></li>
            <li class="icon-4"><a href="#">Hotels</a><div class="bottom-line"></div></li>
            <li class="icon-5"><a href="#">Hospitals</a><div class="bottom-line"></div></li>
            <li class="icon-6"><a href="#">Shopping Malls</a><div class="bottom-line"></div></li>
            <li class="icon-7"><a href="#">ATMs</a><div class="bottom-line"></div></li>
            <li class="icon-8"><a href="#">Gas Stations</a><div class="bottom-line"></div></li>
            <li class="icon-9"><a href="#">Movie Theatres</a><div class="bottom-line"></div></li>
        </ul>
        <div data-bb-type="action-bar">
            <div data-bb-type="action" data-bb-style="tab" data-bb-img="img/home-icon.png" data-bb-selected="true">Home</div>
            <div data-bb-type="action" data-bb-style="tab" data-bb-img="img/home-loc.png">Chennai,India</div>
        </div>

</div>

 

list.html:

<!DOCTYPE html>      
        <script type="text/javascript" src="js/list.js"></script>  
           <div data-bb-type="screen" data-bb-effect="slide-left" data-bb-scroll-effect="off" id="listscreen"  >
            <div data-bb-type="title" id="listLabel"></div>
         <div class="center" id="actind" data-bb-type="activity-indicator" data-bb-size="large"><p>Searching</p></div>
        <div data-bb-type="scroll-panel" style="height:1000px;" id="myPanel">
                   <ul class="list" id="list" ></ul>
                    <button id="more" class="more" style="display:none;">Load More ...</button>
                    <div class="google-text" id="google" style="display:none"><img src='img/google.png' /></div>
                    <div id="map" style="display:none"></div>
        </div>
    <div data-bb-type="action-bar" data-bb-back-caption="Back"></div>
    

</div>

detail.html:


<!DOCTYPE html>
<script type="text/javascript" src="js/detail.js"></script>
<div style="background: #ffffff;" data-bb-type="screen" data-bb-effect="slide-left" data-bb-scroll-effect="off" id="detailscreen" >
    <div data-bb-type="title" id="detailLabel" ></div>
    <div class="center bb-activity-light" id="actind" data-bb-type="activity-indicator" data-bb-size="large" style="display:none;"></div>           
    <div data-bb-type="scroll-panel" style="height:1000px;" id="myPanel">
        <div class="detail" id="detail" ></div>
        <div><img  id="map_detail"/></div>
        <div class='google-img'><img  id="googlemg"/></div>
    </div>  
    <div data-bb-type="action-bar" data-bb-back-caption="Back">
        <div data-bb-type="action" data-bb-style="button" data-bb-img="img/go-img.png" onClick="directions();">Go</div>
        <div data-bb-type="action" data-bb-style="button" data-bb-img="img/map-img.png" onClick="mapZoom();">Map</div>
        <div data-bb-type="action" data-bb-style="button" data-bb-img="img/share-img.png" onClick="shareImage()">Share</div>
    </div>
</div>

 

home.js:

function displayResult(event){
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if(keycode == '13'){
        if($("#searchText").val()!=''){
        var searchItem=$("#searchText").val();        
        window.localStorage.setItem("keyword", searchItem);
        $("#searchText").blur();
         bb.pushScreen('list.html', 'listscreen');
        return true;
        }else{
        return false;    
        }
    }
}

 

list.js:

 JavaScript Document

bb.init({onscreenready : function(element, id, params) {
                            if (id == 'listscreen') {
                                 initialize();    
                            }
                         }
         });


var searchName;                        
var map;
var service;
var infowindow;
var photo;
var place;
var listDiv;
var listDivMain = '';
function initialize(){    
                    
searchName = window.localStorage.getItem("keyword");
     var pyrmont = new google.maps.LatLng(0,0);
      map = new google.maps.Map(document.getElementById('map'), {
     center: pyrmont,
      zoom:15
    });
      var request = {
       location: pyrmont,
    radius: '500',results :2,
    query: searchName
      };
      infowindow = new google.maps.InfoWindow();

      service = new google.maps.places.PlacesService(map);
      service.textSearch(request, callback);
    
}

function callback(results, status, pagination) {
try{
  if (status == google.maps.places.PlacesServiceStatus.OK){
    
         displayResult(results);
      if(pagination.hasNextPage){        
            var moreButton = document.getElementById('more');
            document.getElementById('more').style.display="block";
            document.getElementById('google').style.display="block";
            
            moreButton.disabled = false;
            google.maps.event.addDomListenerOnce(moreButton, 'click',
             function() {
                    pagination.nextPage();
            });
        }else{
            $('#more').addClass("disable");
            document.getElementById('more').style.display="none";
            document.getElementById('google').style.display="none";
        }      
  }else{
    
    
          listDiv = document.getElementById('list');
        listDiv.innerHTML = '<div class="no-record">Sorry results not found for your search. Please refine your search and try again</div>';
        document.getElementById('more').style.display="none";
        document.getElementById('google').style.display="none";
  }
}catch(err){
        alert(err.message);    
    }
 
}
/* Redirect detail page */
function goToDetails(name){
    try{
        window.localStorage.setItem("reference", name);
        var stringValue = window.localStorage.getItem("reference");
        //document.location.href ='detail.html';
         bb.pushScreen('detail.html', 'detailscreen');
    }catch(err){
        alert(err.message);    
    }
}
function displayResult(places){    
    var titleBar = document.getElementById('listLabel');
       titleBar.setCaption(searchName);
    document.getElementById('actind').hide();
    $('#searchText1').val(searchName);
    try{
        
            listDiv = document.getElementById('list');
            listDiv.innerHTML = '';
             for (var i = 0, place; place = places[i]; i++) {
            
                 var imgSrc;
                  if(place.photos!=undefined){
                    photo = place.photos[0].getUrl({ 'maxWidth': 150, 'maxHeight': 150 });
                    imgSrc  = "<img src='"+photo+"'/>";  
                  }else{
                     imgsrc="<img src='"+place.icon+"' width=130px' height='150px' />";      
                  }
                var title_length = 22;
                var description_length = 25;
                var array_addess = place.formatted_address.split(",");
                var first_array_element = array_addess.splice(-3);
                var place_name = place.name;
                array_address_string = array_addess.toString();
                first_array_element_string = first_array_element.toString();

                if(place_name.length > 22){
                    var place_name_string = place_name.substring(0,title_length)+'...';
                }else{
                    var place_name_string = place_name;
                }
                if(first_array_element_string.toString().length > 25){
                    var substring_first_array_element_string = first_array_element_string.substring(0,description_length)+'...';
                }else{
                    var substring_first_array_element_string = first_array_element;
                }

                if(array_address_string.toString().length > 25){
                    var substring_array_addess = array_address_string.substring(0,description_length)+'...';
                }else{
                    var substring_array_addess = array_addess;
                }
                window.localStorage.setItem("reference", name);
                var stringValue = window.localStorage.getItem("reference");
                if(place.reference !=undefined && place.name !=undefined && place.formatted_address!=undefined){
                
                 listDivMain+="<li onclick='goToDetails(this.id);' id='"+place.reference+"' class='clearfix'><div class='left-section'><div class='img-div'><table><tr><td align='center' valign='middle'>"+imgSrc+"</td></tr></table></div></div><div class='right-section'><div class='list-section'><h1 class='list-name'>"+place_name_string+"</h1><h2 class='list-address'>"+substring_array_addess+"</h2><h3 class='list-state'>"+substring_first_array_element_string+"</h3></div></div></li>";
                  }
                  listDiv.innerHTML = listDivMain;
            }    
          }catch(err){
        alert(err.message);
    }    
}

detail.js:


 // JavaScript Document

bb.init({onscreenready : function(element, id, params) {
                            if (id == 'detailscreen') {
                                 init();    
                            }
                         }
         });


var keyName;
var place;
var openTime;
var closeTime;
var address;
var lat;
var long;
var place_name ;
var description;
var websites;
var telNumber;
var trimNumber;
var country;
var state;
var city;
var array_addess;
var curlat;
var curlong;
function init(){
    keyName=window.localStorage.getItem("reference");
    initialize();
    
    
}
function initialize() {
       var pyrmont = new google.maps.LatLng(0,0);
      map = new google.maps.Map(document.getElementById('map'), {
    center: pyrmont,
    zoom:18,           
   scaleControl: true,
    });
      var request = {
    reference: keyName
      };
    var searchName=window.localStorage.getItem("keyword");
      var service = new google.maps.places.PlacesService(map);
      service.getDetails(request, function(place, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
        var titleBarDetail = document.getElementById('detailLabel');
   titleBarDetail.setCaption(place.name);
        $("#searchText2").val(searchName);
        var detailDiv=document.getElementById("detail");
        detailDiv.innerHTML = '';
        var detailDivMain = '';
         var imgSrc;
        var time;
        var rating;
        var website;
        
        var latlngs = place.geometry.location.d+','+place.geometry.location.e;    
        description= place.address_components[0].long_name;

document.getElementById('map_detail').src='http://maps.google.com/maps/api/staticmap?center='+latlngs+'&zoom=12&scale=2&size=400x350&markers=ic...
document.getElementById('googlemg').src='img/google.png';
        
            if(place.photos!=undefined){
                photo = place.photos[0].getUrl({ 'maxWidth': 150, 'maxHeight': 150 });
                imgSrc  = "<img src='"+photo+"' />";  
            }else{
             imgsrc="<img src='"+place.icon+"' width='150px' height='150px' />";      
            }
              if(place.opening_hours!=undefined && place.opening_hours.periods[1]!=undefined){
                var length_of_periods = place.opening_hours.periods.length;
                 var str = '';
                 var opentime_pm = '';
                 var opentime_pm = '';
                 var closeTime_pm = '';
                   var time ='';
                    if(length_of_periods <= 7){
                        var workingdays = 1;         
                    }else{
                        var workingdays = 0;         
                    }
                     for(i=0; i<length_of_periods; i++) {
                        openTime= (place.opening_hours.periods[i].open.time);
                        openTime1 = openTime.substring(0,2);  
                        openTime2 = openTime.substring(2,4);  
    
                        closeTime= (place.opening_hours.periods[i].close.time);
                        closeTime1 = closeTime.substring(0,2);  
                        closeTime2 = closeTime.substring(2,4);  
                            if(openTime1 >= 12){
                                var open_modulus =  (openTime1 % 12);    
                                if(open_modulus < 10){
                                    opentime_pm = '0'+open_modulus + ':' + openTime2+' PM';
                                }else{    
                                 opentime_pm = open_modulus + ':' + openTime2+' PM';
                                }
                            }else{
                                if(openTime1 == 00){
                                     opentime_pm  =  '12:' + openTime2+' AM';
                                }else{
                                    opentime_pm  = openTime1 + ':' + openTime2+' AM';
                                }
                            }
        
                             if(closeTime1 >= 12){
                                var close_modulus =  (closeTime1 % 12);    
                                if(close_modulus < 10){
                                     closeTime_pm = '0'+close_modulus + ':' + closeTime2+' PM';
                                }else{    
                                     closeTime_pm = close_modulus + ':' + openTime2+' PM';
                                }
                            }else{
                                if(closeTime1 == '00'){
                                     closeTime_pm  = '12:' + closeTime2+' AM';
                                }else{
                                     closeTime_pm  = closeTime1 + ':' + closeTime2+' AM';
                                }
                            }
                            
                            str += '<div class="left">';
                            str += '<div class="day-div">';                    
                            if(length_of_periods == 7){                    
                            if(i == 0){
                                str += "Sunday";
                            }
                            if(i == 1){
                                str += "Monday";
                            }
                            if(i == 2){
                                str += "Tuesday";
                            }
                            if(i == 3){
                                str += "Wednesday";
                            }
                            if(i == 4){
                                str += "Thursday";
                            }
                            if(i == 5){
                                str += "Friday";
                            }
                            if(i == 6){
                                str += "Saturday";
                            }
                            str += '</div>';
                            str +="<div class='time-div'>"+opentime_pm+" - "+closeTime_pm+"</div>";
                    }

                    if(length_of_periods == 5){                    
                            if(i == 0){
                                str += "Monday";
                            }
                            if(i == 1){
                                str += "Tuesday";
                            }
                            if(i == 2){
                                str += "Wednesday";
                            }
                            if(i == 3){
                                str += "Thursday";
                            }
                            if(i == 4){
                                str += "Friday";
                            }
                            
                            str += '</div>';
                            str +="<div class='time-div'>"+opentime_pm+" - "+closeTime_pm+"</div>";
                    }

                            str += '</div>';
                              }

                                    if(length_of_periods == 5){            

                            str += '<div class="left">';
                            str += '<div class="day-div">'        
                            str += "Saturday";
                            str += '</div>';
                            str +="<div class='time-div close-div'>Closed</div>";
                            str += '</div>';
                            str += '<div class="left">';
                            str += '<div class="day-div">'        
                            str += "Sunday";
                            str += '</div>';
                            str +="<div class='time-div close-div'>Closed</div>";
                            str += '</div>';


                                    }
                              
                      }else{
                        var workingdays = 0;
                        openTime="0.00";
                        closeTime="23.00";
                        time="<label>"+openTime+" AM to "+closeTime+" PM</label>";
                      }
                      if(place.rating!=undefined){
                        rating="<span class='stars'>"+place.rating+"</span>";
                      }else{
                         rating="<span class='stars'>0</span>"
                      }                    
                      if(place.formatted_phone_number!=undefined){
                        var telephone_number = 1;
                         telNumber=place.formatted_phone_number;
                        trimNumber = telNumber.replace(/ /g, '');
                     }else{
                        var telephone_number = 0;
                     }    
                    websites = place.website;
                     if(place.website!=undefined){
                        var website_address = 1;    

                            var places_website = place.website;
                    
                            website="<a href='"+place.website+"' target='_blank' id='newBrowser'>Website</a>";
                     }else{
                                                var website_address = 0;

                        website="<div class='link'>-</div>";
                    }        
                 var title_length = 30;
                var description_length = 25;
                address=place.formatted_address;
                array_addess = place.formatted_address.split(",");
                var first_array_element = array_addess.splice(-3);
                place_name = place.name;
                array_address_string = array_addess.toString();
                first_array_element_string = first_array_element.toString();
                var place_name_string = place_name;
                var substring_first_array_element_string = first_array_element;
                country=$.trim(substring_first_array_element_string.splice(-1));
                var city_state=substring_first_array_element_string.splice(-2);
                var substring_first_array_element_string_new=city_state.splice(-3);
                var city_state_string=substring_first_array_element_string_new.toString();
                var city_state_array=city_state_string.split(",");
                city=$.trim(city_state_array[0]);    
                state=$.trim(city_state_array[1]);
                var substring_array_addess = array_addess;
                var direction=1;
                var latlong=place.geometry.location;
                lat=place.geometry.location.lat();
                long=place.geometry.location.lng()
            
                detailDivMain +="<div class='detail-header clearfix'><div class='right-section'><div class='list-section'><h1 class='list-name'>"+place.name+"</h1><h2 class='list-address'>"+substring_array_addess+"</h2><h3 class='list-state'>"+first_array_element_string+"</h3></div></div></div><div class='sub-detail clearfix'>";        
                if(workingdays == 1){
                    detailDivMain +="<div class='work-div clearfix'>"+str+"</div>";
                }
                
                detailDivMain +="<div class='siteTel clearfix'>";

                if(telephone_number == 1){
                    detailDivMain +="<div class='tel-div'><a href='tel:"+trimNumber+"'>Call</a></div>";
                }    
                if(website_address == 1){
                    detailDivMain +="<div class='visit-div clearfix'>"+website+"</div>";
                    
                }

                if(direction == 1){
                    detailDivMain +="<div class='dir-div' id='"+lat+","+long+"' onclick='redirectmap(this.id);'><a target='_blank'>Directions</a></div>";
                }
                
                    detailDivMain +="</div>";
                    detailDivMain +="</div>";                    
                    detailDiv.innerHTML = detailDivMain;
                stars();                        
                }
          });
    }
function stars(){
    return $('span.stars').each(function() {
         $(this).html($('<span />').width(Math.max(0, (Math.min(5, parseFloat($(this).html())))) * 34));
    });
}
function redirectmap(latlong){
    var geoDetails=latlong.split(",");
    var latitude=geoDetails[0];
    var longitude=geoDetails[1];
     if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(data){
            if (data.coords) {        
            window.open('https://maps.google.co.in/maps?saddr=' +data.coords.latitude+ ','+data.coords.longitude+'&daddr=' + address,'_blank','location=yes');
            }
        });
    }
}
function mapZoom(){
    window.open('map.html','_blank','location=yes');
    //bb.pushScreen('detail.html', 'detail');
}
function directions() {
     navigator.geolocation.getCurrentPosition(onSuccess, onError);
     //bb.pushScreen('detail.html', 'detail');
}
function Calldirections() {
    bb.pushScreen('list.html', 'listscreen');
}
function onSuccess(position) {
    curlat=position.coords.latitude;
    curlong=position.coords.longitude;
    blackberry.invoke.invoke({
    action: "bb.action.OPEN",
    type: "application/vnd.rim.map.action-v1",
    data&colon; JSON.stringify({
        "view_mode": "nav",
        "center": {
            "latitude":curlat,
            "longitude":curlong,
            "heading": 180,
            "zoom": 4
        },
        "nav_start": {
            "properties": {
                "name": "Display Name",
                "description": "Description",
                "address": "Waterloo, Ontario"
            },
            "latitude":curlat,
            "longitude":curlong
        },
        "nav_end": {
            "properties": {
                "name": place_name,
                "description": "Description",
                "address": address
            },
            "latitude":lat,
            "longitude":long
        },
        "nav_options": {
            "nav_mode": "fastest",
            "avoid_highways": false,
            "avoid_tolls": false,
            "transport_mode": "car"
        }
    })
});
}
function onError(error) {
    alert('code: '    + error.code    + '\n' +
          'message: ' + error.message + '\n');
}
var shareImage = function() {
    var request = {
        action : 'bb.action.SHARE',
        mime : 'text/plain',
        data &colon; 'I found this on Updatein Places:\r\n\r\n'+place_name+',\r\n'+array_addess+'\r\n'+city+'\r\n'+state+'\r\n'+country+'\r\n\r\n'+trimNumber+'\r\n'+websites,
        target_type: ["VIEWER", "CARD"]
    };
    blackberry.invoke.card.invokeTargetPicker(request, "Share",
    // success callback
    function() {},
    // error callback
    function(e) {}
    );
}

function displayResultDetail(event){
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if(keycode == '13'){
        if($("#searchText2").val()!=''){
        var searchItem=$("#searchText2").val();
        window.localStorage.setItem("keyword", searchItem);
        bb.pushScreen('list.html', 'listscreen');
        return true;
        }else{
            return false;    
        }
    }
    

}

 

please review the code,

 

Please use plain text.
Administrator
astanley
Posts: 1,382
Registered: ‎07-02-2009
My Device: BlackBerry Bold 9900
My Carrier: Bell

Re: Issue with both Activity Indicator and back button when using BBUI.js

Sorry, I would ask that you provide a reduced test case that reproduces the behavior. It's not helpful to post the full source of your app - let's try and focus on the specific problem.

 

 

Did you try debugging this yourself using remote web inspector?  What errors (if any) did you see?  Suggest putting some breakpoints in your list.js file since that is the page where you are using the activity indicator.

 

 

Follow me on Twitter: @n_adam_stanley
-------------------------------------------------------------------------------------------------------------------------
Your app doesn't work? Use BlackBerry remote web inspector to find out why.
Please use plain text.
Contributor
Dhivyamanohari
Posts: 11
Registered: ‎02-22-2014
My Device: Z10
My Carrier: Blazedream Technologies

Re: Issue with both Activity Indicator and back button when using BBUI.js

i didn get any error in web inspector.

 

The actual problem is ondomready() when i load listjs and detail.js its working properly,but on clicking back button from details page,list page again gets loaded,i have to bring the data without loading,

 

In this scenario i have used onscreenready(),it works perfectly,but the problem is that back button in details page is not working with input text box in home page and also loader makes the probelm.

 

My aim is to display the data in list page without loading the page again when clicking back button in details page.

 

pls suggest some solution,i am facing this problem for past 2 weeks.

Please use plain text.