onload und der IE

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • onload und der IE

    Hallo zusamen

    Ich bin am verzweifeln. Ich möchte mit dem onload=""-Attribut in dem <body>-Tag der HTML-Seite eine Funktion ausführen, diese sollte eine HTML-Tabelle mittels JS sortieren. Die Funktion wird in allen Browsern ausgeführt, nur im IE nicht.

    Zwar führt der IE JS-Code im onload="" aus (alert), jedoch scheint der IE die Tabelle die ich sortieren möchte noch nicht geladen zu haben und deshalb verursacht die JS-Funktion ein Fehler, weil die Elemente nicht vorhanden sind.


    Gibt es dafür einen Hack oder Ähnliches?

    Das Element sortheader2 wird durch DOM-Manipulation von dem JS-Script eingefügt und ist vorhanden. Es müsste also "Dates" sortiert werden.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<title>Sortable table example</title>
    	<link rel="stylesheet" type="text/css" href="sortable.css"/>
    	<meta name="author" content="Joost de Valk, http://www.joostdevalk.nl/" />
    	<link href="http://www.joostdevalk.nl/" rev="made" />
    	<script type="text/javascript" src="sortable.js"></script>
    </head>
    
    <body onload="ts_resortTable(document.getElementById('sortheader2'), 2)">
    
    <table class="sortable" id="anyid" cellpadding="0" cellspacing="0">
    <tr>
    	<th>Numbers</th>
    	<th>Alphabet</th>
    	<th>Dates</th>
    	<th>Currency</th>
    	<th class="unsortable">Unsortable</th>
    </tr>
    <tr>
    	<td>1</td>
    	<td>Z</td>
    	<td>2006-01-01</td>
    	<td>&euro; 5.00</td>
    	<td>Unsortable</td>
    </tr>
    <tr>
    	<td>2</td>
    	<td>y</td>
    	<td>2005-05-13</td>
    	<td>&euro; 6.70</td>
    	<td>Unsortable</td>
    </tr>
    <tr>
    	<td>3</td>
    	<td>X</td>
    	<td>2006-08-17</td>
    	<td>&euro; 6.50</td>
    	<td>Unsortable</td>
    </tr>
    <tr>
    	<td>4</td>
    	<td>w</td>
    	<td>2005-01-01</td>
    	<td>&euro; 4.20</td>
    	<td>Unsortable</td>
    </tr>
    <tr>
    	<td>5</td>
    	<td>V</td>
    	<td>2006-05-12</td>
    	<td>&euro; 7.15</td>
    	<td>Unsortable</td>
    </tr>
    <tr class="sortbottom">
    	<td>15</td>
    	<td></td>
    	<td></td>
    	<td>&euro; 29.55</td>
    	<td></td>
    </tr>
    </table>
    
    </body>
    </html>
    Zuletzt geändert von pascal007; 10.12.2010, 08:16.

  • #2
    hau mal das
    Code:
    <script></script>
    ans ende des body
    Code:
    <script></script>
    </body>
    </html>
    und entweder ans ende in das JS oder dahinter vor dem body ende

    Code:
    window.load=ts_resortTable(document.getElementById('sortheader2'), 2);
    Bitte Beachten.
    Foren-Regeln
    Danke

    Kommentar


    • #3
      Das nützt leider auch nichts ... so läuft es in keinem Browser mehr.

      Kommentar


      • #4
        da ich keine JS errors erraten kann. Onlinebeispiel? ... und welcher IE.
        Bitte Beachten.
        Foren-Regeln
        Danke

        Kommentar


        • #5
          Es handelt sich um den IE7 und der Fehler ist bei meiner onload-Variante:

          Code:
          Line: 85
          Char: 16
          Error: Object required
          Code: 0
          URL: file://C:/example.html
          Bei deiner vorgeschlagenen Version gibt es keine Fehler, da gar kein Code ausgeführt wird... so wie ich das sehe. Auf jeden Fall gehen so nicht mals alerts.

          Kommentar


          • #6
            Du musst das in eine anonyme Funktion packen;
            PHP-Code:
            window.load = function()
            {
              
            ts_resortTable(document.getElementById('sortheader2'), 2);

            Peter
            Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
            Meine Seite

            Kommentar


            • #7
              Das habe ich auch gemacht:

              Code:
              ...
              	<td>&euro; 29.55</td>
              	<td></td>
              </tr>
              </table>
              
              <script type="text/javascript">
              window.load = function()
              {
              	alert('alert');
                ts_resortTable(document.getElementById('sortheader2'), 2);
              }  
              </script>
              
              </body>
              </html>
              Das hilft leider nichts... funktioniert in keinem Browser .

              Kommentar


              • #8
                Vermutlich weil das Element einfach noch nicht da ist, wenn der Code ausgeführt wird. Ich tippe hier auf eine Race Condition, die zu unerwarteten Problemen führt. Eine Möglichkeit ist deine Funktion in dem Script aufzurufen, dass das Element einfügt. Oder einen Callback zur Verfügung zu stellen.
                Zuletzt geändert von unset; 10.12.2010, 09:57.
                [FONT="Helvetica"]twitter.com/unset[/FONT]

                Shitstorm Podcast – Wöchentliches Auskotzen

                Kommentar


                • #9
                  Wenn ich es im Script selber am richtigen Ort aufrufe funktioniert es im IE und FF . Soweit so gut, aber es müsste eben Variabel sein. Also man sollte das schon je nach HTML-Seite aufrufen können und nicht fix in der externen JS-Datei drin haben.

                  Wie würde dann das mit dem Callback so grob aussehen? Das kann ich mir irgendwie gerade nicht vorstellen.

                  Wichtig ist, dass die JS function sortInit() im JS-File komplett abgearbeitet wurde...

                  Kommentar


                  • #10
                    Dazu müsste man wissen, wie du den Code im "sortable.js" verfasst hast …
                    [FONT="Helvetica"]twitter.com/unset[/FONT]

                    Shitstorm Podcast – Wöchentliches Auskotzen

                    Kommentar


                    • #11
                      Dazu nutze ich folgendes Script:

                      Code:
                      /*
                      Table sorting script  by Joost de Valk, check it out at http://www.joostdevalk.nl/code/sortable-table/.
                      Based on a script from http://www.kryogenix.org/code/browser/sorttable/.
                      Distributed under the MIT license: http://www.kryogenix.org/code/browser/licence.html .
                      
                      Copyright (c) 1997-2007 Stuart Langridge, Joost de Valk.
                      
                      Version 1.5.7
                      */
                      
                      /* You can change these values */
                      var image_path = "";
                      var image_up = "arrow-up.gif";
                      var image_down = "arrow-down.gif";
                      var image_none = "arrow-none.gif";
                      var europeandate = true;
                      var alternate_row_colors = true;
                      
                      /* Don't change anything below this unless you know what you're doing */
                      addEvent(window, "load", sortables_init);
                      
                      var SORT_COLUMN_INDEX;
                      var thead = false;
                      
                      function sortables_init() {
                      	// Find all tables with class sortable and make them sortable
                      	if (!document.getElementsByTagName) return;
                      	tbls = document.getElementsByTagName("table");
                      	for (ti=0;ti<tbls.length;ti++) {
                      		thisTbl = tbls[ti];
                      		if (((' '+thisTbl.className+' ').indexOf("sortable") != -1) && (thisTbl.id)) {
                      			ts_makeSortable(thisTbl);
                      		}
                      	}
                      	// HIER DER FIXE AUFRUF
                      	ts_resortTable(document.getElementById('sortheader2'), 2);
                      }
                      
                      function ts_makeSortable(t) {
                      	if (t.rows && t.rows.length > 0) {
                      		if (t.tHead && t.tHead.rows.length > 0) {
                      			var firstRow = t.tHead.rows[t.tHead.rows.length-1];
                      			thead = true;
                      		} else {
                      			var firstRow = t.rows[0];
                      		}
                      	}
                      	if (!firstRow) return;
                      	
                      	// We have a first row: assume it's the header, and make its contents clickable links
                      	for (var i=0;i<firstRow.cells.length;i++) {
                      		var cell = firstRow.cells[i];
                      		var txt = ts_getInnerText(cell);
                      		if (cell.className != "unsortable" && cell.className.indexOf("unsortable") == -1) {
                      			cell.innerHTML = '<a href="#" class="sortheader" id="sortheader' + i + '" 
                      onclick="ts_resortTable(this, '+i+');return false;">'+txt+'<span class="sortarrow">&nbsp;
                      &nbsp;
                      <img src="'+ image_path + image_none + '" alt="&darr;"/></span></a>';
                      		}
                      	}
                      	if (alternate_row_colors) {
                      		alternate(t);
                      	}
                      }
                      
                      function ts_getInnerText(el) {
                      	if (typeof el == "string") return el;
                      	if (typeof el == "undefined") { return el };
                      	if (el.innerText) return el.innerText;	//Not needed but it is faster
                      	var str = "";
                      	
                      	var cs = el.childNodes;
                      	var l = cs.length;
                      	for (var i = 0; i < l; i++) {
                      		switch (cs[i].nodeType) {
                      			case 1: //ELEMENT_NODE
                      				str += ts_getInnerText(cs[i]);
                      				break;
                      			case 3:	//TEXT_NODE
                      				str += cs[i].nodeValue;
                      				break;
                      		}
                      	}
                      	return str;
                      }
                      
                      function ts_resortTable(lnk, clid) {
                      	var span;
                      	for (var ci=0;ci<lnk.childNodes.length;ci++) {
                      		if (lnk.childNodes[ci].tagName && lnk.childNodes[ci].tagName.toLowerCase() == 'span')
                       span = lnk.childNodes[ci];
                      	}
                      	var spantext = ts_getInnerText(span);
                      	var td = lnk.parentNode;
                      	var column = clid || td.cellIndex;
                      	var t = getParent(td,'TABLE');
                      	// Work out a type for the column
                      	if (t.rows.length <= 1) return;
                      	var itm = "";
                      	var i = 0;
                      	while (itm == "" && i < t.tBodies[0].rows.length) {
                      		var itm = ts_getInnerText(t.tBodies[0].rows[i].cells[column]);
                      		itm = trim(itm);
                      		if (itm.substr(0,4) == "<!--" || itm.length == 0) {
                      			itm = "";
                      		}
                      		i++;
                      	}
                      	if (itm == "") return; 
                      	sortfn = ts_sort_caseinsensitive;
                      	if (itm.match(/^\d\d[\/\.-][a-zA-z][a-zA-Z][a-zA-Z][\/\.-]\d\d\d\d$/)) sortfn = ts_sort_date;
                      	if (itm.match(/^\d\d[\/\.-]\d\d[\/\.-]\d\d\d{2}?$/)) sortfn = ts_sort_date;
                      	if (itm.match(/^-?[£$€Û¢´]\d/)) sortfn = ts_sort_numeric;
                      	if (itm.match(/^-?(\d+[,\.]?)+(E[-+][\d]+)?%?$/)) sortfn = ts_sort_numeric;
                      	SORT_COLUMN_INDEX = column;
                      	var firstRow = new Array();
                      	var newRows = new Array();
                      	for (k=0;k<t.tBodies.length;k++) {
                      		for (i=0;i<t.tBodies[k].rows[0].length;i++) { 
                      			firstRow[i] = t.tBodies[k].rows[0][i]; 
                      		}
                      	}
                      	for (k=0;k<t.tBodies.length;k++) {
                      		if (!thead) {
                      			// Skip the first row
                      			for (j=1;j<t.tBodies[k].rows.length;j++) { 
                      				newRows[j-1] = t.tBodies[k].rows[j];
                      			}
                      		} else {
                      			// Do NOT skip the first row
                      			for (j=0;j<t.tBodies[k].rows.length;j++) { 
                      				newRows[j] = t.tBodies[k].rows[j];
                      			}
                      		}
                      	}
                      	newRows.sort(sortfn);
                      	if (span.getAttribute("sortdir") == 'down') {
                      			ARROW = '&nbsp;&nbsp;<img src="'+ image_path + image_down + '" alt="&darr;"/>';
                      			newRows.reverse();
                      			span.setAttribute('sortdir','up');
                      	} else {
                      			ARROW = '&nbsp;&nbsp;<img src="'+ image_path + image_up + '" alt="&uarr;"/>';
                      			span.setAttribute('sortdir','down');
                      	} 
                          // We appendChild rows that already exist to the tbody, so it moves them rather than creating new ones
                          // don't do sortbottom rows
                          for (i=0; i<newRows.length; i++) { 
                      		if (!newRows[i].className || (newRows[i].className 
                      		&& (newRows[i].className.indexOf('sortbottom') == -1))) {
                      			t.tBodies[0].appendChild(newRows[i]);
                      		}
                      	}
                          // do sortbottom rows only
                          for (i=0; i<newRows.length; i++) {
                      		if (newRows[i].className && (newRows[i].className.indexOf('sortbottom') != -1)) 
                      			t.tBodies[0].appendChild(newRows[i]);
                      	}
                      	// Delete any other arrows there may be showing
                      	var allspans = document.getElementsByTagName("span");
                      	for (var ci=0;ci<allspans.length;ci++) {
                      		if (allspans[ci].className == 'sortarrow') {
                      			if (getParent(allspans[ci],"table") == getParent(lnk,"table")) {
                      				allspans[ci].innerHTML =
                       '&nbsp;&nbsp;<img src="'+ image_path + image_none + '" alt="&darr;"/>';
                      			}
                      		}
                      	}		
                      	span.innerHTML = ARROW;
                      	alternate(t);
                      }
                      
                      function getParent(el, pTagName) {
                      	if (el == null) {
                      		return null;
                      	} else if (el.nodeType == 1 && el.tagName.toLowerCase() == pTagName.toLowerCase()) {
                      		return el;
                      	} else {
                      		return getParent(el.parentNode, pTagName);
                      	}
                      }
                      
                      function sort_date(date) {	
                      	// y2k notes: two digit years less than 50 are treated as 20XX, greater than 50 are treated as 19XX
                      	dt = "00000000";
                      	if (date.length == 11) {
                      		mtstr = date.substr(3,3);
                      		mtstr = mtstr.toLowerCase();
                      		switch(mtstr) {
                      			case "jan": var mt = "01"; break;
                      			case "feb": var mt = "02"; break;
                      			case "mar": var mt = "03"; break;
                      			case "apr": var mt = "04"; break;
                      			case "may": var mt = "05"; break;
                      			case "jun": var mt = "06"; break;
                      			case "jul": var mt = "07"; break;
                      			case "aug": var mt = "08"; break;
                      			case "sep": var mt = "09"; break;
                      			case "oct": var mt = "10"; break;
                      			case "nov": var mt = "11"; break;
                      			case "dec": var mt = "12"; break;
                      			// default: var mt = "00";
                      		}
                      		dt = date.substr(7,4)+mt+date.substr(0,2);
                      		return dt;
                      	} else if (date.length == 10) {
                      		if (europeandate == false) {
                      			dt = date.substr(6,4)+date.substr(0,2)+date.substr(3,2);
                      			return dt;
                      		} else {
                      			dt = date.substr(6,4)+date.substr(3,2)+date.substr(0,2);
                      			return dt;
                      		}
                      	} else if (date.length == 8) {
                      		yr = date.substr(6,2);
                      		if (parseInt(yr) < 50) { 
                      			yr = '20'+yr; 
                      		} else { 
                      			yr = '19'+yr; 
                      		}
                      		if (europeandate == true) {
                      			dt = yr+date.substr(3,2)+date.substr(0,2);
                      			return dt;
                      		} else {
                      			dt = yr+date.substr(0,2)+date.substr(3,2);
                      			return dt;
                      		}
                      	}
                      	return dt;
                      }
                      
                      function ts_sort_date(a,b) {
                      	dt1 = sort_date(ts_getInnerText(a.cells[SORT_COLUMN_INDEX]));
                      	dt2 = sort_date(ts_getInnerText(b.cells[SORT_COLUMN_INDEX]));
                      	
                      	if (dt1==dt2) {
                      		return 0;
                      	}
                      	if (dt1<dt2) { 
                      		return -1;
                      	}
                      	return 1;
                      }
                      function ts_sort_numeric(a,b) {
                      	var aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]);
                      	aa = clean_num(aa);
                      	var bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]);
                      	bb = clean_num(bb);
                      	return compare_numeric(aa,bb);
                      }
                      function compare_numeric(a,b) {
                      	var a = parseFloat(a);
                      	a = (isNaN(a) ? 0 : a);
                      	var b = parseFloat(b);
                      	b = (isNaN(b) ? 0 : b);
                      	return a - b;
                      }
                      function ts_sort_caseinsensitive(a,b) {
                      	aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]).toLowerCase();
                      	bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]).toLowerCase();
                      	if (aa==bb) {
                      		return 0;
                      	}
                      	if (aa<bb) {
                      		return -1;
                      	}
                      	return 1;
                      }
                      function ts_sort_default(a,b) {
                      	aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]);
                      	bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]);
                      	if (aa==bb) {
                      		return 0;
                      	}
                      	if (aa<bb) {
                      		return -1;
                      	}
                      	return 1;
                      }
                      function addEvent(elm, evType, fn, useCapture)
                      // addEvent and removeEvent
                      // cross-browser event handling for IE5+,	NS6 and Mozilla
                      // By Scott Andrew
                      {
                      	if (elm.addEventListener){
                      		elm.addEventListener(evType, fn, useCapture);
                      		return true;
                      	} else if (elm.attachEvent){
                      		var r = elm.attachEvent("on"+evType, fn);
                      		return r;
                      	} else {
                      		alert("Handler could not be removed");
                      	}
                      }
                      function clean_num(str) {
                      	str = str.replace(new RegExp(/[^-?0-9.]/g),"");
                      	return str;
                      }
                      function trim(s) {
                      	return s.replace(/^\s+|\s+$/g, "");
                      }
                      function alternate(table) {
                      	// Take object table and get all it's tbodies.
                      	var tableBodies = table.getElementsByTagName("tbody");
                      	// Loop through these tbodies
                      	for (var i = 0; i < tableBodies.length; i++) {
                      		// Take the tbody, and get all it's rows
                      		var tableRows = tableBodies[i].getElementsByTagName("tr");
                      		// Loop through these rows
                      		// Start at 1 because we want to leave the heading row untouched
                      		for (var j = 0; j < tableRows.length; j++) {
                      			// Check if j is even, and apply classes for both possible results
                      			if ( (j % 2) == 0  ) {
                      				if ( !(tableRows[j].className.indexOf('odd') == -1) ) {
                      					tableRows[j].className = tableRows[j].className.replace('odd', 'even');
                      				} else {
                      					if ( tableRows[j].className.indexOf('even') == -1 ) {
                      						tableRows[j].className += " even";
                      					}
                      				}
                      			} else {
                      				if ( !(tableRows[j].className.indexOf('even') == -1) ) {
                      					tableRows[j].className = tableRows[j].className.replace('even', 'odd');
                      				} else {
                      					if ( tableRows[j].className.indexOf('odd') == -1 ) {
                      						tableRows[j].className += " odd";
                      					}
                      				}
                      			} 
                      		}
                      	}
                      }
                      Zuletzt geändert von pascal007; 10.12.2010, 10:52.

                      Kommentar


                      • #12
                        Onlinebeispiel?!
                        Bitte Beachten.
                        Foren-Regeln
                        Danke

                        Kommentar


                        • #13
                          Du musst onload erstmal ts_makeSortable aufrufen, damit dieses gesuchte Element überhaupt angelegt wird.
                          [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
                          Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
                          Super, danke!
                          [/COLOR]

                          Kommentar


                          • #14
                            Das wird ja im sortable_init() gemacht . Dort werden alle Tabellen der Seite durchgeangen und auf sie die function ts_makeSortable() angewendet .

                            Oder habe ich dich jetzt falsch verstanden ?

                            Kommentar


                            • #15
                              Dann musst du halt zuerst sortable_init aufrufen. Das ist ja jetzt Krümelkackerei. Hauptsache, diese DOM-Manipulation passiert, bevor du dir dieses Element holen willst. Es muss halt erstmal da sein.
                              [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
                              Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
                              Super, danke!
                              [/COLOR]

                              Kommentar

                              Lädt...
                              X