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.