Nette.ajax.js – Ajax nefunguje v IE8 po invalidaci snippetu

iguana007

Ahoj,
tímto zakládám samostatné vlákno, na můj problém, který se původně řešil v nette.ajax.js vlákně Vojty Dobeše, ale toto vlákno je poměrně hodně frekventované. Můj dotaz tam již zapadnul a stále se nevyřešil.

Původní popis problému:

mám úplně jednoduchou mini aplikaci v Nette 2.2.7, která se mi načítá uvnitř Windows gadgetu na ploše
jelikož se jedná o korporátní laptop s centralizovanou správou software, tak nejsem schopen ovlivnit verzi IE, která obstárává render gadgetu – v tomto případě se jedná o verzi IE 8.0.7601.17514
gadget mi vykresluje pouze několik odkazů (v podstatě jde jen o switche se stavy on/off), které jsou obalené ve snippetu. Klasický (neajaxový)odkaz se mi nepodařilo rozchodit, protože jej gadget otevírá v novém okně prohlížeče namísto uvnitř gadgetu, proto to musí být ajaxově
všechny tyto ajaxové odkazy jsou uvnitř snippetu, který se invaliduje po každém kliku na jeden z výše zmíněných odkazů
Problém: když kliknu na jakýkoli odkaz, tak se zcela bez problémů ajaxový požadavek vykoná, ale poté se snippet překreslí, tím pádem všechny odkazy a jakýkoli další klik se již vykonává bez ajaxu a tím pádem mi to otevře daný link v browseru (jak jsem popisoval výše)
zkoušel jsem aplikaci i přímo v prohlížeči (výše zmíněné IE8) a tam se to chová stejně, takže tím bych vyloučil, že je na vině gadget jako takový, ale bude se pravděpodobně jednat o nějaký bug IE, kdy se linky vykreslené invalidací snippetu stanou neajaxovými (nenavěsí se už na ně ajax handle)
IE nehlásí žádné JS chyby v konzoli, takže kód by měl být ok
v prohlížečích jako Chrome, FF apod. to funguje jak má a každý z kliků se provede ajaxem, takže tím bych předpokládal, že implementaci mám správnou, jen je třeba vymyslet nějaky fix pro IE
jelikož se jedná o úplně jednoduchou aplikaci, tak načítám pouze následující JS: jQuery 1.11.2, nette.ajax.js, spinner.ajax.js a následně volám $.nette.init(); – co se týče verzí, tak jsem vše stáhnul tento týden z gitu apod.

Zdrojáky:

@layout.latte

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta charset="utf-8">
	<title>Some Title</title>
	<link rel="stylesheet" media="screen,projection,tv" href="{$basePath}/css/screen.css?{=time()}">
	<link rel="shortcut icon" href="{$basePath}/favicon.ico">
</head>
<body>
	<div id="header">
		<a href="#" onclick="window.location.reload(true);return false;">
			<img src="{$basePath}/images/logo.png" alt="Logo">
		</a>
	</div>
	<div n:foreach="$flashes as $flash" class="flash {$flash->type}">{$flash->message}</div>
	{include content}
	<script src="{$basePath}/js/jquery.js"></script>
	<script src="{$basePath}/js/nette.ajax.js"></script>
	<script src="{$basePath}/js/spinner.ajax.js"></script>
	<script>
		$(function(){
			$.nette.init();
		});
	</script>
</body>
</html>

Homepage:default.latte

{block content}
{snippet switches}
	<div id="switchesBlock">
	{foreach $switches as  $s}
		<p class="row">
		{if $s->type=="switch"}
			<span>{$s->name}:&nbsp;</span>
			{if $s->value=='on'}
				{var $newState = 'off'}
			{else}
				{var $newState = 'on'}
			{/if}
			<a n:href="updateSwitch! switchId => $s->id, newState => $newState" class="ajax switch">
				<img src="{$basePath}/images/{$s->value}.png">
			</a>
			<br>
		{else}
			<span>{$s->name}:&nbsp;</span><strong>{$s->value}</strong><br>
		{/if}
		</p>
	{/foreach}
	<span id="lastUpdate">Last update at: {=date('Y/m/d H:i:s')}</span>
	</div>
{/snippet}
{/block}

Co jsem již zkusil:

@akadlec mě navigoval na debugging JS chyb, ale žádné mi IE nehlásí, takže chyby ve formě překlepu apod. bych vyloučil. Dále jsem analyzoval response po tom prvním kliku a ten vypadá také ok – vrací se normálně JSON s aktualizovaným snippetem

@Lexi mi doporučoval odstranit $.nette.load(); ze snippetu, který se vykonával po invalidaci snippetu, což nepomohlo. Dále mi doporučoval nahradit jeden z řádků v ajax.nette.js:

Toto:

$(this.linkSelector).off('click.nette', rh).on('click.nette', rh);

nahradit tímto:

$("body").off('click.nette', this.linkSelector, rh).on('click.nette', this.linkSelector, rh);

což problém také neřeší a ajax stále funguje pouze do doby, než se snippet invaliduje, po první invalidaci ajax na odkazech s class=„ajax“ nešlape…

Ještě jednou pro jistotu píšu, že to zlobí pouze v IE8, ostatní browsery (Chrome, FF) jedou ok – bohužel to musím mít na 100% funkční v tom IE8 :(

Předem díky za jakýkoli tip/radu…

iguana007

Pokud by si chtěl někdo projít původní diskuzi, tak ta začíná tady: https://forum.nette.org/…jax-s-jquery?p=13

Editoval iguana007 (13. 2. 2015 12:59)

iguana007

@vojtech.dobes ty by si prosim netusil, v cem by mohl byt zakopany pes?

iguana007

Tak už to mám vyřešené, vypadá to, že to vyřešila úprava init js:

	<script>
		$(function(){
			$.support.cors = true;
			$.nette.init();
		});
	</script>

Vojtěch Dobeš

Wow, interesting :). Už jsem si zprovoznil nějaký IE online emulátor a plánoval se tomu večer věnovat :).