Javascript + innerHTML + IE = koszmar

[joorvishoon]

Siema, szybkie pytanie:

 

Robię mechanizm dynamicznych formularzy. Wymaga to dostawiania fragmentów formularza za pomocą javascriptu. Banał. Zrobiłem to tworząc tabelkę, i w momencie dodania partii formularza tworze nowy wiersz i dodaję do wiersza cały fragment kodu (czasem kilka TD, czasem cały table z nowym fragmentem formatek). Przykłaodwe funckje które to realizują:

 

function addStudent(){				var newline = studentLine(++studentCount);				var row = document.getElementById('students').insertRow(studentCount);				if(navigator.appName == 'Microsoft Internet Explorer'){					//wtf?				}				else					row.innerHTML = newline;				document.getElementById('studentBtn').disabled=false;			}function addCourse(){				var newform = courseDesc(++courseCount);				var row = document.getElementById('course').insertRow(courseCount-1);				if(navigator.appName == 'Microsoft Internet Explorer'){					//wtf?				}				else					row.innerHTML = newform;				document.getElementById('courseBtn').disabled=false;			}

Prosty przejżysty kod, a tera - czemu przy stwierdzeniu że ktoś używa IE jest tylko komentarz WTF? ponieważ html wstrzykiwany na stronę metodą dla innych przeglądarek, mimo że zdaje się być zgodny ze standardami NIE DZIAŁA! Po prostu, zero rekacji, IE dodaje wiersz tabeli i nic do środka nie wstawia (należy zauwazyć że w obu przypadkach wstrzykiwany fragment kodu zawiera odpowiednio ułozone znaczniki TD, żeby nei było że staram się pisać w surowym TR).

 

Przeorałem internet, sprawdziłem z dwadzieścia sposób na obejście tej ułomności IE i żadna nie zdała egzaminu (teorię że IE nie umie uzywac innerHTML z tr obaliłem, podobnie jak sposób że wszystko da się wstrzyknąć do div'a). Po prostu pustka i żałość. Co zabawne IE też nie chce obsłużyć wstrzykiwania tekstu do input.value, co już w ogóle nie ma sensu.

 

Normalnie przy takim oporze materiału już dawno bym na to położył laskę, napisał czerwonym tekstem nad formularzem że obsługuje tylko poważne przeglądarki i poszedł spać, ale niestety jest to aplikacja biznesowa i 90% użytkowników będzie miało IE. Nie mogę też mienić sposobu organizacji treści, gdyż elementy formularza trzeba dodawać i usuwać, a żadna inna metoda nie daje takiej sowbody w robieniu tego, przy okaji nie wypieprzając uprzednio wpisanych danych w rubrykach. Sam generować sobie ręcznie kawałków formularza w DOM też za bardzo nie mogę, bo jeden fragment jest dosyć złożony.

 

Niech ktoś się podzieli albu rzuci jakiegoś hint'a, jak sobie kiedyś poradził z tą kupą. ASAP

Edytowane 8 Września 2010 przez joorvishoon

[m4r]

IE tworzy sobie bodaj w DOM inną strukturę niż reszta przeglądarek i trzeba chyba jeszcze dodawać parę (niepotrzebnych w innych przeglądarkach) linii kodu, jak też dodać parę (potrzebnych w innych przeglądarkach) linii kodu do sprzątania tego, co się napsuło dodatkowym kodem dla IE. Ot ciekawostka.

Hint: Dynamic Tables In JavaScript for IE and Firefox | SweetVision

 

Btw, dynamiczne tabelki w IE robiłem dość dawno i zarzuciłem właśnie przez problemy w IE. 10 razy prościej jest to zmontować divami, albo nawet przy użyciu fieldset i odpowiednim stylowaniu.

 

.:.:ed:.:.

przypomniało mi się, że miałem jakiś dziwny problem związany z IE i inputami dynamicznymi. Trochę to głupio zabrzmi, aczkolwiek- jedziemy: Jeżeli tworzyłem sobie sam formularz i dodawałem pola input dynamicznie, wszystko było ok. Dawały się wypełniać, stylować, wysyłały poprawnie, etc. Ale wystarczyło dodać odrobinę kodu poza formularz (lol?) i... przestawały się wysyłać. Tzn - były w formularzu, dalej się dawały stylować, wypełniać, etc. Ale za Chińską Republikę nie szło ich wysłać ani getem, ani postem.

Edytowane 9 Września 2010 przez m4r

[mystery]

Może skorzystać z pomocy jQuery? Ta biblioteka znacznie ułatwia korzystanie z JavaScript i powinna działać poprawnie również w IE. Korzystałem z niej już wielokrotnie i nie miałem do tej pory problemów. Jquery jest lekkie, więc nie obciąża strony w dużym stopniu.

[joorvishoon]

Może skorzystać z pomocy jQuery? Ta biblioteka znacznie ułatwia korzystanie z JavaScript i powinna działać poprawnie również w IE. Korzystałem z niej już wielokrotnie i nie miałem do tej pory problemów. Jquery jest lekkie, więc nie obciąża strony w dużym stopniu.

 

może faktycznie, chociaż z drugiej storny chciałem tego uniknać bo to by było branie czołgu do przejażdżki do warzywniaka. zwłaszcza że tylko te dwie <span style='color: red;'>[ciach!]</span>ły nie działają, a reszta skryptów jakoś pracuje.

 

edit;

 

dobra, poszło z jQuery (pie***ni czarodzieje, jak oni potrafią utrzymać tę bibliotekę jako multiplatformową :) ).

 

Edit 2:

 

no to został jeden problem - wyciąganie indeksu zaznaczonego elementu z pola SELECT. pod wszystkich przeglądarkami idzie po Bożemu:

var id = document.getElementById(selectId).selectedValue;

Pod IE cisza kompletna. Jak się wywali alertem id to jest napisane undefined. Tego nawet za pomocą jQuery nie udało mi się popchnąć.

Edytowane 11 Września 2010 przez joorvishoon

[m4r]

js

twój_select.options[twój_select.selectedIndex].value

jq

$(tutaj_wskazujemy_select).val();

Spróbuj.

[joorvishoon]

js

twój_select.options[twój_select.selectedIndex].value

jq

$(tutaj_wskazujemy_select).val();

Spróbuj.

 

Dzięki, tak właśnie zrobiłem, a potem przeczytałem na forum odpowiedź. :wink: Problem polegał na tym że IE nie radziło sobie z wyciągnięciem wartości ze znacznika Option i miałem problem ze zdiagnozowaniem usterki.

 

To mam jeszcze pytanie z innej beczki, trochę bardziej ogólne:

Jak przechwycić (za pomocą JQuery lub czystym JS) zdarzenie przycisku wstecz/dalej? Robię stronkę na ajax'ie i najwygodniej by było przechwycić te akcje zamiast upychać gdzieś na stronie własne wersje tych przycisków. Z tym że, głupio przyznać, nawet nie wiem co w googla wpisać żeby szukać.

[m4r]

location.hash | jQuery Plugins << to, albo coś podobnego.

 

This plugin is still buggy, and I think it doesn't work in ie6.

Personally don`t give a damn `bout it ;]

[joorvishoon]

no nic, to zrobię sobie własne "dalej/wstecz" na stronce i już. bez łachy :lol2: