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();
}
});
3 Answers, 1 is accepted
0
Accepted
Hello Pit,
The problem with the logInFacebook1 function is that it is defined inside the deviceReady event handler, making it unavailable to the view.
As for loginFacebook2, have you checked the console for any JavaScript errors when you are calling it. It seems to me that the app object isn't available in the scope of this function, thus the navigate function should be throwing an error. You can assign the kendo.Mobile.Application object, to global.app, so that it is available everywhere in your app.
You could also review the following sample which demonstrates recommended practices for implementing Kendo UI MVVM in an AppBuilder app, including how to handle the Application object globally.
https://github.com/Icenium/sample-kendo-ui-core-widgets
Regards,
Tsvetina
Telerik
The problem with the logInFacebook1 function is that it is defined inside the deviceReady event handler, making it unavailable to the view.
As for loginFacebook2, have you checked the console for any JavaScript errors when you are calling it. It seems to me that the app object isn't available in the scope of this function, thus the navigate function should be throwing an error. You can assign the kendo.Mobile.Application object, to global.app, so that it is available everywhere in your app.
You could also review the following sample which demonstrates recommended practices for implementing Kendo UI MVVM in an AppBuilder app, including how to handle the Application object globally.
https://github.com/Icenium/sample-kendo-ui-core-widgets
Regards,
Tsvetina
Telerik
Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.
0
Pit
Top achievements
Rank 2
Rank 2
answered on 01 Mar 2015, 11:35 PM
Thank you Tsvetina,
Now my functions respond to my buttons, plus my project is better structured. It does not work "navigate" to switch views.
views/login.html
scripts/login.js
index.html
/scripts/app.js
The error is "ReferenceError: navigate is not defined"
Thanks in advance for any help :)
Now my functions respond to my buttons, plus my project is better structured. It does not work "navigate" to switch views.
views/login.html
1.<div data-role="view" data-title="Citizen Connected" data-layout="main" data-model="app.loginService.viewModel">2. <h1 data-bind="html: title"></h1>3. Puedes iniciar sesión con:4. <div>5. <a data-role="button" data-bind="click: logInFacebook" data-align="left">Facebook</a>6. <a data-role="button" data-bind="click: logInTwitter" data-align="right">Twitter</a>7. </div>8.</div>scripts/login.js
01.(function (global) {02. var LoginViewModel, app = global.app = global.app || {};03. 04. LoginViewModel = kendo.data.ObservableObject.extend({05. title: "Inicio De Sesión"06. 07. , logInFacebook: function () {08. alert('Hello Facebook');09. try {10. navigate("views/denunciar.html");11. } catch (e) {12. alert(e);13. }14. 15. }16. , logInTwitter: function () {17. alert('Hola Twitter');18. }19. });20. 21. app.loginService = {22. viewModel: new LoginViewModel()23. };24.})(window);index.html
01.<!DOCTYPE html>02.<html>03.<head>04. <title>Citizen Connected</title>05. <meta charset="utf-8" />06. <link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />07. <link href="styles/main.css" rel="stylesheet" />08. 09. <script src="cordova.js"></script>10. <script src="kendo/js/jquery.min.js"></script>11. <script src="kendo/js/kendo.mobile.min.js"></script>12. <script type="text/javascript" src="scripts/MobileServices.Web-1.1.0.min.js"></script>13. 14. <script src="scripts/app.js"></script>15. <script src="scripts/login.js"></script>16. <script src="scripts/location.js"></script>17.</head>18.<body>19. <div data-role="layout" data-id="main">20. <div data-role="header">21. <div data-role="navbar">22. <span data-role="view-title"></span>23. </div>24. </div>25. 26. <!-- 27. application views will be rendered here 28. Sólo para los casos que no debe mostrar el drawer, con las opciones que requieran de una sesión.29. -->30. 31. </div>32. 33. <div data-role="layout" data-id="secondary">34. <div data-role="header">35. <div data-role="navbar">36. <span data-role="view-title"></span>37. <a data-role="button" href="#appDrawer" data-rel="drawer" data-align="left" data-icon="drawer-button"></a>38. </div>39. </div>40. 41. <!-- 42. application views will be rendered here 43. Para mostrar las opciones del drawer que se deben emplear con una sesión activa.44. -->45. 46. </div>47. 48. <!-- application drawer and contents -->49. <div data-role="drawer" id="appDrawer" style="width: 270px" data-title="Menú" data-swipe-to-open="false">50. <div data-role="header">51. <div data-role="navbar">52. <span data-role="view-title"></span>53. </div>54. </div>55. <ul data-role="listview">56. <li>57. <a href="views/denunciar.html">Denunciar</a>58. </li>59. <li>60. <a href="views/historial.html">Historial De Denuncias</a>61. </li>62. <li>63. <a href="views/atencion.html">Horarios De Atención</a>64. </li>65. <li>66. <a href="views/autor.html">Sobre el Autor</a>67. </li>68. <li>69. <a href="views/login.html">Salir</a>70. </li>71. </ul>72. </div>73.</body>74.</html>/scripts/app.js
01.(function (global) { 02. var app = global.app = global.app || {};03. 04. document.addEventListener('deviceready', function () {05. navigator.splashscreen.hide();06. 07. app.application = new kendo.mobile.Application(document.body, {08. skin: 'flat',09. initial: 'views/login.html'10. });11. }, false);12.})(window);The error is "ReferenceError: navigate is not defined"
Thanks in advance for any help :)
0
Pit
Top achievements
Rank 2
Rank 2
answered on 02 Mar 2015, 01:03 AM
I answer myself xD
Must be corrected the line 10
Must be corrected the line 10
app.application.navigate("views/denunciar.html");