IT Knowledge

AJAX Consolidation In a different js var data_service = function () {    ajaxService = function () {      return $.ajax({        url : "",        data : {}      })    }  return {     ajaxService : ajaxService,    ajaxService2 : ajaxService   } }(); Multiple Calls $.when( ajaxService, ajaxService2 )   .done( function(ajax_data, ajax_data2 ){         var  result = ajax_data[0];   }) Apply To pass an array var promises = [ajaxService, ajaxService2] $.when.apply($, promises); Other example   var   requests  = [              this . load_graph_lte ( "dashboard_LTE_KPI" ,  'main' ,  'LTE_RRC_Setup_SR' ),              this . load_gra...

 Custom Events Trigger event parameter = ["a","b"]; $(document).trigger("event_name", [paramenter]) Catch event $(document).on("event_name", function(e, parameter){ })

Tricks In the console, select an element and type: jQuery._data($0,"events") Load events before documents ready $('document').on("click", "selector", function(){ }); Namespace $('element_filter').on('focus.namespace blur.namespace'), function (event){ }) $('element_filter').off('namespace'); Just-in-time inizialization $('document').on('focus', "input.date:not(.hasDatePicker)" ,  function(e){     $(this).initialize_function(); })

Event .delegate() .clearQueue() // remove the pending functions of be run .serialize() // creates a URL encoded text string by serializing form values. .serializeArray() .stopPropagation()  // dont tell parents .stopImmediatePropagation() // dont tell siblings jqXHR object is the return of an AJAX function .noConflict() // return the use of $ jQuery( document ).ready( function ( $ ) { // Code that uses jQuery's $ can follow here. }); .bind()    associate this context to an event .on(click, function(e){   e.originalEvent   //== "Human" // determine if was done by a "Human" }) CDN How to load jquery from CDN and locally in case of failure <script>    window.jQuery ||  document.wirte(" <script src=".../jquery.js">  </scritp>"); </script> Custom Selector $.extend( $.exp[":"] , {       function_name : function (element){   ...

