jQuery-Anfänger - Bitte mal drüber schauen, da läuft was nicht rund

pyretta

Mitglied
Hallo,

ich fange gerade erst an mich mit jQuery bzw. jQuery mobile zu beschäftigen und schreibe aktuell eine Web-App auf Basis von jQuery mobile.

Jetzt habe ich ein Script erstellt das zwar zu funktionieren scheint, aber im Firefox 19 zu Script-Abbrüchen führt. Also es kommt die Meldung "Nicht antwortendes Script" bei dem man die Wahlmöglichkeit hat ob man das Script weiter ausführen oder beenden will. Klicke ich auf "Script weiter auführen" funktioniert alles so wie ich es mir vorgestellt hatte. Jetzt dachte ich, ich hab da sicher einige Fehler im Script, da ich ja noch Anfänger bin.

Könnt Ihr mal drüber schauen und mir erklären woran es liegt?

Folgende Scripts habe ich im Head eingebunden:
HTML:
<script src="js/jquery-1.8.2.js"></script>
<script src="js/jquery.mobile-1.3.0.min.js"></script>

Und hier nun mein wahrscheinlich fehlerhaftes Script, das ich im Body eingebunden habe:
HTML:
<script type="text/javascript">
function hideAddressBar(){
	  if(document.documentElement.scrollHeight<window.outerHeight/window.devicePixelRatio)
		document.documentElement.style.height=(window.outerHeight/window.devicePixelRatio)+'px';
	  setTimeout(window.scrollTo(1,1),0);
	}
	window.addEventListener("load",function(){hideAddressBar();});
	window.addEventListener("orientationchange",function(){hideAddressBar();});

$('#startseite').on("pageshow", function(){
		$('.panel_submenu li:first').css('margin-right',15);
		$('.panel_submenu li:odd').css('margin-right',15);		
		var path = "http://www.domain.de/images/icons/";		
		$('#liste').empty();
		$('.ui-input-search .ui-input-text').attr('placeholder',function(index,attr){
          		return attr.replace('Filter items...', 'durchsuchen...');
    			});
							
		$.getJSON('json/json-datei.json', function(data) {
			$.each(data.json.teaser, function(i,item) {
					var title = item.title;
					var teaser = item.teaser;
					var id = item.id;					
					$('<li class="aid_'+id+'"><a href="details.html" rel="external" data-transition="slide" onClick="javascript:sessionStorage.id=\''+id+'\';"><h3>'+title+'</h3>'+teaser+'</a></li>').appendTo('#liste');
					
					var tn_array = Array();					
					$('#liste img').each(function() {
						var scr = $(this).attr('src');
						var start_pos = scr.lastIndexOf('/')+1;
						var end_pos = scr.indexOf('.png',start_pos);
						var img_filename = scr.substring(start_pos,end_pos);						
						tn_array.push(img_filename);						
					}); /* ende each "tn_array" */	
					
					$.each(tn_array, function(index,value) {
						for (var i=0, len=value.length; i < len; i++) {
						$('#liste li.aid_'+id).addClass(value);
						}
					});	/* ende each "addClass" */	
					
			}); /* ende each "teaser" */
			
			$('#liste').listview('refresh');
			
			$('#liste img').attr('src',function(index,attr){
          		return attr.replace('content/images/icons/', path);
    			});	/* ende änderung bildpfad icons */
			
			$.each(data.json.filter, function(i,item2) {
				var pid = item2.pid;
				var title = item2.title;				
				var filteritem = '<div data-role="fieldcontain"><input type="checkbox" name="'+title+'" id="'+title+'" value="'+title+'" /><label for="'+title+'">'+title+'</label></div>';
				if(pid==1){
					$(filteritem).appendTo('#filter_1 form');
					}
				if(pid==2){
					$(filteritem).appendTo('#filter_2 form');
					}
				if(pid==3){
					$(filteritem).appendTo('#filter_3 form');
					}				
				if(pid==4){
					$(filteritem).appendTo('#filter_4 form');
					}			
			});/* ende each "filter" */
						
		});/* ende getJSON() */
	});/* ende "on pageshow" */
