This question is locked. New answers and comments are not allowed.
Hi Telerik Team,
By clicking the button that calls the function "logInFacebook1", does not respond.
but, when clicking the button that calls the function "logInFacebook2", this respond; but does not respond "app.navigate("views/denunciar.html");"
*************
index.html
*************
<!DOCTYPE html>
<html>
<head>
<title>Citizen Connected</title>
<meta charset="utf-8" />
<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/main.css" rel="stylesheet" />
<script src="cordova.js"></script>
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>
<script type="text/javascript" src="scripts/MobileServices.Web-1.1.0.min.js"></script>
<script src="scripts/app.js"></script>
</head>
<body>
<div data-role="layout" data-id="main">
<div data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</div>
<!-- application views will be rendered here -->
</div>
<div data-role="layout" data-id="secondary">
<div data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
<a data-role="button" href="#appDrawer" data-rel="drawer" data-align="left" data-icon="drawer-button"></a>
</div>
</div>
<!-- application views will be rendered here -->
</div>
<!-- application drawer and contents -->
<div data-role="drawer" id="appDrawer" style="width: 270px" data-title="Menú" data-swipe-to-open="false">
<div data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</div>
<ul data-role="listview">
<li>
<a href="views/denunciar.html">Denunciar</a>
</li>
<li>
<a href="views/historial.html">Historial De Denuncias</a>
</li>
<li>
<a href="views/atencion.html">Horarios De Atención</a>
</li>
<li>
<a href="views/autor.html">Sobre el Autor</a>
</li>
<li>
<a href="views/login.html">Salir</a>
</li>
</ul>
</div>
</body>
</html>
*************
login.html
*************
<div data-role="view" data-title="Citizen Connected" data-layout="main" data-model="APP.models.login">
<h1 data-bind="html: title"></h1>
Puedes iniciar sesión con:
<div>
Bienvenido, <span id="spn_logInName"></span>.
<a data-role="button" data-click="logInFacebook1" data-align="left">Test Facebook 1</a>
<a data-role="button" data-click="logInFacebook2" data-align="left">Test Facebook 2</a>
<a data-role="button" data-click="logInTwitter" data-align="right">Twitter</a>
<a data-role="button" data-click="holaMundo" data-align="right">Hola mundo</a>
<a data-role="button" href="views/denunciar.html" data-align="left">Denunciar</a>
</div>
</div>
************************
app.js
************************
(function () {
// store a reference to the application object that will be created
// later on so that we can use it if need be
var app;
// create an object to store the models for each view
window.APP = {
models: {
login: {
title: "Inicio De Sesión"
},
denunciar: {
title: 'Reportar Incidente'
},
historial: {
title: 'Denuncias Hechas'
},
atencion: {
title: "Horarios De Atención"
},
autor: {
title: 'Sobre el Autor',
ds: new kendo.data.DataSource({
data: [{ id: 1, name: 'Bob' }, { id: 2, name: 'Mary' }, { id: 3, name: 'John' }]
}),
alert: function(e) {
alert(e.data.name);
}
}
}
};
document.addEventListener('deviceready', function () {
navigator.splashscreen.hide();
app = new kendo.mobile.Application(document.body, {
skin: 'flat',
initial: 'views/login.html'
});
function logInFacebook1() {
alert('test');
}
}, false);
}());
// Instanciamos el mobile service y la tabla de control.
var client = new WindowsAzure.MobileServiceClient('https://nameProject.azure-mobile.net/','xxxxxxxxxxxxxxxxxZZgj26');
todoItemTable = client.getTable('tbl_m_xxxxxxxxxxxxxxxxx');
// Iniciamos sesión con Facebook.
function logInFacebook2() {
client.login("facebook").then(refreshAuthDisplay, function (error) {
alert(error);
});
}
// Iniciamos sesión con Twitter.
function logInTwitter() {
client.login("twitter").then(refreshAuthDisplay, function (error) {
alert(error);
});
}
function refreshAuthDisplay() {
var isLoggedIn = client.currentUser !== null;
if (isLoggedIn) {
var userIDCurrent = client.currentUser.userId;
app.navigate("views/denunciar.html"); //local view
// $("#spn_logInName").text(userIDCurrent);
// currentPosition();
// refreshTodoItems();
}
}
function refreshTodoItems() {
$('#summary').html("Cargando...");
var query = todoItemTable.where({ complete: false });
query.read().then(function (todoItems) {
var listItems = $.map(todoItems, function (item) {
return $('<li>')
.attr('data-todoitem-id', item.id)
.append($('<div>').append($('<input class="item-text">').val(item.text)));
});
$('#todo-items').empty().append(listItems).toggle(listItems.length > 0);
$('#summary').html('<strong>' + todoItems.length + '</strong> denuncia(s)');
}, handleError);
}
function logOut() {
client.logout();
reportarView.destroy();
router.navigate("/");
}
function handleError(error) {
var text = error + (error.request ? ' - ' + error.request.status : '');
$('#errorlog').append($('<li>').text(text));
}
function currentPosition() {
navigator.geolocation.getCurrentPosition(onSuccess, handleError);
}
// on Success Geolocalizacion
function onSuccess(position) {
var latitud = position.coords.latitude; // latitud
var longitud = position.coords.longitude; // longitud
var latlng = new google.maps.LatLng(latitud, longitud);
// Usamos Google Maps para mostrar la posición
var myOptions = {
zoom: 15,
center: latlng, // Centramos el mapa con las coordenadas
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControl: true
};
// Creamos el mapa
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
marcador = new google.maps.Marker({
position: latlng
, map: map
, title: "Estás aquí"
})
}
$('#btn_actualizar').click(function (evt) {
alert('Actualizar');
// refreshTodoItems();
// evt.preventDefault();
});
function actualizar() {
alert('Actualizar');
// refreshTodoItems();
// evt.preventDefault();
}
$('#btn_registrar').click(function (evt) {
navigator.geolocation.getCurrentPosition(onSuccessRegistrar, handleError);
function onSuccessRegistrar(position, evt) {
var textbox = $('#txt_denuncia'),
itemText = textbox.val();
var latitud = position.coords.latitude;
var longitud = position.coords.longitude;
if (itemText !== '') {
todoItemTable.insert({ text: itemText, complete: false, latitud: latitud, longitud: longitud }).then(refreshTodoItems, handleError);
}
textbox.val('').focus();
evt.preventDefault();
}
});
By clicking the button that calls the function "logInFacebook1", does not respond.
but, when clicking the button that calls the function "logInFacebook2", this respond; but does not respond "app.navigate("views/denunciar.html");"
*************
index.html
*************
<!DOCTYPE html>
<html>
<head>
<title>Citizen Connected</title>
<meta charset="utf-8" />
<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/main.css" rel="stylesheet" />
<script src="cordova.js"></script>
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>
<script type="text/javascript" src="scripts/MobileServices.Web-1.1.0.min.js"></script>
<script src="scripts/app.js"></script>
</head>
<body>
<div data-role="layout" data-id="main">
<div data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</div>
<!-- application views will be rendered here -->
</div>
<div data-role="layout" data-id="secondary">
<div data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
<a data-role="button" href="#appDrawer" data-rel="drawer" data-align="left" data-icon="drawer-button"></a>
</div>
</div>
<!-- application views will be rendered here -->
</div>
<!-- application drawer and contents -->
<div data-role="drawer" id="appDrawer" style="width: 270px" data-title="Menú" data-swipe-to-open="false">
<div data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</div>
<ul data-role="listview">
<li>
<a href="views/denunciar.html">Denunciar</a>
</li>
<li>
<a href="views/historial.html">Historial De Denuncias</a>
</li>
<li>
<a href="views/atencion.html">Horarios De Atención</a>
</li>
<li>
<a href="views/autor.html">Sobre el Autor</a>
</li>
<li>
<a href="views/login.html">Salir</a>
</li>
</ul>
</div>
</body>
</html>
*************
login.html
*************
<div data-role="view" data-title="Citizen Connected" data-layout="main" data-model="APP.models.login">
<h1 data-bind="html: title"></h1>
Puedes iniciar sesión con:
<div>
Bienvenido, <span id="spn_logInName"></span>.
<a data-role="button" data-click="logInFacebook1" data-align="left">Test Facebook 1</a>
<a data-role="button" data-click="logInFacebook2" data-align="left">Test Facebook 2</a>
<a data-role="button" data-click="logInTwitter" data-align="right">Twitter</a>
<a data-role="button" data-click="holaMundo" data-align="right">Hola mundo</a>
<a data-role="button" href="views/denunciar.html" data-align="left">Denunciar</a>
</div>
</div>
************************
app.js
************************
(function () {
// store a reference to the application object that will be created
// later on so that we can use it if need be
var app;
// create an object to store the models for each view
window.APP = {
models: {
login: {
title: "Inicio De Sesión"
},
denunciar: {
title: 'Reportar Incidente'
},
historial: {
title: 'Denuncias Hechas'
},
atencion: {
title: "Horarios De Atención"
},
autor: {
title: 'Sobre el Autor',
ds: new kendo.data.DataSource({
data: [{ id: 1, name: 'Bob' }, { id: 2, name: 'Mary' }, { id: 3, name: 'John' }]
}),
alert: function(e) {
alert(e.data.name);
}
}
}
};
document.addEventListener('deviceready', function () {
navigator.splashscreen.hide();
app = new kendo.mobile.Application(document.body, {
skin: 'flat',
initial: 'views/login.html'
});
function logInFacebook1() {
alert('test');
}
}, false);
}());
// Instanciamos el mobile service y la tabla de control.
var client = new WindowsAzure.MobileServiceClient('https://nameProject.azure-mobile.net/','xxxxxxxxxxxxxxxxxZZgj26');
todoItemTable = client.getTable('tbl_m_xxxxxxxxxxxxxxxxx');
// Iniciamos sesión con Facebook.
function logInFacebook2() {
client.login("facebook").then(refreshAuthDisplay, function (error) {
alert(error);
});
}
// Iniciamos sesión con Twitter.
function logInTwitter() {
client.login("twitter").then(refreshAuthDisplay, function (error) {
alert(error);
});
}
function refreshAuthDisplay() {
var isLoggedIn = client.currentUser !== null;
if (isLoggedIn) {
var userIDCurrent = client.currentUser.userId;
app.navigate("views/denunciar.html"); //local view
// $("#spn_logInName").text(userIDCurrent);
// currentPosition();
// refreshTodoItems();
}
}
function refreshTodoItems() {
$('#summary').html("Cargando...");
var query = todoItemTable.where({ complete: false });
query.read().then(function (todoItems) {
var listItems = $.map(todoItems, function (item) {
return $('<li>')
.attr('data-todoitem-id', item.id)
.append($('<div>').append($('<input class="item-text">').val(item.text)));
});
$('#todo-items').empty().append(listItems).toggle(listItems.length > 0);
$('#summary').html('<strong>' + todoItems.length + '</strong> denuncia(s)');
}, handleError);
}
function logOut() {
client.logout();
reportarView.destroy();
router.navigate("/");
}
function handleError(error) {
var text = error + (error.request ? ' - ' + error.request.status : '');
$('#errorlog').append($('<li>').text(text));
}
function currentPosition() {
navigator.geolocation.getCurrentPosition(onSuccess, handleError);
}
// on Success Geolocalizacion
function onSuccess(position) {
var latitud = position.coords.latitude; // latitud
var longitud = position.coords.longitude; // longitud
var latlng = new google.maps.LatLng(latitud, longitud);
// Usamos Google Maps para mostrar la posición
var myOptions = {
zoom: 15,
center: latlng, // Centramos el mapa con las coordenadas
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControl: true
};
// Creamos el mapa
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
marcador = new google.maps.Marker({
position: latlng
, map: map
, title: "Estás aquí"
})
}
$('#btn_actualizar').click(function (evt) {
alert('Actualizar');
// refreshTodoItems();
// evt.preventDefault();
});
function actualizar() {
alert('Actualizar');
// refreshTodoItems();
// evt.preventDefault();
}
$('#btn_registrar').click(function (evt) {
navigator.geolocation.getCurrentPosition(onSuccessRegistrar, handleError);
function onSuccessRegistrar(position, evt) {
var textbox = $('#txt_denuncia'),
itemText = textbox.val();
var latitud = position.coords.latitude;
var longitud = position.coords.longitude;
if (itemText !== '') {
todoItemTable.insert({ text: itemText, complete: false, latitud: latitud, longitud: longitud }).then(refreshTodoItems, handleError);
}
textbox.val('').focus();
evt.preventDefault();
}
});