Start JQuery $(document).ready(  fucntion(){ }); Selectors Direct children $(''.class > li "); First $(''.class  li :first "); Last $(''.class  li :last  "); Odd / Even $(''.class  li :odd  "); $(''.class  li :even  "); Filter by traversing Find, looks in descendants $(''class"). find("li") ; Closest .closest() Filter $('#element').filter(' .element'); First $(''li"). first() ; Last $(''li"). last() ; Walking in the DOM $(''li"). first().next().prev() ; $(''li"). first().parent() ; $(''.class"). children("li") ;   direct children Append Fastest way .append()      Insert as last child .prepend()      Insert as the first child .insertBefore() .insertAfter() .appendsTo() $('<p> new element </p>') .appendsTo ( $('#des...

Ajax with Axios handleSubmit = async (event) => {     event.preventDefault();     const resp = await axios.get(`https://api.github.com/users/${this.state.userName}`);     console.log(       resp.data     );   }; Passing Information class Form extends React.Component {   state = { userName : '' }   handleSubmit = async (event) => {     event.preventDefault();     const resp = await axios.get(`https://api.github.com/users/${this.state.userName}`);     this.props.onSubmit(resp.data);   }; ..... class App extends React.Component {   state = {     profiles : [],   };   addNewProfile = (profileData) => {     this.setState( prevState => ({       profiles : [...prevState.profiles, profileData],      }));   };    render() {   return (     <...

Handler class Form extends React.Component {   handleSubmit = () => {     event.preventDefault();   };      render(){   return(     <form action="" onSubmit={this.handleSubmit} >       <input type="text" placeholder="type"/>       <button>Send</button>     </form>     );   } }; Reference class Form extends React.Component {   userInput = React.createRef();   handleSubmit = (event) => {     event.preventDefault();     console.log(       this.userInput.current.value     )   };      render(){   return(     <form action="" onSubmit={this.handleSubmit}>       <input type="text" placeholder="type" r ef={this.userInput} />       <button>Send</button>     </form...

Constructor const testData = [ {name: "Dan Abramov", avatar_url: "https://avatars0.githubusercontent.com/u/810438?v=4", company: "@facebook"},       {name: "Sophie Alpert", avatar_url: "https://avatars2.githubusercontent.com/u/6820?v=4", company: "Humu"}, ]; class App extends React.Component {   constructor(props){     super(props);     this.state = {       profiles: testData,     };   } // Another option state = {     profiles : testData,   };   render() {   return (     <div>       <div className="header">{this.props.title}</div>         <Form />         <CardList profile={this.state.profiles}/>             </div>     );   } } Other option s

Passing Parameters const testData = [ {name: "Dan Abramov", avatar_url: "https://avatars0.githubusercontent.com/u/810438?v=4", company: "@facebook"},       {name: "Sophie Alpert", avatar_url: "https://avatars2.githubusercontent.com/u/6820?v=4", company: "Humu"},   {name: "Sebastian Markbåge", avatar_url: "https://avatars2.githubusercontent.com/u/63648?v=4", company: "Facebook"}, ]; const CardList = (props) => (      <div>     //Iterate over array     {testData.map( profile => <Card {...profile} /> )}     <Card {...testData[0]}/>   </div>       ) class Card extends React.Component { render() {          const profile = this.props;        return (     <div className="github-profile">       <img src={profile.avatar_url} />         ...

Initial Structure ReactDOM.render( <div className="header">'ad'</div>,   mountNode, ); Function component const App = ( {title} ) => (   <div className="header">{title}</div> ); ReactDOM.render( <App title="The GitHub Cards App" />,   mountNode, ); Class Component class App extends React.Component {   render(){   return(     <div className="header">{this.props.title}</div>     );   } }; ReactDOM.render( <App title="The GitHub Cards App" />,   mountNode, ); Extends class Card extends React.Component { render() {   return (     <div className="github-profile">       <img src="https://placehold.it/75" />         <div className="info">           <div className="name">Name here...</div>           <...

SocketIO Install pip install flask - socketio In the controller @socketio.on('message', namespace='/socket') def handleMessage(msg): print('message: ' + msg) send(msg, broadcast=True) In the view Add the scripts <script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js" integrity="sha256-yr4fRk/GU1ehYJPAs8P4JlTgu0Hdsp4ZKrx8bDEDC3I=" crossorigin="anonymous"></script> <script type="text/javascript" charset="utf-8"> $(document).ready(function() { var socket = io.connect('http://127.0.0.1:5000/socket'); socket.on('connect', function() { socket.send('User connected!'); // socket.emit('my event', {data: 'I\'m connected!'}); }); socket.on('message',function(msg){ $('#messages').append('<li>'+msg+'</li>'); console.log('Received...

SQL Server pip install pypyodbc In the Controller connection = pypyodbc.connect('Driver={SQL Server};Server=146.250.116.48;Database=ICT_dev;uid=sa;pwd=9q&oespTools') cursor = connection.cursor() sql = ("Insert into Ticket (signum, name) values (?,?)") values = [signum,name] cursor.execute(sql, values) connection.commit() Other method import urllib params = urllib.parse.quote_plus("DRIVER={SQL Server Native Client 10.0};SERVER=146.250.116.48;DATABASE=ICT_dev;UID=sa;PWD=9q&oespTools") app.config['SQLALCHEMY_DATABASE_URI'] = "mssql+pyodbc:///?odbc_connect=%s" % params

Relationship Update the Model backref='engineer'   the name of the object to do the relationship lazy -  how to load relationships lazy = 'select'  (default) lazy = 'join' lazy = 'subquery' lazy = 'dynamic' from datetime import datetime from sqlalchemy import desc from ict import db class Ticket(db.Model): id = db.Column(db.Integer, primary_key=True) signum = db.Column(db.String(10), nullable=True) comments = db.Column(db.String(255), nullable=True) engineer_id = db.Column(db.Integer, db.ForeignKey('engineer.id'), nullable=False) @staticmethod def newest(num): return Ticket.query.order_by(desc(Ticket.signum)).limit(num) def __repr__(self): return "<Ticket '{}' : '{}'> ".format(self.signum, self.comments) class Engineer(db.Model): id = db.Column(db.Integer, primary_key=True) signum = db.Column(db.String(10), unique=True) name = db.Column(db.String(100), nullabl...

Scripts & Migrate Install Scripts pip install flask-script New file to create and delete DB in root level create manaage.py @manager.command enable the method from the console  from ict import app, db from flask_script import Manager, prompt_bool from ict import db from model import Engineer manager = Manager(app) @manager.command def initdb(): db.create_all() db.session.add(Engineer(signum="erodvel", name="Rod")) db.session.commit() print ('Iniatialized DB') @manager.command def dropdb(): if prompt_bool("Are you want to clear DB"): db.drop_all() print ('Dropped the DB') if __name__ == '__main__': manager.run() In the console Type python manager.py to show all the commands dropdb initdb python manager.py dropdb python manager.py runserver    -  starts the server Add register. python from ict import db from model import Engineer db.session.add(Engineer(...

Sqlalchemy Install In the environment pip install flask-sqlalchemy Create model Create file in root path to define the class. Ex. model.py from datetime import datetime from ict import db class Ticket(db.Model): id = db.Column(db.Integer, primary_key=True) signum = db.Column(db.String(10), nullable=True) comments = db.Column(db.String(255), nullable=True) Add methos to do the queries        @staticmethod def  newest (num): return Ticket.query.order_by(desc(Ticket.signum)). limit (num) def __repr__(self): return "<Ticket '{}' : '{}'> ".format(self.signum, self.comments) Option in query .limit .first_or_404() .get_or_404() SQLITE In the console at environment python  from ict import db     ict is the controller ict.py from model import Ticket     refers to the file model.py where the class is define db.create_all()   create DB Controller Import import os...

Macro Create the macro {% macro render_field(field) %} <tr {% if field.errors %} class="error" {% endif %}> <td>{{ field.label }}</td> <td>{{ field(**kwargs)|safe}}</td> </tr> <tr class="error"> <td></td> <td> <ul> {% for error in field.errors %} <li>{{ error }}</li> {% endfor %} </ul> </td> </tr> {% endmacro %} In the view Import the macro by the name {% from "form_macro_file_name.html" import render_field%} Use the macro <form action="" method="POST">     {{form.hidden_tag()}}         <table>             {{ render_field(form.signum, size=10) }}             {{ render_field(form.comments, size=50) }}             <tr class="submit">               ...

Flask WTF Install pip install flask-wtf Create form Create file in root path Ex. survey_form.py from flask_wtf import Form from wtforms.fields import StringField # from flask.ext.wtf.html5 import URLField from flask_wtf.html5 import URLField from wtforms.validators import DataRequired, url class SurveyForm(Form): signum = StringField('signum') comments = StringField('comments') url = URLField('url', validators=[DataRequired(), url()]) In controller  app.py  Import the Form, it takes the file name from survey_form import SurveyForm @app.route('/survey_wtf', methods=['GET', 'POST'] ) def survey_wtf(): form = SurveyForm() if form.validate_on_submit(): # url = form.url.data signum = form.signum.data comments = form.comments.data flash("Survey answered from '{}'".format(signum)) else : flash("Error") return render_template(...

FORMS Imports from flask import Flask, render_template, url_for, request, redirect Method @app.route('/survey', methods=['GET', 'POST'] ) def survey(): if request.method == "POST": signum = request.form['signum']                 return redirect( url_for('method_url') ) return render_template('survey.html', title_obj=Title()) Redirect                 return redirect( url_for('method_url') ) LOGGER Import from logging import DEBUG Use app.logger.debug('message') DATETIME Import from datetime import datetime Use datetime.utcnow() Session and Flashes Session Need Flask.secret_key for cookies Generate Flask.secret_key  In console: python imoprt os os.urandom(24) copy the key In controller app.config['SECRET_KEY'] = "_________KEY_________" Flashing messages Import from flask import Fl...