</script>

FireFox's Dialogfenster "Nicht antwortendes Script" verweist auf folgende Codezeilen in der Datei "jquery-1.8.2.js": Zeilen 119, 2056 und 5265.

Zeile 119:
Code:
// Handle HTML strings
if ( typeof selector === "string" ) {
	if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) {
	// Assume that strings that start and end with <> are HTML and skip the regex check
	match = [ null, selector, null ];

	} else {
		match = rquickExpr.exec( selector );          // das ist Zeile 119
	        }

Zeile 2056:
Code:
addClass: function( value ) {
	var classNames, i, l, elem,
			setClass, c, cl;

	if ( jQuery.isFunction( value ) ) {
			return this.each(function( j ) {
				jQuery( this ).addClass( value.call(this, j, this.className) );
			});
	}

	if ( value && typeof value === "string" ) {
			classNames = value.split( core_rspace );

			for ( i = 0, l = this.length; i < l; i++ ) {
				elem = this[ i ];

				if ( elem.nodeType === 1 ) {
					if ( !elem.className && classNames.length === 1 ) {
						elem.className = value;

					} else {
						setClass = " " + elem.className + " ";

						for ( c = 0, cl = classNames.length; c < cl; c++ ) {
							if ( setClass.indexOf( " " + classNames[ c ] + " " ) < 0 ) {
								setClass += classNames[ c ] + " ";
							}
						}

					elem.className = jQuery.trim( setClass );              // das ist Zeile 2056

				}
			}
		}
}

Zeile 5265:
Code:
select = function( selector, context, results, seed, xml ) {
	// Only use querySelectorAll when not filtering,
	// when this is not xml,
	// and when no QSA bugs apply
	if ( !seed && !xml && (!rbuggyQSA || !rbuggyQSA.test( selector )) ) {
		var groups, i,
		old = true,
		nid = expando,
		newContext = context,
		newSelector = context.nodeType === 9 && selector;

		// qSA works strangely on Element-rooted queries
		// We can work around this by specifying an extra ID on the root
		// and working up from there (Thanks to Andrew Dupont for the technique)
		// IE 8 doesn't work on object elements
		if ( context.nodeType === 1 && context.nodeName.toLowerCase() !== "object" ) {
			groups = tokenize( selector );

			if ( (old = context.getAttribute("id")) ) {
				nid = old.replace( rescape, "\\$&" );
					} else {
						context.setAttribute( "id", nid );
					}
					nid = "[id='" + nid + "'] ";

					i = groups.length;
					while ( i-- ) {
						groups[i] = nid + groups[i].join("");
					}
					newContext = rsibling.test( selector ) && context.parentNode || context;
					newSelector = groups.join(",");
				}

				if ( newSelector ) {
					try {
						push.apply( results, slice.call( newContext.querySelectorAll(
							newSelector

						), 0 ) );                     //das ist Zeile 5265

						return results;
					} catch(qsaError) {
					} finally {
						if ( !old ) {
							context.removeAttribute("id");
						}
					}
				}
			}

			return oldSelect( selector, context, results, seed, xml );
		};

Ich hoffe Ihr könnt etwas damit anfangen. Ich kann es leider noch nicht.
Ich verstehe lediglich, dass es wohl etwas mit dem Erstellen und Auslesen des Arrays "tn_array" zu tun hat.
Aber wie ich das beheben bzw. das Script verbessern kann, weiss ich leider noch nicht.

Könnt Ihr mir hier weiterhelfen? Würde mich wirklich sehr freuen.

Vielen Dank im Voraus für Eure Mühe. :)
 
