Mootools document.body is null πρόβλημα σε Joomla με Gantry based template

[migf1]

Καλησπέρα παιδιά,

 

έχω ένα πρόβλημα που με παιδεύει και δεν μπορώ να το λύσω, προφανώς λόγω των ελλιπέστατων γνώσεών μου.

 

Συνοπτικά το πρόβλημα είναι πως το site: http://justgreece.info παρουσιάζει πρόβλημα στον IE9 ενώ δουλεύει κανονικά σε FFox και Chrome.

 

Συγκεκριμένα, αν μπούμε στην υποσελίδα οποιουδήποτε ξενοδοχείου (για γρήγορα μπορείτε να διαλέξετε μια από τις 3 εικόνες, κάτω από το tag-cloud, στην δεξιά στήλη) τότε αρχίζουν τα όργανα. Πρώτη ένδειξη του προβλήματος είναι το χάλασμα ολόκληρου του header. Άλλη ένδείξη είναι πως δεν δουλεύουν μενού, tabs, κλπ.

 

Συγκρίνετε για παράδειγμα αυτή την υποσελίδα ξενοδοχείου: http://justgreece.in...s-hotel&lang=en σε FFox και σε IE9 για να καταλάβετε.

 

Το site είναι στημένο σε Joomla 1.5, με FlexiContent και ένα template από την RocketTheme (θα ρωτήσω να σας πω ποιο ακριβώς είναι), το οποίο template αν έχω καταλάβει σωστά χρησιμοποιεί το Gantry framework.

 

Εν πάσει περιπτώσει, χρησιμοποιώντας τον built-in debugger του IE9 (με F12) βρίκσω πως μου χτυπάει σε ένα $(document.body).getStyle με το σφάλμα πως το body object είναι NULL, και μου δίνει ως πηγαίο αρχείο το mootools.js. Παραθέτω τη σχετική εικόνα...

 

 

Οι συγκεριμένες γραμμές κώδικα δεν υπάρχουν μέσα στο mootools.js, οπότε υποθέτω παράγονται αυτόματοποιημένα είτε από αυτό είτε από κάποιο άλλο script.

 

Με την βοήθεια του firebug στον FFox είδα πως στις σελίδες των ξενοδοχείων φορτώνει ένα script που ίσως είναι σχετικό, ένα ονόματι: gantry-input.js (λογικά ανήκει στο Gantry framework) μιας και δεν βλέπω άλλο script από αυτά που δείχνει ο firebug να ορίζει την var InputExclusions (έχω ftp πρόσβαση στο site και την έκανα grep). Ελπίζω να ισχύει πως ο firebug δείχνει εκεί μονάχα όσα σκριπτ φορτώνονται.

 

 

Το ... κλου είναι πως το σκριπτ που περιέχει τον κώδικα στον οποίον κολλάει ο debugger του IE9 ανήκει σε ένα σκριπτ ονόματι: /components/com_gantry/admin/widgets/radios/js/radios.js αλλά ο firebug δεν το δείχνει να φορτώνεται στις υποσελίδες των ξενοδοχείων (λογικό μου ακούγεται, μιας και από τη θέση του μου κάνει περισσότερο για backend script). Όπως και να έχει, το παραθέτω κι αυτό στο παραπάνω link μπας και καταλάβει κανείς τίποτα...

 

Βρήκα και στο StackOverflow κάτι που μου φάνηκε σχετικό: http://stackoverflow...nt-body-is-null αλλά δεν καταλαβαίνω που και πως μπορώ να το εφαρμόσω, για να πειραματιστώ (προφανώς επειδή δεν έχω τις απαραίτητες γνώσεις).

 

Το site πάντως τρέχει Mootools 1.12 παρόλο που μέσα στο admin panel δεν το βλέπω εγκατεστημένο. Προφανώς θα είναι εγκατεστημένο μέσω του template ή μέσω κάποιου άλλου component/extension (π.χ. του FlexiContent) αλλά και πάλι οι λιγοστές μου γνώσεις μου σε Joomla δεν με βοηθάνε (είμαι Wordpress oriented, και χάνομαι τελείως μέσα στο Joomla).

 

