JavaScript onLoad функция + IE = проблемы - PullRequest
Новая
       6

JavaScript onLoad функция + IE = проблемы

1 голос
/ 05 декабря 2010

Я работаю над школьным проектом, который должен дать учащимся возможность искать институты и дополнительную информацию о них.

После того, как результаты поиска отображаются так: не могу отобразить изображение, нужно получить повтор 10, я сделаю это позже.

Это работает, я использую эту функцию onLoad: 

function onLoad() {  
    for (i = 0; i < document.getElementsByTagName("tr").length; i++) {  
        if(document.getElementsByTagName("tr")[i].id.length != 0) {  
            document.getElementsByTagName("tr")[i].style.visibility = "collapse";  
        }  
    }  
}

но когда я использую IE7, я сначала получаю только несколько институтов (обычно 19)
Затем я нажимаю на один из плюсов, которые содержат эту функцию: 

function uitvouwen(trId,imgId) {
var url = document.getElementById(imgId).src;
if (url.indexOf("Images/plus.gif") != -1) {
    for (i = 0; i < document.getElementsByTagName("tr").length; i++) {
        if(document.getElementsByTagName("tr")[i].id == trId) {
            document.getElementsByTagName("tr")[i].style.visibility = "visible";
        }
    }
    url = "Images/minus.gif";
} else if(url.indexOf("Images/plusbottom.gif") != -1) {
    for (i = 0; i < document.getElementsByTagName("tr").length; i++) {
        if(document.getElementsByTagName("tr")[i].id == trId) {
            document.getElementsByTagName("tr")[i].style.visibility = "visible";
        }
    }
    url = "Images/minusbottom.gif";
} else if (url.indexOf("Images/minus.gif") != -1) {
    for (i = 0; i < document.getElementsByTagName("tr").length; i++) {
        if(document.getElementsByTagName("tr")[i].id == trId) {
            document.getElementsByTagName("tr")[i].style.visibility = "collapse";
        }
    }
    url = "Images/plus.gif";
} else if(url.indexOf("Images/minusbottom.gif") != -1) {
    for (i = 0; i < document.getElementsByTagName("tr").length; i++) {
        if(document.getElementsByTagName("tr")[i].id == trId) {
            document.getElementsByTagName("tr")[i].style.visibility = "collapse";
        }
    }
    url = "Images/plusbottom.gif";
}
document.getElementById(imgId).src = url;

}

Достаточно странно, все 19 результатов отображаются сейчас

Итак, мой вопрос:

IE7 останавливает мой код onLoad (возможно, из-за того, что его слишком много для обработки) или мне приходится искать ошибки в моей программе?
В других браузерах эта программа отлично работает ..

Это код HTML, JSTL и JavaScript (я знаю, что это грязно, но это упражнение на JSTL, поэтому мне нужно его использовать): 

<c:forEach var="instituut" items="${ requestScope.instituten}">
<table id="LijstResultaten<%= i %>" summary="LijstResultaten<%= i %>">
    <%
        i++;
        if (instituten.size() != i) {
    %>
    <c:set var="urlLijn" scope="session" value="Images/line.gif"/>
    <c:set var="urlMin" scope="session" value="Images/minus.gif"/>
    <c:set var="urlPlus" scope="session" value="Images/plus.gif"/>
    <c:set var="urlLijnLong" scope="session" value="Images/linelong.gif"/>
    <% } else {
    %>
    <c:set var="urlLijn" scope="session" value="Images/empty.gif"/>
    <c:set var="urlMin" scope="session" value="Images/minusbottom.gif"/>
    <c:set var="urlPlus" scope="session" value="Images/plusbottom.gif"/>
    <c:set var="urlLijnLong" scope="session" value="Images/empty.gif"/>
    <% }
    %>
    <tr>
        <td><img alt="" id="instituut<%= i %>" name="instituut<%= i %>" src="${ urlPlus}" onclick="uitvouwen('MeerInfoInstituut<%= i %>','instituut<%= i %>')" onmouseover="cursorVeranderen()" style="cursor: pointer;"/></td>
        <td colspan="4">${instituut.name}</td>
    </tr>
    <tr id="MeerInfoInstituut<%= i %>">
        <td><img alt="" name="lijn" src="${ urlLijn}" onclick="init();"/></td>
        <td><img alt="" name="join" src="Images/join.gif"/></td>
        <td colspan="2">Land:</td>
        <td><%= landen.get(i - 1).getName() %></td>
    </tr>
    <tr id="MeerInfoInstituut<%= i %>">
        <td><img alt="" name="lijn" src="${ urlLijn}"/></td>
        <td><img alt="" name="join" src="Images/join.gif"/></td>
        <td colspan="2">Stad:</td>
        <td>${ instituut.city }</td>
    </tr>
    <tr id="MeerInfoInstituut<%= i %>">
        <td><img alt="" name="lijn" src="${ urlLijn}"/></td>
        <td><img alt="" name="join" src="Images/join.gif"/></td>
        <td colspan="2">Postcode:</td>
        <td>${ instituut.zipcode }</td>
    </tr>
    <tr id="MeerInfoInstituut<%= i %>">
        <td><img alt="" name="lijn" src="${  urlLijn }"/></td>
        <td><img alt="" name="join" src="Images/join.gif"/></td>
        <td colspan="2">Straat:</td>
        <td>${instituut.street}</td>
    </tr>
    <tr id="MeerInfoInstituut<%= i %>">
        <td><img alt="" name="lijn" src="${  urlLijn }"/></td>
        <td><img alt="" name="join" src="Images/join.gif"/></td>
        <td colspan="2">Website:</td>
        <td>
            <c:choose>
                <c:when test="${  instituut.website == 'Onbekend' }">
                    ${ instituut.website }
                </c:when>
                <c:otherwise>
                    <a href="http://${ instituut.website }" >${ instituut.website }</a>
                </c:otherwise>
            </c:choose>
        </td>
    </tr>
    <%
        ArrayList<ArrayList<Outgoing_student>> studentlijst = (ArrayList<ArrayList<Outgoing_student>>) request.getAttribute("studentlijst");
        ArrayList<ArrayList<Outgoing_teacher>> docentlijst = (ArrayList<ArrayList<Outgoing_teacher>>) request.getAttribute("docentlijst");

        int aantalStudenten = studentlijst.get(i - 1).size();
        int aantalDocenten = docentlijst.get(i - 1).size();

        String resultaatStudentnamen = "";
        String resultaatDocentnamen = "";

        int j = 0;
        for (Outgoing_student studentNamen : studentlijst.get(i - 1)) {
            resultaatStudentnamen += "<tr id=\"MeerInfoStudenten" + i + "\">\n";
            resultaatStudentnamen += "\t\t\t\t\t\t<td><img alt=\"\" name=\"lijn\" src=\"" + (instituten.size() != i ? "Images/line.gif" : "Images/empty.gif") + "\"/></td>\n";
            resultaatStudentnamen += "\t\t\t\t\t\t<td><img alt=\"\" name=\"lijn\" src=\"Images/line.gif\"/></td>\n";
            resultaatStudentnamen += "\t\t\t\t\t\t<td><img alt=\"\" name=\"join\" src=\"" + (studentlijst.get(i - 1).size() != (j + 1) ? "Images/join.gif" : "Images/joinbottom.gif") + "\"/></td>\n";
            resultaatStudentnamen += "\t\t\t\t\t\t<td>" + studentNamen.getFirstname() + " " + studentNamen.getLastname() + "</td>\n";
            resultaatStudentnamen += "\t\t\t\t\t</tr>\n";
            j++;
        }
        j = 0;
        for (Outgoing_teacher docentNamen : docentlijst.get(i - 1)) {
            resultaatDocentnamen += "<tr id=\"MeerInfoDocenten" + i + "\">\n";
            resultaatDocentnamen += "\t\t\t\t\t\t<td><img alt=\"\" name=\"lijn\" src=\"" + (instituten.size() != i ? "Images/line.gif" : "Images/empty.gif") + "\"/></td>\n";
            resultaatDocentnamen += "\t\t\t\t\t\t<td><img alt=\"\" name=\"lijn\" src=\"Images/empty.gif\"/></td>\n";
            resultaatDocentnamen += "\t\t\t\t\t\t<td><img alt=\"\" name=\"join\" src=\"" + (docentlijst.get(i - 1).size() != (j + 1) ? "Images/join.gif" : "Images/joinbottom.gif") + "\"/></td>\n";
            resultaatDocentnamen += "\t\t\t\t\t\t<td>" + docentNamen.getFirstname() + " " + docentNamen.getLastname() + "</td>\n";
            resultaatDocentnamen += "\t\t\t\t\t</tr>\n";
            j++;
        }
    %>
    <tr id="MeerInfoInstituut<%= i %>">
        <td><img alt="" name="lijn" src="${  urlLijnLong }"/></td>
        <td><img alt="" id="studenten<%= i %>" name="MeerInfoStudenten" src="Images/plus.gif" onclick="uitvouwen('MeerInfoStudenten<%= i %>', 'studenten<%= i %>')" style="cursor: pointer;"/></td>
        <td colspan="2">Reeds bezocht door <span><%=aantalStudenten%></span> student(en)</td>
        <td>&nbsp;</td>
    </tr>
    <%=resultaatStudentnamen%>
    <tr id="MeerInfoInstituut<%= i %>">
        <td><img alt="" name="lijn" src="${  urlLijnLong }"/></td>
        <td><img alt="" id="docenten<%= i %>" name="MeerInfoDocenten" src="Images/plusbottom.gif" onclick="uitvouwen('MeerInfoDocenten<%= i %>','docenten<%= i %>')" style="cursor: pointer;"/></td>
        <td colspan="2">Reeds bezocht door <span><%=aantalDocenten%></span> docent(en)</td>
        <td>&nbsp;</td>
    </tr>
    <%=resultaatDocentnamen%>