Da diese Fehler nicht auf deinen Code sonder auf die jQuery-Datei verweisen behaupte ich mal das der Fehler nicht dort liegt. Habe bei mir schin mehr als einmal so eine Meldung bekommen und der Grund war immer das mein Code einen Fehler enthalten hat.

Bin mir nicht sicher aber was mir bei dir komisch vorkommt ist gleich am Anfang:

Javascript:
function hideAddressBar(){
if(document.documentElement.scrollHeight<window.outerHeight/window.devicePixelRatio)
    document.documentElement.style.height=(window.outerHeight/window.devicePixelRatio)+'px';
    setTimeout(window.scrollTo(1,1),0);
}
window.addEventListener("load",function(){hideAddressBar();});
window.addEventListener("orientationchange",function(){hideAddressBar();});

Fehlt hier nicht die Klammer/die Klammern um diese Funktion zu beenden!?
 
Hallo tombe,

vielen Dank für Deine Antwort.

Javascript:
function hideAddressBar(){
	  if(document.documentElement.scrollHeight<window.outerHeight/window.devicePixelRatio)
		document.documentElement.style.height=(window.outerHeight/window.devicePixelRatio)+'px';
	  setTimeout(window.scrollTo(1,1),0);

	} //hier wird doch die Funktion geschlossen, oder?

	window.addEventListener("load", function(){hideAddressBar(); 
                               } // hier wird diese funktion geschlossen, oder?
         ); // hier window, oder?
	window.addEventListener("orientationchange", function(){hideAddressBar();
                               }// hier wird diese funktion geschlossen, oder?
         );// hier window, oder?

Ich bin wirklich noch Anfänger, also sowas wie Klammern vergessen kann bei mir ganz häufig passieren :D . Aber ich dachte eigentlich ich hätte alle Klammern geschlossen? Oder fehlt da tatsächlich eine? Ich gebe zu in dem Code oben war die Formatierung nicht perfekt, so konnte man das schlechter sehen.

Also scheinbar weist mein Code keinen "Fehler" auf. Zumindest nicht laut der Prüfung des Firefox-Addons "Web-Developer". Der meldet mir ein grünes Häkchen nach dem das Script vollständig geladen wurde (ich also mehrmals auf "Script weiter ausführen" geklickt habe) - also keine JavaScript Errors auf der Seite.

Aber warum dann eine solche Meldung? Dauert auch alles elends lange.

Führe die Datei momentan übrigens noch lokal aus, also an einem Server oder dergleichen kann es schonmal nicht liegen.
 
Zuletzt bearbeitet von einem Moderator:
Ok, dann anders.

Was braucht man alles um diese Seite "zu Hause" mal selber zu testen? Irgend welcher anderer (HTML) Code gehört da ja noch sicher noch dazu. Kannst du vielleicht mal die komplette Datei hier einstellen.

Am besten nicht den Code sondern per Datei-Upload einstellen.

Was mir noch gerade einfällt. Hast du den Code so wie oben in der Seite stehen oder gibt es:

Javascript:
$(document).ready(function() {
// und hier das was jetzt oben steht
});

auch drin?

Wenn "document ready" fehlt gibt es auch manchmal Probleme!
 
Zuletzt bearbeitet:
Ich habe mal dein ursprüngliches Skript formatiert und etwas organisiert und aufgehübscht. Vielleicht finden wir somit jetzt leichter den Fehler:
Javascript:
function hideAddressBar ()
{
  if (document.documentElement.scrollHeight < window.outerHeight / window.devicePixelRatio) {
    document.documentElement.style.height = (window.outerHeight / window.devicePixelRatio) + 'px';
  }
  
  window.scrollTo(1, 1);
}

$(window).on('orientationchange', function () {
  hideAddressBar();
});