Κάθε βοήθεια ευπρόσδεκτη! Ευχαριστώ εκ των προτείρων.

 

ΥΓ. Το site δεν το έχω στήσει εγώ. Εμένα απλώς μου ζητήθηκε αν μπορώ να βοηθήσω να εντοπίσουμε/λύσουμε το πρόβλημα με τον IE.

[defacer]

Μέχρι ένα σημείο το debugging πήγε καλά, μετά αποπροσανατολίστηκες λίγο.

 

Ο κώδικας που βλέπεις ("eval code(121)") είναι η unobfuscated μορφή του gantry-input.js. Δεν είμαι σίγουρος πώς εννοείς ότι πηγαίο αρχείο είναι το mootools.js, αλλά αυτό που συμβαίνει είναι ότι μόλις έχει χτυπήσει το "domready" event στα mootools (μπορείς να το συμπεράνεις από το call stack) και η InputsMorph.init έχει μπει σαν handler αυτού του event (μπορείς να το διαπιστώσεις αν κάνεις τέρμα scroll down στο source που έχεις φορτωμένο στο screenshot).

 

Απο κει και πέρα το πρόβλημα είναι πως το document.body είναι null (μπορείς να το διαπιστώσεις κάνοντας evaluate στην κονσόλα) κι αυτό γιατί όπως φαίνεται (googling) στον IE το domready event κάνει fire "πριν την ώρα του" οπότε το document.body δεν έχει ακόμα τη "σωστή" τιμή οπότε πακέτο.

 

Αν μπορούσες να αλλάξεις (πιθανότατα conditionally μόνο σε ΙΕ) το event binding σε "load" αντί για "domready" το πρόβλημα θα λυνόταν. Επομένως μια προφανής λύση για να γίνει η δουλειά είναι:

1. Copy paste το unobfuscated source που βλέπεις από τα developer tools, save as gantry-inputs.ie.js
   
2. Edit το αρχείο αυτό αλλάζοντας το event από domready σε load
   
3. Αντί να κάνεις ξερά include το original gantry-inputs.js, με conditional comments κάνεις include την πειραγμένη έκδοση αν φορτώνεις σε IE και την original έκδοση αν όχι (πώς θα κάνεις το δεύτερο)
   
4. Profit
   

Πιστεύω θα δουλέψει με την πρώτη.

 

Φυσικά πέρα από αυτό μπορείς να αφήσεις τη φαντασία σου ελεύθερη για άλλες λύσεις, π.χ. αν βάλεις με μια setTimeout μια χρονοκαθυστέρηση έστω και 50-100 msec ανάμεσα στο domready και την εκτέλεση της InputsMorph.init τότε πιθανότατα θα έχεις το ίδιο αποτέλεσμα.

 

Το μόνο που προβληματίζει είναι ότι έχουν μπει αρκετοί handlers στο domready και παρόλο που ο συγκεκριμένος μόνο είναι που χτυπάει, πιθανόν το πρόβλημα να το έχουν όλοι (και αυτό είναι που προκαλεί τα πολλά και διάφορα breakages που βλέπεις -- κάθε breakage = ένας event handler που έτρεξε πριν την ώρα του). Για να αντιμετωπίσεις το πρόβλημα σε large scale προφανώς χρειάζεσαι κάτι σε πιο official solution.

 

Από την άλλη όμως μπορεί να είσαι safe να χρησιμοποιήσεις το DOM (δηλαδή pretty much οτιδήποτε δεν είναι document.κατι) και οι υπόλοιποι handlers να το κάνουν έτσι. Αν ισχύει αυτό τότε μπορείς (για να μη φας delay στην επεξεργασία) να αλλάξεις το $(document.body) σε $(document.getElementsByTagName("body")[0]).

 

Update:

Και φυσικά όπως είναι λογικό, το πιο απλό το σκέφτηκα αφού χαλάρωσα λίγο...

 

