Le funzioni più diffuse di jQuery convertite in Vanilla JS (ovvero native)

admin — Tue, 06 Sep 2016 08:30:35 +0000

Ormai in molti sono abituati ad utilizzare jQuery per qualsiasi manipolazione DOM o chiamata ajax, ma le stesse operazioni possono essere fatte in Vanilla JS (ovvero in modo nativo con Javascript) e quindi in modo più veloce e senza dover utilizzare librerie esterne. Vediamone alcune.

Gestione degli eventi

// jQuery $(document).ready(function() { // code })

// Vanilla document.addEventListener('DOMContentLoaded', function() { // code })

// jQuery $('a').click(function() { // code… })

// Vanilla [].forEach.call(document.querySelectorAll('a'), function(el) { el.addEventListener('click', function() { // code… }) })

Selettori

// jQuery var divs = $('div')

// Vanilla var divs = document.querySelectorAll('div')

// jQuery var newDiv = $('

')

// Vanilla var newDiv = document.createElement('div')

Attributi

// jQuery $('img').filter(':first').attr('alt', 'My image')

// Vanilla document.querySelector('img').setAttribute('alt', 'My image')

Classi

// jQuery newDiv.addClass('foo')

// Vanilla newDiv.classList.add('foo')

// jQuery newDiv.toggleClass('foo')

// Vanilla newDiv.classList.toggle('foo')

Manipolazione

// jQuery $('body').append($('

'))

// Vanilla document.body.appendChild(document.createElement('p'))

// jQuery var clonedElement = $('#about').clone()

// Vanilla var clonedElement = document.getElementById('about').cloneNode(true)

// jQuery $('#wrap').empty()

// Vanilla var wrap = document.getElementById('wrap') while(wrap.firstChild) wrap.removeChild(wrap.firstChild)

Transversing

// jQuery var parent = $('#about').parent()

// Vanilla var parent = document.getElementById('about').parentNode

// jQuery if($('#wrap').is(':empty'))

// Vanilla if(!document.getElementById('wrap').hasChildNodes())

// jQuery var nextElement = $('#wrap').next()

// Vanilla var nextElement = document.getElementById('wrap').nextSibling

Ajax GET

// jQuery $.get('//example.com', function (data) { // code })

// Vanilla var httpRequest = new XMLHttpRequest() httpRequest.onreadystatechange = function (data) { // code } httpRequest.open('GET', url) httpRequest.send()

Ajax POST

// jQuery $.post('//example.com', { username: username }, function (data) { // code })

// Vanilla var httpRequest = new XMLHttpRequest() httpRequest.onreadystatechange = function (data) { // code } httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded') httpRequest.open('POST', url) httpRequest.send('username=' + encodeURIComponent(username))

Ajax JSONP

// jQuery $.getJSON('//openexchangerates.org/latest.json?callback=?', function (data) { // code })

// Vanilla function success(data) { // code } var scr = document.createElement('script') scr.src = '//openexchangerates.org/latest.json?callback=formatCurrency' document.body.appendChild(scr)

enjoy!

(fonte)

jquery-bootgrid: come gestire la larghezza delle colonne

admin — Tue, 21 Jun 2016 09:30:51 +0000

jquery-bootgrid è un buon sostituto per datatables.net per la gestione delle tabelle con contenuti da caricare tramite ajax, senza dover ricaricare la pagina.

Sicuramente non offre tutte le caratteristiche del più famoso che ho già citato, ma è molto leggero e fa quello per cui è stato scritto.

Oggi non vi parlo di come implemetarlo (ci sono delle demo nel sito ufficiale), ma di come gestirne alcune caratteristiche, non ben documentate.

Ad esempio, è possibile gestire la larghezza delle varie colonne, associando le classiche classi di bootstrap, ma la documentazione non offre una guida adeguata.

Veniamo al sodo. Per gestire la larghezza di una colonna, si può usare l’attributo data-header-css-class con la classe relativa alla larghezza (es col-sm-2).

Questo un esempio:


    
      
        Totali nel DB
        Da aggiornare
        Errori nel DB
        Rows Tot/Add/Upd/Err
        Tempo
        Ts
        TS

In questo esempio, la colonna tsi avrà larghezza col-sm-2.

Ricapitolando, a differenza di quanto scritto nella documentazione, il nome degli attributi non è nel formato:

data-camelCase=

bensì nel formato:

data-camel-case=

Questi alcuni tra gli attributi più utili:

data-column-id // non data-id come indica la documentazione
    data-identifier
    data-converter
    data-header-align // [sic], data-headerAlign fallisce in JQuery 1.5+
    data-css-class // come sopra
    data-header-css-class // come sopra
    data-formatter
    data-order
    data-searchable
    data-sortable
    data-visible
    data-visible-in-selection // come sopra
    data-width