$(function () {
  hideAddressBar();
  
  $('#startseite').on('pageshow', function () {
    var path = 'http://www.domain.de/images/icons/';    
  
    $('.panel_submenu li:first, .panel_submenu li:odd').css('margin-right', 15);
    $('#liste').empty();
    $('.ui-input-search .ui-input-text').attr('placeholder', function (index, attr) {
      return attr.replace('Filter items...', 'durchsuchen...');
    });
                
    $.getJSON('json/json-datei.json', function (data) {
      $.each(data.json.teaser, function () {
        var title  = this.title;
        var teaser = this.teaser;
        var id     = this.id;
        $([
          '<li class="aid_', id, '">',
            '<a href="details.html" rel="external" data-transition="slide" onClick="javascript:sessionStorage.id=\'', id, '\';">',
              '<h3>', title, '</h3>',
              teaser,
            '</a>',
          '</li>'
        ].join('')).appendTo('#liste');
        
        var tn_array = [];
            
        $('#liste img').each(function () {
          var scr       = $(this).attr('src');
          var start_pos = scr.lastIndexOf('/') + 1;
          var end_pos   = scr.indexOf('.png', start_pos);
          var img_filename = scr.substring(start_pos, end_pos);            
          tn_array.push(img_filename);            
        }); // end of each "tn_array"  
            
        $.each(tn_array, function (index, value) {
          for (var i = 0, var len = value.length; i < len; i++) {
            $('#liste li.aid_' + id).addClass(value);
          }
        });  // end of each "addClass"  
      }); // end of each "teaser"
        
      $('#liste').listview('refresh');
        
      $('#liste img').attr('src', function (index, attr) {
        return attr.replace('content/images/icons/', path);
      });  // end of change path to image icons
        
      $.each(data.json.filter, function () {
        var pid   = this.pid;
        var title = this.title;
        var $item = $([
          '<div data-role="fieldcontain">',
            '<input type="checkbox" name="', title, '" id="', title, '" value="', title, '" />',
            '<label for="', title, '">', title, '</label>',
          '</div>'
        ].join(''));
        
        switch (pid) {
          case 1:
            $item.appendTo('#filter_1 form');
            break;
          case 2:
            $item.appendTo('#filter_2 form');
            break;
          case 3:
            $item.appendTo('#filter_3 form');
            break;
          case 4:
            $item.appendTo('#filter_4 form');
            break;
        }
      }); // end of each "filter"
    }); // end of getJSON
  }); // end of "on pageshow"
});
 
Zuletzt bearbeitet:
Wow! Vielen Dank "einfach nur crack"! Du Hast bald n Kasten Bier oder dergleichen verdient :D . Ehrlich :) bin beeindruckt von Deiner Hilfsbereitschaft.

@tombe: Dir auch vielen Dank. :) Ich nutze hier jQuery Mobile und in einem VideoWorkshop von Video2Brain (ja, ich bring mir das tatsächlich grade erst von der Pieke an bei.. bzw. versuchs zumindest) habe ich gelernt, dass es dort kein document.ready mehr geben soll. Da gibts dann "$(document).bind('pageinit');" oder "$(document).bind('pagecreate')" oder eben das, was ich verwendet hab "$('#startseite').on('pageshow', function () {...});". Oder meinst du da sollte sicherheitshalber noch ein "document.ready" rein? Wo müsste ich das dann hintun? Um den ganzen Code drum rum?

Jedenfalls vielen lieben Dank für Eure Unterstützung und Geduld. :)
Ich bemühe mich schnell zu lernen :D
 
Pyretta, dass $(document).ready(function () { ... }); wurde bei mir durch folgendes ersetzt, was in allen jQuery-Versionen unterstützt wird und gleich funktioniert:
Javascript:
$(function () {
  // ...
});
 
@einfach nur crack: In Zeile 77 des Codes ist ein Fehler drin. Hinter dem break fehlt das ;

@pyretta: Hast du diesen Code eingesetzt und wenn ja hat sich was geändert?
 
Jungs, Ihr seid Spitze!
Vielen Dank. Jetzt läuft alles rund. :)

Hab den Code von "einfach nur crack" verwendet. Damit gehts wirklich gut.
 
Zurück