Χρειάστηκε πριν λίγες μέρες να συμπληρώσω κάποιες αιτήσεις με λίγα στοιχεία αλλά αρκετή χαρτούρα. Τα ίδια πράγματα να συμπληρώνονται 32 φορές σε 256 διαφορετικά έντυπα με 1024 διαφορετικούς τρόπους. Ο παράδεισος του χαρτογιακά και η κόλαση οποιουδήποτε άλλου.

Πριν ξεκινήσω ανοιχτό πόλεμο με το χαρτοβασίλειο είπα να δοκιμάσω αρχικά  να φτιάξω μια απλή φόρμα που να δημιουργεί ένα άλλο συμπληρωμένο έντυπο. (το οποίο είναι λιγότερο σημαντικό και ως τέτοιο ο καθένας βαριέται να το συμπληρώσει μέχρι να έρθει η ώρα που κάποιος θα το ζητήσει. Αυτή την ώρα θα ψάχνεις να βρεις κάποιο παλιό έγγραφο που είχε συμπληρώσει κάποιος άλλος, να αλλάξεις τα 2 ή 3 σημεία που θέλεις και να το εκτυπώσεις για να το δώσεις.

Ξεκινώντας να φτιάξω αυτή τη φόρμα θυμήθηκα ότι είχα δει μια καλή ιδέα στο codrops για φόρμες σε φυσική γλώσσα.

Πήρα τον κώδικα από το παράδειγμα, άλλαξα το κείμενο, ετοίμασα το template για να δημιουργείται το έγγραφο σε word document μορφή συμπληρωμένο με τα στοιχεία και πέρα από μερικά προβλήματα στην ονοματοδοσία του αρχείου ήταν σχεδόν έτοιμο. Το μόνο που χρειαζόταν ακόμα ρύθμιση ήταν δύο select elements που έπρεπε να συνδεθούν, ώστε όταν αλλάζει η επιλογή στο ένα να αλλάζει και το άλλο αντίστοιχα.

Ο κώδικας που υπήρχε στο codrops δεν το υποστήριζε (προφανώς επειδή δεν χρειαζόταν αφού το συγκεκριμένο παράδειγμα αφορά κυρίως styling του UI και όχι λειτουργικές απαιτήσεις), οπότε ήταν απαραίτητο να γίνουν κάποιες ρυθμίσεις.

Πρώτα απ’ όλα πρόσθεσα το id attribute στα selects, ώστε να μπορώ να ταυτοποιήσω τα πεδία που θέλω να συνδέσω. Μετά χρειαζόμουν κάτι, να κρατάει με ποιο άλλο πεδίο γίνεται η σύνδεση. Το πιο απλό ήταν να μπει ένα custom attribute, οπότε έβαλα το link-id για να δείχνει (κάπως) ότι θα κρατά το id κάποιου άλλου συνδεδεμένου πεδίου.

Οπότε ο κώδικας

<select name="starttime">
    <option value="07:00">07:00</option>
    <option value="07:30" selected="selected">07:30</option>
    ...

έγινε

<select id="starttime" name="starttime" link-id="leavetime">
    <option value="07:00">07:00</option>
    <option value="07:30" selected="selected">07:30</option>
    ...

Οι επόμενες αλλαγές πλέον αφούν τον javascript κώδικα στο αρχείο nlform.js ώστε να αξιοποιήσει αυτά τα attributes που προστέθηκαν.

Η πρώτη αλλαγή αφορά τη δημιουργία των custom dropdown elements. Εκεί, προστέθηκε μια κλήση στην _createItemExtended().

_createDropDown : function() {
    ...
    this.elOriginal.parentNode.insertBefore( this.fld, this.elOriginal );
    this.elOriginal.style.display = 'none';

    //Added call to _createItemExtended();
    this._createItemExtended();
},

Η δεύτερη αλλαγή αφορά την ενημέρωση των πεδίων όταν κλείνουν τα custom πεδία αφού έχουν συμπληρωθεί. Εδώ μας ενδιαφέρουν και πάλι μόνο τα dropdowns και όχι τα inputs, οπότε προστέθηκε μια κλήση στην _updateLinkedItem() στο σημείο που κλείνουν τα dropdowns.

close : function( opt, idx ) {
    ...
    if( this.type === 'dropdown' ) {
        if( opt ) {
            ...
            this.selectedIdx = idx;
            // update original select element´s value
            this.elOriginal.value = this.elOriginal.children[ this.selectedIdx ].value;

            //Added call to _updateLinkedItem();
            this._updateLinkedItem();
        }
    }
    else if( this.type === 'input' ) {
    ...
    }
},

Ο λόγος που δημιουργήθηκαν νέες functions αντί να μπεί χύμα ο κώδικας είναι για να είναι πιο καθαρές οι αλλαγές.

Το μόνο που μένει πλέον είναι να συμπληρωθούν αυτές οι νέες functions που κάνουν τη “χαμαλοδουλειά”.

_createItemExtended : function () {
    if (this.elOriginal.attributes.hasOwnProperty('id')) {
        this.toggle.id = this.elOriginal.id;
        this.elOriginal.attributes.removeNamedItem('id');
    }
},
_updateLinkedItem : function() {
    if (this.elOriginal.attributes.hasOwnProperty('link-id')) {
        var linkId = this.elOriginal.attributes['link-id'].value;
        var len = this.form.fields.length;
        for (var i = 0; i<len; i++) {
            if (this.form.fields[i].toggle.id == linkId) {
                this._selectIndex( this.form.fields[i], this.selectedIdx );
                break;
            }
        }
    }
},
_selectIndex : function( opt, idx ) {
 opt.optionsList.children[ opt.selectedIdx ].className = '';
 opt.optionsList.children[ idx ].className = 'nl-dd-checked';
 opt.toggle.innerHTML = opt.optionsList.children[ idx ].innerHTML;
 opt.selectedIdx = idx;
 opt.elOriginal.value = opt.elOriginal.children[ opt.selectedIdx ].value;
}

Το εκνευριστικό (ναι, δεν έχω συνηθίσει ακόμα την αρρώστια να κάνει ο κάθε browser και η κάθε έκδοση τα δικά του) είναι ότι ενώ ο chrome και ο firefox δούλευαν σωστά, ο IE στα συνδεδεμένα dropdowns έχανε το name attribute, οπότε οι τιμές των αντίστοιχων πεδίων ποτέ δεν γίνονταν post στη σελίδα και το έγγραφο που συμπληρώνονταν από το template ήταν ημιτελές. Αν και η αρχική μου σκέψη ήταν “δεν &$#*&%@ πειράζει, θα χρησιμοποιώ chrome ή firefox”, τελικά ένας συνάδελφος που χρησιμοποιεί κατά κύριο λόγο IE με έπεισε να του δώσω μια ακόμα ευκαιρία.

Μετά από λίγο debugging το εύρημα ήταν το εξής:

Οταν σε internet explorer (σε IE11 που έχω) αφαιρείς με κώδικα το id attribute αυτόματα χάνεται και η τιμή που υπάρχει στο name attribute.

Ωραία πράγματα τα features, προσθέτουν ενδιαφέρον στην ζωή μας που θα ήταν ανιαρή αν τα πάντα δούλευαν χωρίς αυτές τις &$#*&%@*#% χαρούμενες νότες έκπληξης. Οπότε έμενε να κρατήσουμε την τιμή του name και αφού αφαιρέσουμε το id να το ξαναβάλουμε. Άλλαξα τον κώδικα για μια ακόμα φορά ώστε να καταλήξω σε αυτό:

_createItemExtended : function () {
    if (this.elOriginal.attributes.hasOwnProperty('id')) {
        this.toggle.id = this.elOriginal.id;
        var name = this.elOriginal.name;
        this.elOriginal.attributes.removeNamedItem('id');
        this.elOriginal.name = name;
    }
},

και τώρα τα πράγματα δουλεύουν όπως πρέπει.
Τουλάχιστον μέχρι αποδείξεως του εναντίου. 🙁

Οπότε, Let the war begin!