Node library implementation - Page 2

Node library implementation

2»

Answers

  • DesarrolloPRECDesarrolloPREC Posts: 34Questions: 4Answers: 0

    Allan

    One detail that we founded in the impelementation of DataTables and Editor

    We fortgot to tell you some particular ways to implement

    1) In the index.html in the Ionic framework, we putted all the script librarys that call or make refernce to the datattables and edior and in the ts component class works as we indicated in the above aswer

      <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
      <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
      <script type="text/javascript" src="./assets/js/plugins/DataTables/DataTables-1.10.16/js/jquery.dataTables.min.js"></script>
      <script type="text/javascript" src="./assets/js/plugins/DataTables/DataTables-1.10.16/js/dataTables.bootstrap4.min.js"></script>
      <script type="text/javascript" src="./assets/js/plugins/DataTables/Editor-1.7.2/js/dataTables.editor.min.js"></script>
      <script type="text/javascript" src="./assets/js/plugins/DataTables/Editor-1.7.2/js/editor.bootstrap4.min.js"></script>
    

    TS class

    import { Component } from '@angular/core';
    import { IonicPage, NavController, NavParams, Config } from 'ionic-angular';
     
    /**
     * Generated class for the AerolineaPage page.
     *
     * See https://ionicframework.com/docs/components/#navigation for more info on
     * Ionic pages and navigation.
     */
     
    @IonicPage()
    @Component({
      selector: 'page-aerolinea',
      templateUrl: 'aerolinea.html',
    })
    export class AerolineaPage {
     ...
         onInitEditor() {
            //set DataTable...
            this.table = $(this.tableId);
            //instance Editor...
            this.editor = new this.table.DataTable.Editor({
                ajax: this.getRestAjaxAerolinea(),
                table: this.tableId,
                fields: this.getFields(),
                template: '#form-informe'
            });
        }
    ...
    }
    

    2) We remove from index.thml in the Ionic framewor all script librarys and we begun to call reference with de 'import' word, and this type of call to the editor doesn't work as we menttioned before

    import { Component } from '@angular/core';
    import { IonicPage, NavController, NavParams } from 'ionic-angular';
    
    import $ from 'jquery'; //works
    import 'datatables.net'; //works
    import 'datatables.net-editor' //-> this line trigger "jQuery is not defined"
    
    /**
     * Generated class for the AerolineaPage page.
     *
     * See https://ionicframework.com/docs/components/#navigation for more info on
     * Ionic pages and navigation.
     */
     
    @IonicPage()
    @Component({
      selector: 'page-aerolinea',
      templateUrl: 'aerolinea.html',
    })
    export class AerolineaPage {
    .
    .
    .
    }
    

    Any import of editor causes error

    Please, give us your help, thanks

    Regards

  • DesarrolloPRECDesarrolloPREC Posts: 34Questions: 4Answers: 0

    Thanks Allan

    We are advancing in our projet with nodejs and editor...

    Just one more question... in reference to uploadfiles. It tokes some time to resolve delete files. In the interface you putt a button with X to remove files, but it is not attach a event that we can controlled remove each one file.

    To resolve this inconvenent, we putted in the event of field upload a event that can controll it. To resume this the little code

    //every time we upload always set a evento to attach to button X to remove file
    $(editor.field('fiels').input()).on('upload.editor', function(e, val) {
     $('button.remove').click((e)=> {
        let id = $(e.currentTarget).closest('li').find('a').attr('data-value');
       //continue with the code to delete a file by id
     });
    })
    

    We made this kind of code because the event dessapear every time that one file is uploaded, and we need to set again the event for that not dessapear.

    The cuestion is, It's correct that we are making?, can you put a event directly to the button X to remove file?

    Thanks for your support
    Regards

  • DesarrolloPRECDesarrolloPREC Posts: 34Questions: 4Answers: 0

    Allan

    One detail that we founded in the impelementation of DataTables and Editor

    We fortgot to tell you some particular ways to implement

    1) In the index.html in the Ionic framework, we putted all the script librarys that call or make refernce to the datattables and edior and in the ts component class works as we indicated in the above aswer

      <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
      <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
      <script type="text/javascript" src="./assets/js/plugins/DataTables/DataTables-1.10.16/js/jquery.dataTables.min.js"></script>
      <script type="text/javascript" src="./assets/js/plugins/DataTables/DataTables-1.10.16/js/dataTables.bootstrap4.min.js"></script>
      <script type="text/javascript" src="./assets/js/plugins/DataTables/Editor-1.7.2/js/dataTables.editor.min.js"></script>
      <script type="text/javascript" src="./assets/js/plugins/DataTables/Editor-1.7.2/js/editor.bootstrap4.min.js"></script>
    

    TS class

    import { Component } from '@angular/core';
    import { IonicPage, NavController, NavParams, Config } from 'ionic-angular';
     
    /**
     * Generated class for the AerolineaPage page.
     *
     * See https://ionicframework.com/docs/components/#navigation for more info on
     * Ionic pages and navigation.
     */
     
    @IonicPage()
    @Component({
      selector: 'page-aerolinea',
      templateUrl: 'aerolinea.html',
    })
    export class AerolineaPage {
     
        private editor: any;
        private table: any;
        private oTable: any;
     
      constructor(public navCtrl: NavController,
        public navParams: NavParams,
        public config:Config) {
      }
     
      private getColumns() {
        return [
            {           
                title: 'Name',
                data: 'aer_name'
            }
        ]
      };
     
      onInitEventsDt() {
          this.oTable.on('click', 'tr', (e) => {
            let data = this.oTable.row(e.currentTarget).data();
            console.log(data);
          });
      }
     
      ionViewDidLoad() {
        this.table = $('#tAerolinea');
        this.oTable = this.table.DataTable({
            ajax: 'http://dirserver/aerolinea/list',
            select: true,
            columns: this.getColumns()
        });
        //init events Dt...
        this.onInitEventsDt();
      }
     
    }
    

    2) We remove from index.thml in the Ionic framewor all script librarys and we begun to call reference with de 'import' word, and this type of call to the editor doesn't work as we menttioned before

    import { Component } from '@angular/core';
    import { IonicPage, NavController, NavParams } from 'ionic-angular';
    
    import $ from 'jquery'; //works
    import 'datatables.net'; //works
    import 'datatables.net-editor' //-> this line trigger "jQuery is not defined"
    
    /**
     * Generated class for the AerolineaPage page.
     *
     * See https://ionicframework.com/docs/components/#navigation for more info on
     * Ionic pages and navigation.
     */
     
    @IonicPage()
    @Component({
      selector: 'page-aerolinea',
      templateUrl: 'aerolinea.html',
    })
    export class AerolineaPage {
    .
    .
    .
    }
    

    Any import of editor causes error

    Please, give us your help, thanks

    Regards

  • DesarrolloPRECDesarrolloPREC Posts: 34Questions: 4Answers: 0

    Allan

    One detail that we founded in the impelementation of DataTables and Editor

    We fortgot to tell you some particular ways to implement

    1) In the index.html in the Ionic framework, we putted all the script librarys that call or make refernce to the datattables and edior and in the ts component class works as we indicated in the above aswer

      <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
      <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
      <script type="text/javascript" src="./assets/js/plugins/DataTables/DataTables-1.10.16/js/jquery.dataTables.min.js"></script>
      <script type="text/javascript" src="./assets/js/plugins/DataTables/DataTables-1.10.16/js/dataTables.bootstrap4.min.js"></script>
      <script type="text/javascript" src="./assets/js/plugins/DataTables/Editor-1.7.2/js/dataTables.editor.min.js"></script>
      <script type="text/javascript" src="./assets/js/plugins/DataTables/Editor-1.7.2/js/editor.bootstrap4.min.js"></script>
    

    TS class

    import { Component } from '@angular/core';
    import { IonicPage, NavController, NavParams, Config } from 'ionic-angular';
     
    /**
     * Generated class for the AerolineaPage page.
     *
     * See https://ionicframework.com/docs/components/#navigation for more info on
     * Ionic pages and navigation.
     */
     
    @IonicPage()
    @Component({
      selector: 'page-aerolinea',
      templateUrl: 'aerolinea.html',
    })
    export class AerolineaPage {
     
        private editor: any;
        private table: any;
        private oTable: any;
     
      constructor(public navCtrl: NavController,
        public navParams: NavParams,
        public config:Config) {
      }
     
      private getColumns() {
        return [
            {           
                title: 'Name',
                data: 'aer_name'
            }
        ]
      };
     
      onInitEventsDt() {
          this.oTable.on('click', 'tr', (e) => {
            let data = this.oTable.row(e.currentTarget).data();
            console.log(data);
          });
      }
     
      ionViewDidLoad() {
        this.table = $('#tAerolinea');
        this.oTable = this.table.DataTable({
            ajax: 'http://dirserver/aerolinea/list',
            select: true,
            columns: this.getColumns()
        });
        //init events Dt...
        this.onInitEventsDt();
      }
     
    }
    

    2) We remove from index.thml in the Ionic framewor all script librarys and we begun to call reference with de 'import' word, and this type of call to the editor doesn't work as we menttioned before

    import { Component } from '@angular/core';
    import { IonicPage, NavController, NavParams } from 'ionic-angular';
    
    import $ from 'jquery'; //works
    import 'datatables.net'; //works
    import 'datatables.net-editor' //-> this line trigger "jQuery is not defined"
    
    /**
     * Generated class for the AerolineaPage page.
     *
     * See https://ionicframework.com/docs/components/#navigation for more info on
     * Ionic pages and navigation.
     */
     
    @IonicPage()
    @Component({
      selector: 'page-aerolinea',
      templateUrl: 'aerolinea.html',
    })
    export class AerolineaPage {
    .
    .
    .
    }
    

    Any import of editor causes error

    Please, give us your help, thanks

    Regards

  • allanallan Posts: 54,579Questions: 1Answers: 8,533 Site admin

    Yes sorry about that. Not sure why, but your post was caught by the spam filter. I've marked your account so that won't happen again.

    The error you are seeing suggests that the UMD is falling through to the browser loader:

        if ( typeof define === 'function' && define.amd ) {
            // AMD
            // @jscrambler disable *
            define( ['jquery', 'datatables.net'], function ( $ ) {
                return factory( $, window, document );
            } );
        }
        else if ( typeof exports === 'object' ) {
            // CommonJS
            // @jscrambler disable *
            module.exports = function (root, $) {
                if ( ! root ) {
                    root = window;
                }
    
                if ( ! $ || ! $.fn.dataTable ) {
                    $ = require('datatables.net')(root, $).$;
                }
    
                return factory( $, root, root.document );
            };
        }
        else {
            // Browser
            factory( jQuery, window, document );
        }
    

    Could you confirm if that is where the code is breaking?

    Allan

  • DesarrolloPRECDesarrolloPREC Posts: 34Questions: 4Answers: 0

    Allan

    Sorry for late answer

    We made a trace of editor code and found that break into line 1382

    dataTables.editor.js

    (function(window, document, $, DataTable) {
    

    and into trace of ionic ion-dev file trigger the error: "jQuery is not defined"

        window.onerror = function(msg, url, lineNo, columnNo, error) {
          self.handleError(error);
        };
    

    Thanks for your help

    Regards

  • allanallan Posts: 54,579Questions: 1Answers: 8,533 Site admin

    I didn't really expect it to break on that line. Can you give me a link to your page / app so I can try debugging it please?

    Allan

  • DesarrolloPRECDesarrolloPREC Posts: 34Questions: 4Answers: 0

    Allan

    Sorry for late answer. We are continue development our project as we mentioned to you, through call all js librarys in the index.html page and not through ts import class.

    We hope, that we put a test app in the web and that you could helpus.

    Thanks

This discussion has been closed.