[SOLVED] Ajax Data - Table & autocompleter in same page

Hello… my problem is:

I have a data-table after a autocompleter which when I save a record both the table and the autocompleter work correctly … however if I refresh the page the table shows the data without respecting the <td> of the table … remove the autocompletaor and refrescar the page works well … but it does not work correctly with the autocompletador … I put the code of the whole page …

<template>
    <div class="view view-main view-init safe-areas">
        <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="subnavbar">
                <form data-search-container=".search-list" data-search-in=".item-title" class="searchbar searchbar-init">
                <div class="searchbar-inner">
                    <div class="searchbar-input-wrap">
                        <input type="search" name="NuevoP" placeholder="Buscar Producto" id="autocomplete-dropdown-ajax"/>
                        <i class="searchbar-icon"></i>
                        <span class="input-clear-button"></span>
                    </div>
                    <span class="searchbar-disable-button if-not-aurora">Cancel</span>
                </div>
                </form>
            </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;">Nuevos Productos</h2>
                    <img src="img/Imagen2.png" style="border: none; outline:none;" width="70px" />
                    <span class="span" style="font-weight: bold;">Uso del Producto:</span>
                    <span id="text2">
                        <input type='text' id="usop"  name="usop" placeholder='Uso del Producto:'/>
                    </span>
                    <!-- Start Data - Table -->
                    <br />
                    <div class="block-title">Registros Guardados</div>
                    <div class="card data-table">
                        <table id ="tablaPNvo">
                            <thead>
                                <tr>
                                    <th class="numeric-cell">Código</th>
                                    <th class="numeric-cell">Descripción</th>
                                    <th class="numeric-cell">Uso</th>
                                </tr>
                            </thead>
                            <tbody id="prodNew">
                        
                        
                            </tbody>
                        </table>
                    </div>
                    <br />
                <table style="width:100%; margin: 0 auto; text-align: center;  border-collapse: collapse;">
                <tr>
                <td style="text-align: left;"><a href="#" class="link back" style="border: none; outline:none;"><img src="img/save2.png" width="40px" /></a></td>
                <td style="text-align: right;"><a href="#" onclick="GuardarNuevoP()" style="border: none; outline:none;"><img src="img/plus.png" width="40px" /></a></td>
                </tr>
                </table>
                </div>
            </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, //enable preloader
          /* If we set valueProperty to "id" then input value on select will be set according to this property */
          valueProperty: 'id', //object's "value" property name
          textProperty:  'name', //object's "text" property name
           //$("#cte").val(valueProperty); 
          /*
           valueProperty: "ID", //object's "value" property name
                    textProperty: "Name", //object's "text" property name
          */
          limit: 3, //limit to 20 results
          dropdownPlaceholderText: 'Seleccionar Producto...',
          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/productos.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].id +"  - "+data[i].name);  
                  }
                }
                // Hide Preoloader
                autocomplete.preloaderHide();
                // Render items by passing array with result items
                render(results);
                
              }
            });
            
          }
        
        });
          
          
        var icedula = localStorage.getItem("IdCedula");
         app.request.get('http://www.grupobennetts.com.mx/VIC/conNewProd.php', {Iced: icedula }, function (data) {
            var content = JSON.parse(data);
            for(var x = 0; x < data.length; x++) {
            
                $("#tablaPNvo #prodNew").append("<tr><td>" + content[x].IdPrd + "</td><td>" + content[x].Descripcion + "</td><td>"+ content[x].Uso + "</td></tr>");
            }  
        });  
          
          
        }// END PAGE INIT
        }
}
</script>

thank you.

Didn’t get the issue, didn’t get what is exactly not working?

First of all remove all unused code from Kitchen Sink, you call so many destroy() in pageBeforeRemove -> it will cause an error.

If issue still there then would be good to see live example or screenshots or video of what is happening

that’s ok, it’s worked!! after removing what he told me … the error was that he was bringing the data to my table and the data by what I see … but it has worked