[SOLVED] After saving address to page

this code works correctly… my problem is

function searchC(){
    var cte = $("#autocomplete-dropdown-ajax").val();
    var datos = "cte=" + cte+"&insert=";
    $.ajax({
        type: "POST",
        url: "http://www.grupobennetts.com.mx/VIC/clientes.php",
        data: datos,
        success: function(data){
           $("#respuesta").val(data)
           var  da = data;
           var arregloDeSubCadenas = da.split('-');
            $("#autocomplete-dropdown-ajax").val(arregloDeSubCadenas[0] + "  " + arregloDeSubCadenas[1]);
            $('#ncomercial').val(arregloDeSubCadenas[2]);
            $('#ncontacto').val(arregloDeSubCadenas[3]);
            $('#telefono').val(arregloDeSubCadenas[4]);
            $('#correo').val(arregloDeSubCadenas[5]);
            $('#estatusc').val(arregloDeSubCadenas[6]);
            $('#cte').val(arregloDeSubCadenas[0]);
        }
window.location.href = "menue.html";
    });
}

when I finish the code I do not know how to address to the next page … try …
window.location.href = "menue.html";

but not work…

You have to use f7 router.
router.navigate(url, options)
Here is the doc:
https://framework7.io/docs/view.html#router-api-methods-properties

Hi, I’ve tried it but it tells me that it does not recognize the function …
in fact the console tells me that the function is not declared … because it does not find the library? … or are you going to give me a complete example?

the consol show…

Uncaught ReferenceError: router is not defined

You have to prepend the variable where you saved your Framework7 instance. So if you’ve initialized Framework7 like this:

var MyApp = new Framework7({
  ...
})

Then your navigate command will be like this:

MyApp.router.navigate(...

thanks for the answer … I’ve tried it as you told me but now it shows the following error: …

Undetected error: Framework7: Router methods are not allowed in the global application router. Use the router methods only in the related view, for example, app.views.main.router.navigate (...)

already try for example

app.views.main.router.navigate (/ menue /) ;

but simply the page stays there without showing error and does not direct me to where I would like… and the nex page div class is:

<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>
</div>

can you show your routes?

my Routes is:

    var routes = [
        
      // Index page
      {
        path: '/',
        url: './index.html',
        name: 'home',
      },
{
    path: '/menue/',
    url: './pages/menue.html',
    name: 'menue',
  },
]

sry for the late reply. im kind of busy.

Ok, your routes seems fine.

can you share more code, the js part also. maybe its something wrong there

Do not worry about the delay … it’s just the whole code that I’ve put up and this … will you know another method that can go to the other page?

i meant the app layout, where you have your view. where you call router.navigate, etc

@Luis_Daniel_Morales we need more details to see your app structure, so we can advice you what to call correctly. So please show the content of the file where you do a search function, and content of the file where you call new Framework7(...), and also would be great if you can show content of your index.html file

@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.

should be changed to

app.views.main.router.navigate('/recorrido/');

I see you created your app from Kitchen Sink. It is not really good, as it for demo purpose. It is better to create project with Framework7 CLI

Hello, thank you very much, it has worked for me … I’ve been iterating a lot about this version of the version … how do I do it to join the Framework7 CLI?

You need to create new F7 CLI project, and then carefully copy-past your code to generated project. There is no smooth migration process

thank you for you supporting