</table>

Ответы [ 2 ]

0 голосов
/ 05 декабря 2010

только ради и, конечно, за помощь! ;)

ДЕМО: http://jsbin.com/ewajo3

Ваш код должен быть только примером:

HTML 

<tr id='caption_<%= i %>' class='tr_caption'>    
  <td>Lorem Ipsum Est <%= i %></td>    
  <td>         
    <a id='show_<%= i %>' href='javascript:;' onclick='show(this.id);'>+</a>
    <a id='hide_<%= i %>' href='javascript:;' onclick='hide(this.id);'>-</a>
  </td>
</tr>
<tr id='content_<%= i %>' class='tr_content'>
  <td colspan=2>The Brown Fox Jump Hover The Lazy Dog</td>
</tr>

CSS 

.tr_content { display:none }

JAVASCRIPT 

function show(elm) {
   var id = 'content_' + elm.split('_')[1];
   document.getElementById(id).style.display='block';
}
function hide(elm) {
   var id = 'content_' + elm.split('_')[1];
   document.getElementById(id).style.display='none';
}
0 голосов
/ 05 декабря 2010

«Отлично работает» - это широкий термин, и в вашем случае это неправильно.

Возьмем, к примеру, старинную машину. Машина 50 лет, которая все еще ездит (10 миль в час) и все равно доставляет вас к месту назначения .... так что вы можете сказать, что "машина работает отлично". Но он медленный и много ломается.

Ваш код такой же. Это не эффективно и может быть улучшено без особых усилий.

В любом случае, ваша основная логика также неверна, так как IE просто не поддерживает «коллапс», см. Здесь: http://www.w3schools.com/css/pr_class_visibility.asp

Я скопирую соответствующую часть:

Примечание. Нет версий Internet Explorer. (включая IE8) поддерживает свойство значения «наследуют» или «разрушаются».

В итоге, вам лучше вернуться к чертежной доске и найти другой способ достичь желаемого дизайна. JQuery - отличный выбор, у вас есть много вещей, доступных вам, только один поиск.

...