2
I’m developing an app on Intel XDK (1995 version) where the layout is basically a footer with a grouped button inside it. The chosen framework is the Boostrap. Below the image of the app running in emulate.
Utilise subpages to make the navigations. In a given subpage, I have a button that performs a query to a webservice, which returns a list of banks that is used to feed a listview in another subpage.
That’s where I’m having the hardest time. This listview is loaded normally, and I can scroll the list smoothly and see the content loaded, but only in the Emulate tab.
If I test the app in App Preview or inside my smartphone, that same listview appears loaded, but I can’t scroll. She gets stuck, as if without the scroll option.
Below, I send the jquery code used to fetch the data in the webservice:
/* button #btn_bancos */
$(document).on("click", "#btn_bancos", function(evt)
{
var webMethod1 = "http://my_webservice_address";
$.ajax({
type: "POST",
dataType: "XML",
url: webMethod1,
success: parseXMLBancos
})
.fail(function(jqXHR, textStatus) {
myAppProcessing.hideProcessing();
alert( "Request failed: " + textStatus );
});
});
function parseXMLBancos(xmlBancos)
{
// Limpa a linha de template original do listview
$("#lst_bancos").empty();
// Percorre todas as ocorrências retornadas pelo serviço
$(xmlBancos).find("Bancos").each(function() {
var codigo = $(this).find('CdBanco').text();
var sigla = $(this).find('SgBancoComCodigo').text();
var banco = '<a class="list-group-item allow-badge widget" data-uib="twitter%20bootstrap/list_item" data-ver="1"><h4 class="list-group-item-heading">' + codigo + '</h4><p class="list-group-item-text">' + sigla +'</p></a>';
$("#lst_bancos").append(banco);
});
activate_subpage("#bancos");
myAppProcessing.hideProcessing();
}
Below, I send the index.html code.:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
<meta charset="UTF-8">
<title>Blank App Designer Cordova Web App Project Template</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=no">
<style>
@-ms-viewport { width: 100vw ; min-zoom: 100% ; zoom: 100% ; } @viewport { width: 100vw ; min-zoom: 100% zoom: 100% ; }
@-ms-viewport { user-zoom: fixed ; min-zoom: 100% ; } @viewport { user-zoom: fixed ; min-zoom: 100% ; }
</style>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" type="text/css" href="css/index_main.less.css" class="main-less">
<script src="cordova.js" id="xdkJScordova_"></script>
<script src="js/app.js"></script>
<script src="js/init-app.js"></script>
<script src="xdk/init-dev.js"></script>
<script type="application/javascript" src="lib/jquery.min.js"></script>
<script type="application/javascript" src="sidebar/js/hammer.js"></script>
<script type="application/javascript" src="sidebar/js/jquery.hammer.js"></script>
<script type="application/javascript" src="sidebar/js/swipe-hammer.js"></script>
<script type="application/javascript" src="sidebar/js/sidebar.js"></script>
<script type="application/javascript" src="js/index_user_scripts.js"></script>
<script type="application/javascript" src="xdk/ad/bs_subpage.js"></script>
<script type="application/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#btn_bancos").click(function () {
myAppProcessing.showProcessing();
});
});
</script>
<script type="application/javascript" src="xdk/appdesigner/js/rest-of-space.js"></script>
</head>
<body>
<div class="upage" id="mainpage">
<div class="upage-outer">
<div class="upage-content ac0 content-area vertical-col" id="home">
<div class="widget uib_w_7 scale-image d-margins logotipo" data-uib="media/img" data-ver="0">
<figure class="figure-align">
<img src="images/logotipo-home.png">
<figcaption data-position="bottom"></figcaption>
</figure>
</div>
</div>
<div class="uib-footer uib-footer-fixed footer-bg container-group inner-element uib_w_2" data-uib="layout/footer" data-ver="0">
<h2></h2>
<div class="widget-container wrapping-col single-centered">
<div class="btn-group uib-bs-flex widget uib_w_3 d-margins" data-uib="twitter%20bootstrap/button_group" data-ver="1">
<button class="btn widget uib_w_4 btn-info" data-uib="twitter%20bootstrap/button" data-ver="1" id="btn_home"><i class="glyphicon glyphicon-home button-icon-top" data-position="top"></i>Home</button>
<button class="btn widget uib_w_5 btn-info" data-uib="twitter%20bootstrap/button" data-ver="1" id="btn_consultas"><i class="glyphicon glyphicon-search button-icon-top" data-position="top"></i>Consultas</button>
<button class="btn widget uib_w_6 btn-info" data-uib="twitter%20bootstrap/button" data-ver="1" id="btn_sair"><i class="glyphicon glyphicon-hand-left button-icon-top" data-position="top"></i>Sair</button>
</div>
</div>
<div class="widget-container content-area horiz-area wrapping-col left"></div>
<div class="widget-container content-area horiz-area wrapping-col right"></div>
</div>
</div>
<div class="upage-content hidden vertical-col" id="consultas">
<div class="grid grid-pad urow uib_row_1 row-height-1" data-uib="layout/row" data-ver="0">
<div class="col uib_col_1 col-0_12-12" data-uib="layout/col" data-ver="0">
<div class="widget-container content-area vertical-col">
<span class="widget uib_w_8 d-margins label label-primary" data-uib="twitter%20bootstrap/badge_and_label" data-ver="1">Consultas</span>
<button class="btn widget uib_w_9 d-margins btn-lg btn-info" data-uib="twitter%20bootstrap/button" data-ver="1" id="btn_bancos"><i class="glyphicon glyphicon-search button-icon-left" data-position="left"></i>Bancos</button><span class="uib_shim"></span>
</div>
</div>
<span class="uib_shim"></span>
</div>
</div>
<div id="bancos" class="upage-content hidden vertical-col">
<div class="grid grid-pad urow uib_row_2 row-height-2" data-uib="layout/row" data-ver="0">
<div class="col uib_col_4 col-0_12-12" data-uib="layout/col" data-ver="0">
<div class="widget-container content-area vertical-col">
<div class="list-group widget uib_w_10 d-margins rest-of-height" data-uib="twitter%20bootstrap/list_group" data-ver="1" id="lst_bancos">
<a class="list-group-item allow-badge widget uib_w_11" data-uib="twitter%20bootstrap/list_item" data-ver="1">
<h4 class="list-group-item-heading">Heading</h4>
<p class="list-group-item-text">List item</p>
</a>
<a class="list-group-item allow-badge widget uib_w_12" data-uib="twitter%20bootstrap/list_item" data-ver="1">
<h4 class="list-group-item-heading">Heading</h4>
<p class="list-group-item-text">List item</p>
</a>
<a class="list-group-item allow-badge widget uib_w_13" data-uib="twitter%20bootstrap/list_item" data-ver="1">
<h4 class="list-group-item-heading">Heading</h4>
<p class="list-group-item-text">List item</p>
</a>
</div><span class="uib_shim"></span>
</div>
</div>
<span class="uib_shim"></span>
</div>
</div>
</div>
</body>
</html>
If I change the subpages for pages, the problem disappears, that is, I can make the listview work in any situation. But I need it to be with subpages, because I have the footer menu that I will be using throughout the project and I see no logic in creating the same footer menu on several pages, if I have the subpage feature that allows me this shared use of footer.
I’ve had this problem for weeks and I haven’t been able to solve it at all. I’ve recreated the project 4 times, I’ve tried other features, but unfortunately it didn’t happen and the worst is that my client already approved the layout of the project and because of that, I don’t have much to do to change the face of the app, because I have to attend to what was closed in the approval of the layout of the project.
Hugs, Marcelo.
I would like to add to the case that I have already run the app on the "Test" and "Debug" tabs and in both, the project works, ie the listview moves normally. But, if I use the app on my device via App Preview or installing apk, the listview doesn’t scroll.
– Olivertech
Good afternoon, Marcelo. What version of Ordova are you using? I found several bugs in version 4.1.2, if you are using this one, try version 3.5 (Projects>Build Settings>Cordova CLI Version). Sds., Jânio Pimentel
– user26537