nette.ajax.js vypnutí History API pro některé odkazy

Oli

Ahoj,
hledal jsem, ale nikde jsem to neviděl. Používám nette.ajax.js, ale mám s ním jeden problém. Pokud zapnu history API, tak se potom zobrazuje do URL všechno, což nechci. Zároveň bych chtěl nechat pro některé odkazy history API zapnuto.

Jde nějak udělat např. že by pomocí class="ajax" se odeslal ajax bez a pomocí class="history-ajax" s history API?

Díky

Casper

Co třeba takto?

@layout.latte

<body>
{block #head}{/block}
<script type="text/javascript">
	$(function () {
		$.nette.init();
	});
</script>
</body>

@view.latte

{block #head}
<script type="text/javascript">
	$(function () {
		$.nette.ext('history', null);
	});
</script>
{/block}

Oli

Díky, ale. To resi jen napul ne? jestli to chapu dobre, tak to vypne/zapne pro celou jednu stranku. Takze napr. Homepage:default bude s history a Homepage:detail bez history. Pokud to nepujde jinak, tak bych to asi takhle pouzil, ale beru to jen jako nouzovku :-)

Vojtěch Dobeš

Řešením je vypnout výchozí bindování, tj. rozšíření init :).

$.nette.ext('init', false);
$.nette.ext('init', {
	load: function (rh) { // rh je výchozí způsob ajaxifikace, tady to hacknem
		rh = function (e) {
			return if (!$.nette.ajax({
				off: $(this).is('.history-ajax') ? [] : ['history']
			}, this, e)) return;
		};
		$(this.linkSelector).off('click.nette', rh).on('click.nette', rh);
		$(this.formSelector).off('submit.nette', rh).on('submit.nette', rh)
			.off('click.nette', ':image', rh).on('click.nette', ':image', rh)
			.off('click.nette', ':submit', rh).on('click.nette', ':submit', rh);
		$(this.buttonSelector).closest('form')
			.off('click.nette', this.buttonSelector, rh).on('click.nette', this.buttonSelector, rh);
	}
}, {
	linkSelector: 'a.ajax,a.history-ajax',
	formSelector: 'form.ajax,form.history-ajax',
	buttonSelector: 'input.ajax[type="submit"],input.history-ajax[type="submit"], button.ajax[type="submit"],button.history-ajax[type="submit"], input.ajax[type="image"],input.history-ajax[type="image"]'
});

Editoval vojtech.dobes (28. 11. 2013 10:01)

Oli

Díky moc, ale nepovedlo se mě to rozchodit. Nemáš tam překlep? Ta část, která po mě chce něco jinýho v IDE je:

rh = function (e) {
     return if (!$.nette.ajax({ //zkoušel jsem tohle return odstanit, pak byl ide spokojenej, ale stejně to nefungovalo
         off: $(this).is('.history-ajax') ? [] : ['history']
     }, this, e)) return;
};

Tahle konstrukce je na mě tak trochu divočina. :-) Předpokládám, že ta funkce má vrátit pokud neexistuje $.nette.ajax off s nebo bez history. jinak skoncit. Ale nepodařilo se mě to uvést do funkčního stavu.

Vojtěch Dobeš

Jo, to, co jsem napsal, je pochopitelně nesmysl :).

rh = function (e) {
	if (!$.nette.ajax({
		off: $(this).is('.history-ajax') ? [] : ['history']
	}, this, e)) return;
};

Editoval vojtech.dobes (2. 12. 2013 21:19)

enumag

vojtech.dobes: Huh? Jakej význam má return; na konci funkce? A k čemu tam je ten if?

Vojtěch Dobeš

@enumag: Dobré otázky, někdy je třeba skutečně otevřít oči a uvědomit si, na co se člověk dívá. Opravím to. Ano, stačí pouze:

rh = function () {
	$.nette.ajax({
		off: $(this).is('.history-ajax') ? [] : ['history']
	}, this, e);
};

Editoval vojtech.dobes (2. 12. 2013 21:19)

Oli

Díky. Všiml jsem si až dneska, že jsi už dopověděl. Nicméně pořád mě to nejde. Připojuju to takhle, aby bylo jasno jestli nemám chybu někde jinde:
layout:

<script type="text/javascript" src="{$basePath}/js/ajax/nette.ajax.js"></script>
<script type="text/javascript" src="{$basePath}/js/ajax/history/history.ajax.js"></script>
<script type="text/javascript" src="{$basePath}/js/main.js"></script>

main.js:

$.nette.ext('init', false);
$.nette.ext('init', {
load: function (rh) { // rh je výchozí způsob ajaxifikace, tady to hacknem
	rh = function () {
		$.nette.ajax({
			off: $(this).is('.history-ajax') ? [] : ['history']
		}, this, e);
	};
	$(this.linkSelector).off('click.nette', rh).on('click.nette', rh);
	$(this.formSelector).off('submit.nette', rh).on('submit.nette', rh)
	.off('click.nette', ':image', rh).on('click.nette', ':image', rh)
	.off('click.nette', ':submit', rh).on('click.nette', ':submit', rh);
	$(this.buttonSelector).closest('form')
	.off('click.nette', this.buttonSelector, rh).on('click.nette', this.buttonSelector, rh);
}
}, {
	linkSelector: 'a.ajax,a.history-ajax',
	formSelector: 'form.ajax,form.history-ajax',
	buttonSelector: 'input.ajax[type="submit"],input.history-ajax[type="submit"], button.ajax[type="submit"],button.history-ajax[type="submit"], input.ajax[type="image"],input.history-ajax[type="image"]'
});

Bootstrap:

$configurator->onCompile[] = function ($configurator, $compiler) {
	$compiler->addExtension('ajax', new VojtechDobes\NetteAjax\Extension);
};

Jestli to připojuju dobře, mohl by jsi se prosím ještě jednou podívat na ten kod, jestli je opravdu dobře? Když to ale v tom main.js připojím normálně, tak to funguje (history i bez history, ale vždy buď jedno nebo druhe – podle toho jeslti je nalinkovanej history.ajax.js). Diky :-)

Oli

To řešení se mě nakonec nepovedlo zprovoznit. Řešil jsem to @Casperho radou, ale teď by se mě fakt hodilo umět to ovlivnit třeba třídou. Umí to už nějak nová verze nette.ajax.js nebo jsem tvou radu blbě použil?

wodCZ

Podle tohoto si myslím, že by mělo fungovat

<a n:href="doIt!" class="ajax" data-ajax-off="history">Do it!</a>

nová verze nette.ajax.js už nemá history, ten je teď jako samostatný addon (odděleno to bylo řekl bych kvůli server-side kódu?) – nette.ajax.js stále potřebuje.

Oli

Super, tohle funguje parádně! Díky moc! ;-)