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


#1

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.


#2

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


#3

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