@nolimits4web @Pvtallulah
thanks for the continuity … my app is:
// Dom7
var $ = Dom7;
// Theme
var theme = 'auto';
if (document.location.search.indexOf('theme=') >= 0) {
theme = document.location.search.split('theme=')[1].split('&')[0];
}
// Init App
var app = new Framework7({
id: 'io.framework7.testapp',
root: '#app',
theme: theme,
data: function () {
return {
user: {
firstName: 'John',
lastName: 'Doe',
},
};
},
methods: {
helloWorld: function () {
app.dialog.alert('Hello World!');
},
},
routes: routes,
popup: {
closeOnEscape: true,
},
sheet: {
closeOnEscape: true,
},
popover: {
closeOnEscape: true,
},
actions: {
closeOnEscape: true,
},
vi: {
placementId: 'pltd4o7ibb9rc653x14',
},
});
my index is:
<!DOCTYPE html>
<html>
<head>
<title>VIC - Menu</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="theme-color" content="#2196f3" />
<meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap:" />
<link rel="stylesheet" href="lib/framework7/css/framework7.bundle.min.css" />
<link rel="stylesheet" href="css/app.css" />
<link rel="apple-touch-icon" href="img/f7-icon-square.png" />
<link rel="icon" href="img/f7-icon.png" />
<link rel="stylesheet" href="css/styles.css" />
<link rel="stylesheet" href="css/form.css" />
</head>
<body>
<div id="app">
<div class="statusbar"></div>
<div class="panel panel-left panel-cover panel-resizable">
<div class="page">
<div class="page-content">
<div class="block-title">Menú</div>
</div>
</div>
</div>
<div class="view view-main view-init safe-areas" data-master-detail-breakpoint="800" data-url="/">
<div class="page">
<div class="navbar">
<div style="text-align: center; margin-top: 4px;"><img src="img/key.png" width="60px" /></div>
<div class="navbar-inner">
<div class="left">
<a href="#" class="link icon-only panel-open" data-panel="left">
<i class="icon f7-icons if-not-md">menu</i>
<i class="icon material-icons md-only">menu</i>
</a>
</div>
</div>
</div>
<div class="page-content">
<div style="text-align: center; justify-content:center; margin-right:auto; margin-left:auto">
<h2 style="color:#00008B;">Visita de Impacto al Cliente</h2>
<form id="ncedula" method="post" class="login100-form validate-form">
<input class="input100" type="hidden" name="IdUsuario" id="IdUsuario" placeholder="id">
<table style="width:100%; margin: 0 auto; text-align: center; border-collapse: collapse;">
<tr>
<td style="text-align: center;" colspan="2"><a class="item-content item-link" href="/ncedula/" style="text-decoration: none;" ><img src="img/ncedula.png" width="100px" /><br /><span style="color:#00008B; font-weight: bold;">Nueva cédula</span></a></td>
</tr>
<tr>
<td style="text-align: center;"><br /><img src="img/report.png" width="60px" /><br /><span style="color:#00008B; font-weight: bold;">Programa de <br /> visitas</span><br /></td>
<td style="text-align: center;"><br /><img src="img/pdf.png" width="60px" /><br /><span style="color:#00008B; font-weight: bold;">Historial de <br />visitas</span><br /></td>
</tr>
<tr>
<td style="text-align: center;"><br /><img src="img/ticket.png" width="60px" /><br /><span style="color:#00008B; font-weight: bold;">Consulta de <br />mis ticket's</span><br /></td>
<td style="text-align: center;"><br /><a href="/popup/"><img src="img/gra.png" width="60px" /></a><br /><span style="color:#00008B; font-weight: bold;">Gráficas de <br />resultados</span><br /></td>
</tr>
</table>
</form>
</div>
</div> <!-- PAGE CONTENT -->
</div>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script src="lib/framework7/js/framework7.bundle.min.js"></script>
<script src="js/routes.js"></scrip>
<script src="js/app.js"></script>
<script src="js/metodos.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
</body>
</html>
Routes file is:
var routes = [
// Index page
{
path: '/',
url: './index.html',
name: 'home',
},
// About page
{
path: '/about/',
url: './pages/about.html',
name: 'about',
},
// Pages VIC
{
name: 'ncedula',
path: '/ncedula/',
componentUrl: './pages/ncedula.html',
},
{
name: 'recorrido',
path: '/recorrido/',
url: './pages/recorrido.html',
},
{
name: 'equipos',
path: '/equipos/:productos',
componentUrl: './pages/equipos.html',
},
{
name: 'productos',
path: '/productos/',
url: './pages/productos.html',
},
{
name: 'cierre',
path: '/cierre/',
url: './pages/cierre.html',
},
{
name: 'imagen',
path: '/imagen/',
url: './pages/imagen.html',
},
{
name: 'entrenamiento',
path: '/entrenamiento/',
url: './pages/entrenamiento.html',
},
{
name:'inventario',
path: '/inventario/',
url: './pages/invent.html',
},
{
name: 'prod',
path: '/prod/',
url: './pages/prod.html',
},
{
name: 'newprod',
path: '/newprod/',
url: './pages/newprod.html',
},
{
name: 'cierre',
path: '/cierre/',
url: './pages/cierre.html',
},
// Components
{
path: '/accordion/',
url: './pages/examples/accordion.html',
},
{
path: '/action-sheet/',
componentUrl: './pages/action-sheet.html',
},
{
path: '/appbar/',
componentUrl: './pages/appbar.html',
},
{
path: '/autocomplete/',
componentUrl: './pages/autocomplete.html',
},
{
path: '/badge/',
componentUrl: './pages/badge.html',
},
{
path: '/buttons/',
url: './pages/buttons.html',
},
{
path: '/calendar/',
componentUrl: './pages/calendar.html',
},
{
path: '/calendar-page/',
componentUrl: './pages/calendar-page.html',
},
{
path: '/cards/',
url: './pages/cards.html',
},
{
path: '/cards-expandable/',
url: './pages/cards-expandable.html',
},
{
path: '/checkbox/',
componentUrl: './pages/checkbox.html',
},
{
path: '/chips/',
componentUrl: './pages/chips.html',
},
{
path: '/color-picker/',
componentUrl: './pages/color-picker.html',
},
{
path: '/contacts-list/',
url: './pages/contacts-list.html',
},
{
path: '/content-block/',
url: './pages/content-block.html',
},
{
path: '/data-table/',
componentUrl: './pages/data-table.html',
},
{
path: '/dialog/',
componentUrl: './pages/dialog.html',
},
{
path: '/elevation/',
url: './pages/elevation.html',
},
{
path: '/fab/',
url: './pages/fab.html',
},
{
path: '/fab-morph/',
url: './pages/fab-morph.html',
},
{
path: '/form-storage/',
url: './pages/form-storage.html',
},
{
path: '/gauge/',
componentUrl: './pages/gauge.html',
},
{
path: '/grid/',
url: './pages/grid.html',
},
{
path: '/icons/',
componentUrl: './pages/icons.html',
},
{
path: '/infinite-scroll/',
componentUrl: './pages/infinite-scroll.html',
},
{
path: '/inputs/',
url: './pages/inputs.html',
},
{
path: '/lazy-load/',
url: './pages/lazy-load.html',
},
{
path: '/list/',
url: './pages/list.html',
},
{
path: '/list-index/',
componentUrl: './pages/list-index.html',
},
{
path: '/login-screen/',
componentUrl: './pages/login-screen.html',
},
{
path: '/login-screen-page/',
componentUrl: './pages/login-screen-page.html',
},
{
path: '/menu/',
componentUrl: './pages/menu.html',
},
{
path: '/messages/',
componentUrl: './pages/messages.html',
},
{
path: '/navbar/',
url: './pages/navbar.html',
},
{
path: '/navbar-hide-scroll/',
url: './pages/navbar-hide-scroll.html',
},
{
path: '/notifications/',
componentUrl: './pages/notifications.html',
},
{
path: '/panel/',
url: './pages/panel.html',
},
{
path: '/photo-browser/',
componentUrl: './pages/photo-browser.html',
},
{
path: '/picker/',
componentUrl: './pages/picker.html',
},
{
path: '/popup/',
componentUrl: './pages/popup.html',
},
{
path: '/popover/',
url: './pages/popover.html',
},
{
path: '/preloader/',
componentUrl: './pages/preloader.html',
},
{
path: '/progressbar/',
componentUrl: './pages/progressbar.html',
},
{
path: '/pull-to-refresh/',
componentUrl: './pages/pull-to-refresh.html',
},
{
path: '/radio/',
url: './pages/radio.html',
},
{
path: '/range/',
componentUrl: './pages/range.html',
},
{
path: '/searchbar/',
url: './pages/searchbar.html',
},
{
path: '/searchbar-expandable/',
url: './pages/searchbar-expandable.html',
},
{
path: '/sheet-modal/',
componentUrl: './pages/sheet-modal.html',
},
{
path: '/skeleton/',
componentUrl: './pages/skeleton.html',
},
{
path: '/smart-select/',
url: './pages/smart-select.html',
},
{
path: '/sortable/',
url: './pages/sortable.html',
},
{
path: '/statusbar/',
componentUrl: './pages/statusbar.html',
},
{
path: '/stepper/',
componentUrl: './pages/stepper.html',
},
{
path: '/subnavbar/',
url: './pages/subnavbar.html',
},
{
path: '/subnavbar-title/',
url: './pages/subnavbar-title.html',
},
{
path: '/swiper/',
url: './pages/swiper.html',
routes: [
{
path: 'swiper-horizontal/',
url: './pages/swiper-horizontal.html',
},
{
path: 'swiper-vertical/',
url: './pages/swiper-vertical.html',
},
{
path: 'swiper-space-between/',
url: './pages/swiper-space-between.html',
},
{
path: 'swiper-multiple/',
url: './pages/swiper-multiple.html',
},
{
path: 'swiper-nested/',
url: './pages/swiper-nested.html',
},
{
path: 'swiper-loop/',
url: './pages/swiper-loop.html',
},
{
path: 'swiper-3d-cube/',
url: './pages/swiper-3d-cube.html',
},
{
path: 'swiper-3d-coverflow/',
url: './pages/swiper-3d-coverflow.html',
},
{
path: 'swiper-3d-flip/',
url: './pages/swiper-3d-flip.html',
},
{
path: 'swiper-fade/',
url: './pages/swiper-fade.html',
},
{
path: 'swiper-scrollbar/',
url: './pages/swiper-scrollbar.html',
},
{
path: 'swiper-gallery/',
componentUrl: './pages/swiper-gallery.html',
},
{
path: 'swiper-custom-controls/',
url: './pages/swiper-custom-controls.html',
},
{
path: 'swiper-parallax/',
url: './pages/swiper-parallax.html',
},
{
path: 'swiper-lazy/',
url: './pages/swiper-lazy.html',
},
{
path: 'swiper-pagination-progress/',
url: './pages/swiper-pagination-progress.html',
},
{
path: 'swiper-pagination-fraction/',
url: './pages/swiper-pagination-fraction.html',
},
{
path: 'swiper-zoom/',
url: './pages/swiper-zoom.html',
},
],
},
{
path: '/swipeout/',
componentUrl: './pages/swipeout.html',
},
{
path: '/tabs/',
url: './pages/tabs.html',
},
{
path: '/tabs-static/',
url: './pages/tabs-static.html',
},
{
path: '/tabs-animated/',
url: './pages/tabs-animated.html',
},
{
path: '/tabs-swipeable/',
url: './pages/tabs-swipeable.html',
},
{
path: '/tabs-routable/',
url: './pages/tabs-routable.html',
tabs: [
{
path: '/',
id: 'tab1',
content: ' \
<div class="block"> \
<p>Tab 1 content</p> \
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo suscipit temporibus sequi iure ad laboriosam accusamus?</p> \
<p>Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit blanditiis eaque exercitationem praesentium reprehenderit, fuga accusamus possimus sed, sint facilis ratione quod, qui dignissimos voluptas! Aliquam rerum consequuntur deleniti.</p> \
<p>Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque, est animi culpa modi consequatur reiciendis corporis libero laudantium sed eveniet unde delectus a maiores nihil dolores? Natus, perferendis.</p> \
</div> \
',
},
{
path: '/tab2/',
id: 'tab2',
content: '\
<div class="block"> \
<p>Tab 2 content</p> \
<p>Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus ratione cum enim voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia explicabo, unde aliquid impedit! Adipisci!</p> \
<p>Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste fugiat iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro accusantium, officiis veniam nostrum cum cumque impedit.</p> \
<p>Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad praesentium rerum libero consectetur temporibus cupiditate atque aspernatur, eaque provident eligendi quaerat ea soluta doloremque. Iure fugit, minima facere.</p> \
</div> \
',
},
{
path: '/tab3/',
id: 'tab3',
content: '\
<div class="block"> \
<p>Tab 3 content</p> \
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo suscipit temporibus sequi iure ad laboriosam accusamus?</p> \
<p>Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste fugiat iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro accusantium, officiis veniam nostrum cum cumque impedit.</p> \
<p>Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad praesentium rerum libero consectetur temporibus cupiditate atque aspernatur, eaque provident eligendi quaerat ea soluta doloremque. Iure fugit, minima facere.</p> \
</div> \
',
},
],
},
{
path: '/toast/',
componentUrl: './pages/toast.html',
},
{
path: '/toggle/',
url: './pages/toggle.html',
},
{
path: '/toolbar-tabbar/',
componentUrl: './pages/toolbar-tabbar.html',
routes: [
{
path: 'tabbar/',
componentUrl: './pages/tabbar.html',
},
{
path: 'tabbar-labels/',
componentUrl: './pages/tabbar-labels.html',
},
{
path: 'tabbar-scrollable/',
componentUrl: './pages/tabbar-scrollable.html',
},
{
path: 'toolbar-hide-scroll/',
url: './pages/toolbar-hide-scroll.html',
},
],
},
{
path: '/tooltip/',
componentUrl: './pages/tooltip.html',
},
{
path: '/treeview/',
componentUrl: './pages/treeview.html',
},
{
path: '/timeline/',
url: './pages/timeline.html',
},
{
path: '/timeline-vertical/',
url: './pages/timeline-vertical.html',
},
{
path: '/timeline-horizontal/',
url: './pages/timeline-horizontal.html',
},
{
path: '/timeline-horizontal-calendar/',
url: './pages/timeline-horizontal-calendar.html',
},
{
path: '/virtual-list/',
componentUrl: './pages/virtual-list.html',
},
{
path: '/virtual-list-vdom/',
componentUrl: './pages/virtual-list-vdom.html',
},
{
path: '/vi/',
componentUrl: './pages/vi.html',
},
// Color Themes
{
path: '/color-themes/',
componentUrl: './pages/color-themes.html',
},
// Page Loaders
{
path: '/page-loader-template7/:user/:userId/:posts/:postId/',
templateUrl: './pages/page-loader-template7.html',
// additional context
options: {
context: {
foo: 'bar',
},
},
},
{
path: '/page-loader-component/:user/:userId/:posts/:postId/',
componentUrl: './pages/page-loader-component.html',
// additional context
options: {
context: {
foo: 'bar',
},
},
},
{
path: '/master-detail/',
url: './pages/master-detail-master.html',
master: true,
detailRoutes: [
{
path: '/master-detail/:id/',
templateUrl: './pages/master-detail-detail.html',
},
]
},
// Default route (404 page). MUST BE THE LAST
{
path: '(.*)',
url: './pages/404.html',
},
];
the page where I execute the ajax and when I finish I want to address is this:
<template>
<div class="page">
<div class="navbar">
<div style="text-align: center; margin-top: 4px;"><img src="img/key.png" width="60px" /></div>
<div class="navbar-inner sliding">
<div class="left">
<a href="#" class="link back">
<i class="icon icon-back"></i>
<span class="if-not-md">Back</span>
</a>
</div>
</div>
</div>
<div class="page-content">
<div style="text-align: center; justify-content:center; margin-right:auto; margin-left:auto; width: 99%;">
<h2 style="color:#00008B;">Datos Generales</h2>
<form class="list form-store-data" id="demo-form">
<input type="hidden" id="imagenC" name="imagenC"/>
<a href="#" style="background-color: white; border: none; outline:none; width: 15%;" onclick="capturePhoto();"><img src="img/cam.png" width="50px" /></a>
<input type="image" name="smallImage" style="display:none; margin: 0 auto;margin: 0 auto; width:90px; height:120px;" id="smallImage" src="" />
<span class="span" style="font-weight: bold;">Cliente:</span>
<div id="text">
<input type="text" placeholder="Cliente" name="ncliente" id="autocomplete-dropdown-ajax" style="width: 100%;"/>
<input type="hidden" placeholder="Cliente" name="cte" id="cte" style="width: 100%;"/>
<a href="#" onclick="buscarC();" style="border: none; outline:none;"><img src="img/actu.png" width="35px" height="35px" /></a>
</div>
<br /><br />
<span class="span" style="font-weight: bold;">Nombre Comercial:</span>
<span id="text2">
<input type='text' name="ncomercial" id="ncomercial" placeholder='Nombre Comercial:' />
</span>
<span class="span" style="font-weight: bold;">Nombre del Contacto:</span>
<span id="text2">
<input type='text' name="ncontacto" id="ncontacto" placeholder='Nombre del Contacto:' />
</span>
<span class="span" style="font-weight: bold;">Teléfono:</span>
<span id="text2">
<input type='text' name="telefono" id="telefono" placeholder='Teléfono:' />
</span>
<span class="span" style="font-weight: bold;">Email:</span>
<span id="text2">
<input type='text' name="correo" id="correo" placeholder='Email:' />
</span>
<span class="span" style="font-weight: bold;">Estatus del Cliente:</span>
<span id="text3">
<input type='text' name="estatusc" id="estatusc" placeholder='Estatus del Cliente:' value="Activo"/>
</span>
<a href="#" onclick="guardarc();" style="border: none; outline:none;"><img src="img/save2.png" width="40px" /></a>
</form>
</div>
</div>
</div>
</template>
<script>
return {
on: {
pageBeforeRemove() {
var self = this;
// Destroy all autocompletes
self.autocompleteDropdownSimple.destroy();
self.autocompleteDropdownExpand.destroy();
self.autocompleteDropdownAll.destroy();
self.autocompleteDropdownPlaceholder.destroy();
self.autocompleteDropdownTypeahead.destroy();
self.autocompleteDropdownAjax.destroy();
self.autocompleteDropdownAjaxTypeahead.destroy();
self.autocompleteStandaloneSimple.destroy();
self.autocompleteStandalonePopup.destroy();
self.autocompleteStandaloneMultiple.destroy();
self.autocompleteStandaloneAjax.destroy();
},
pageInit: function () {
var self = this;
var app = self.$app;
var fruits = self.fruits;
var $ = self.$;
// Dropdown with ajax data
self.autocompleteDropdownAjax = app.autocomplete.create({
inputEl: '#autocomplete-dropdown-ajax',
openIn: 'dropdown',
preloader: true,
valueProperty: 'id', //object's "value" property name
textProperty: 'name', //object's "text" property name
limit: 3, //limit to 20 results
dropdownPlaceholderText: 'Seleccionar Cliente...',
source: function (query, render) {
var autocomplete = this;
var results = [];
if (query.length === 0) {
render(results);
return;
}
// Show Preloader
autocomplete.preloaderShow();
// Do Ajax request to Autocomplete data
app.request({
url: 'http://www.grupobennetts.com.mx/VIC/clientes_aut.php',
method: 'GET',
dataType: 'json',
//send "query" to server. Useful in case you generate response dynamically
data: {
query: query,
},
success: function (data) {
// Find matched items
for (var i = 0; i < data.length; i++) {
if (data[i].name.toLowerCase().indexOf(query.toLowerCase()) >= 0) {
results.push(data[i]);
}
}
// Hide Preoloader
autocomplete.preloaderHide();
// Render items by passing array with result items
render(results);
}
});
}
});
}
}
}
</script>
This is the ajax that saves correctly but does not address
function guardarc(){
app.preloader.show('blue');
var imagenC = $("#imagenC").val();
var file_data = $('#imagenC').val();
var form_data = new FormData();
form_data.append('imagenC', imagenC);
form_data.append('cte', $("#cte").val());
form_data.append('ncomercial', $("#ncomercial").val());
form_data.append('ncontacto', $("#ncontacto").val());
form_data.append('telefono', $("#telefono").val());
form_data.append('correo', $("#correo").val());
form_data.append('IdUsuario', $("#IdUsuario").val());
$.ajax({
type: "POST",
url: "http://www.grupobennetts.com.mx/VIC/gcedula.php",
dataType: 'html',
data: form_data ,
processData:false,
cache:false,
contentType: false,
success: function(respuesta){
var arregloR = respuesta.split('*');
var cedula = arregloR[0];
localStorage.setItem("IdCedula",cedula);
localStorage.setItem("IdCte",$("#cte").val());
app.preloader.hide();
app.router.navigate({ name: 'recorrido' });
}
});
}
and the page where I would like to address is like this … NOTE: I do not need to receive values:
<div class="page">
<div class="navbar">
<div style="text-align: center; margin-top: 4px;"><img src="img/key.png" width="60px" /></div>
<div class="navbar-inner sliding">
<div class="left">
<a href="#" class="link back">
<i class="icon icon-back"></i>
<span class="if-not-md">Back</span>
</a>
</div>
</div>
</div>
<div class="page-content">
<div style="text-align: center; justify-content:center; margin-right:auto; margin-left:auto; width: 99%;">
<h2 style="color:#00008B;">Recorrido</h2>
<br />
<input type="hidden" id="resp1" name="resp1" />
<table style="width:100%; margin: 0 auto; text-align: center; border-collapse: collapse;">
<tr>
<td><a href="#" onclick="equiposcte()" style="border: none; outline:none;"><img src="img/equip.png" width="100px" height="100px" /><br /><span style="color:#00008B; font-weight: bold;">Equipos</span></a></td>
<td><a href="/imagen/" style="border: none; outline:none;"><img src="img/imagen.png" width="100px" height="100px" /><br /><span style="color:#00008B; font-weight: bold;">Imagen</span></a></td>
</tr><tr>
<td colspan="2"><br /><br /><a href="/entrenamiento/"><img src="img/entrenamiento.png" width="100px" height="100px" /><br /><span style="color:#00008B; font-weight: bold;">Entrenamiento</span></a></td>
</tr>
</table>
<br /><br /><br /><br /><br /><br />
<div style="text-align:right;">
<a href="/productos/" style="border:none; outline:none;"><img src="img/save2.png" width="40px" /></a>
</div>
</div>
</div>
</div>
everything works very well and correct … but not the address.