Δοκίμασε να μετακινήσεις τα offending scripts από το <head> στο body. Μπορεί αυτό απλώς να είναι αρκετό.

Επεξ/σία 29 Αυγούστου 2012 από defacer

[migf1]

Σε ευχαριστώ πολύ τόσο για τον κόπο να το ψάξεις όσο και για την απάντηση!

 

Παρόλο που δεν κατάλαβα πλήρως την απάντηση (επειδή χρειάζομαι αρκετό διάβασμα) έχει πολλά βοηθητικά points για να ξεκινήσω. Αν και για να είμαι ειλικρινής, θα τους προτείνω πρώτα από όλα να αναβαθμίσουν το template (btw είναι το Maelstrom ) αν δεν το έχουν κάνει ήδη, μιας και υποθέτω κάτι τέτοιο έχει την δυναμική να λύσει το πρόβλημα.

 

Αλλιώς μεταξύ άλλων θα πρέπει να κάτσω να διαβάσω και πως δουλεύει το Gantry framework, κάτι που πραγματικά θα προτιμούσα να το αποφύγω.

 

Αν προκύψει κάτι νεότερο θα ενημερώσω.

 

Thanks και παλι!

[defacer]

Χαίρομαι που βοήθησα αλλά τα συμπεράσματά σου με ανησυχούν λίγο...

 

Το πρόβλημα οφείλεται στo συνδυασμό mootools + IE. Δεν βλέπω πώς θα σε βοηθήσει το να κάνεις update οτιδήποτε (εκτός αν τα mootools αποκτήσουν ενσωματωμένο workaround), ούτε το να ασχοληθείς με το Gantry.

[migf1]

Χαίρομαι που βοήθησα αλλά τα συμπεράσματά σου με ανησυχούν λίγο...

 

Το πρόβλημα οφείλεται στo συνδυασμό mootools + IE. Δεν βλέπω πώς θα σε βοηθήσει το να κάνεις update οτιδήποτε (εκτός αν τα mootools αποκτήσουν ενσωματωμένο workaround), ούτε το να ασχοληθείς με το Gantry.

 

Εικάζω πως τα Mootools τα καλεί/χρησιμοποιεί το template, γιατί δεν τα βλέπω εγκατεστημένα μέσα στο admin panel, πέρα από ένα "System Mootools Upgrade" το οποίο όμως είναι απενεργοποιημένο. Btw, όταν έγραφα προηγουμένως πως μου δίνει ως πηγαίο αρχείο το mootools.js ο ΙΕ9 debugger, το συμπέρανα από το δεξί notification tag, στην 1η εικόνα του αρχικού μου ποστ (σημείωση, είναι η 1η φορά που χρησιμοποιώ τον εν λόγω debugger).

 

Αν οντως ισχύει, τότε ελπίζω μια αναβάθμιση του template να αναβαθμίζει και το Mootools library, καθώς και τη σωστή τους χρήση και σε IE9. Δηλαδή, αυτό που μου πρότεινες να μεταφέρω το gantry-inputs.js από το <head> ατο <body> υποθέτω προϋποθέτει να γνωρίζω τη δομή του Gantry framework, μιας και νομίζω πως με σκέτο fix του gantry-input.js δεν λύνεται το πρόβλημα.

 

Δοκίμασα το fix που προτείνει το StackOverflow link παραπάνω στον κώδικα του radio.js, και η σελίδα έσκασε ξανά λίγο παρακάτω, με άλλο null object. Για αυτό είπα πως μάλλον πρέπει να διαβάσω και το Gantry framework. Εν τω μεταξύ, ούτε τη δομή ενός στάνταρ Joomla template δεν γνωρίζω, για αυτό μίλησα εξαρχής για τις ελλιπέστατες γνώσεις μου και το γενικότερο διάβασμα που χρειάζομαι αν πρόκειται να ασχοληθώ με Joomla.

 

ΥΓ. Άσχετο, μπροστά στο Wordpress το Joomla μου φαίνεται πραγματικά χαώδες!