Monthly Archives: december 2012

Asynchroon JQuery laden met yepnope – bijna, maar valkuilen

Vandaag ben ik tegen een probleem aangelopen dat ik niet (helemaal) heb kunnen oplossen. Ik wil graag onderstaande code gebruiken om asynchroon JQuery in te laden (met behulp van yepnope).

<script src="/scripts/modernizr-2.6.2.min.js" type="text/javascript"></script>
<script src="/scripts/yepnope.1.5.4-min.js" type="text/javascript"></script>
<script type="text/javascript">
	var docready = [], $ = function () { return { ready: function (fn) { docready.push(fn); } }; };
	yepnope({
		load: '//ajax.googleapis<em><strong>OFFLINE</strong></em>.com/ajax/libs/jquery/1.8.2/jquery.min.js',
		complete: function () {
			if (!window.jQuery) {
				yepnope({ load: '/scripts/jquery-1.8.2.min.js', complete: initJQuery });
			} else {
				initJQuery();
			}
		}
	});

	function initJQuery() {
		$ = window.jQuery;
		for (var index in docready) $(document).ready(docready[index]);
	}
</script>

De code werkt bijna helemaal.

De code werkt bijna perfect. De JQuery bibliotheek wordt geladen vanuit de Google CDN, zoals gevraagd, en wanneer die niet beschikbaar is, valt het script terug naar het laden van het lokale script. Terwijl de jQuery bibliotheek is nog niet geladen, zet ik alle $(document).ready() calls in de wacht om ze alsnog uit te voeren wanneer jQuery volledig is geladen. Dit werkt! Maar ik ontdekte dat JQuery plugins niet werken met deze code, omdat ze het jQuery of $ object nodig hebben.

Ik weet dat ik de initJQuery functie zou moeten gebruiken voor het laden van JQuery gebaseerde plugins omdat ik gebruik wil maken van asynchroon laden. Helaas kan dit niet, omdat sommige plugins ingevoegd worden door bij ASP.NET partial views of m.b.v. Rejuicer. Op dit moment blijf ik werken met de synchroon geladen jQuery plugin (zo laat mogelijk) en vang ik nog steeds de $(document).ready() calls op voor latere (gegarandeerde) uitvoering. Ik ben wel benieuwd naar jullie oplossingen ;) .

PS. Ow, op dit moment, het stukje code dat ik op dit moment gebruik is:

// in head:
<script type="text/javascript">var docready = [], $ = function () { return { ready: function(fn) { docready.push(fn); } }; };</script>

// just before </body> tag:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">window.jQuery || document.write('<script src="/scripts/jquery-1.8.2.min.js" type="text/javascript"><\/script>')</script>
<script type="text/javascript">
    // fire all preliminary $(document).ready(fn) calls immediately after jquery is loaded.
    $ = jQuery;
    for (n in docready) $(document).ready(docready[n]);
</script>

Zelfsluitende iframe tag zorgt voor falende Javascript uitvoering

Voor een project waaraan ik momenteel werk, moet ik een iframe te gebruiken. Sinds ik de iframe in mijn web applicatie heb opgenomen, is de JavaScript code eronder meteen gestopt met werken. Ik heb het probleem eerst niet gezien en heb pas na veel zoeken ontdekt dat de iframe het probleem veroorzaakt. Ik gebruikte een zelfsluitende iframe tag. De oplossing voor het probleem was om een ​​afsluitende iframe tag te gebruiken in plaats van een zelfsluitende iframe… Dit is een eenvoudige oplossing, ik neem aan dat meer mensen met dit probleem zullen worden geconfronteerd – hopelijk kan ik jullie hiermee helpen ;) .