Překreslení snippetu s javascriptem

kleinpetr

Ahoj,

vím, že se to tu řešilo už milionkrát, ale nikde nemůžu dohledat případ kdy mám např. nějaký js plugin pro checkboxy checkbox.js ten kdyz nalinkuju do porjectu tak vsechny inputy ktere maji data-toggle=„switch“ se prekreslí na switcher.

Nyní když invaliduju snippet, tak samozřejmě nenabinduje ten soubor, vždycky jsem invalidaci js řešil takto v @layout:

{snippet scripts}
	<script src="{$basePath}/js/checkbox.js"></script>
	$(document).ready(function(){
		$.nette.init();

		//veskery js ktery se prenasi ajaxem
	});
{/snippet}

a vždy při volání ajaxu jsem překreslil i $this->rendrawControl('scripts') takže to fungovalo, nicméně zrovna teď, třeba u toho checkboxu, když ho mám 2× na stránce a překreslím jen jedno místo, tak na tom druhém se napojí ten plugin znovu, tudíž se rozsype. A to nemluvím o vícečetné inicializaci nette.init(), kterou samozřejmě nemusím načítat uvnitř snippetu scripts.

Nicméně už bych to chtěl řešit nějak normálně a né touhle prasárnou..

koukal jsem na $.nette.ext(), ale asi jsem úplně nepochopil jak to využít.

Díky

srigi

To co hladas je hook na eventy nette.ajax. Vzdy ked sa snippet uspesne updatne, stary DOM sa zahodi (aj s tvojimi „napluginovanymi“ checkboxmi) a nahradi sa novym DOM, ktory musis reinicializovat. Pouziva sa to takto:

$.nette.init();

$.nette.ext('ajax', {
  success: function(payload) {
    // reinitialize switches
    $('[data-toggle="switch"]').yourCheckboxPlugin({...opts});
  }
});

kleinpetr

To jsem pochopil z těch postů co jsem pročítal, ale

Co značí ‚ajax‘
co obsahuje (payload)
nevím jak inicializovat ten checkbox plugin, už jsem to zkoušel, ale zkrátka si sám načte prvky, které mají data-toggle.

kleinpetr

Tak jsem to našel..

tohle inicializuje ty switchery

$('[data-toggle="switch"]').each(function (){
    $(this).wrap('<div class="switch" />').parent().bootstrapSwitch();
});

Ale není to ošetřené proti opakovanému napojení.. zkoušel jsem to podmiňovat style if(!$(this).is(‚bootstrapSwitch‘)) a mnoho dalšími, ale vždy hodí false.. jak tedy mohu zjisit zda už je element nabindován ?

Ono to totiž ve vráceném snippetu funguje, ale na stránce je mám načteny ještě jinde, kde se nenačítá snippet a tam se ten plugin nabidnuje znovu a znovu.. díky !

P.S. došlo mi co je v payloadu, jen nevím jestli to někdy budu potřbovat, ale možné to je.

CZechBoY

Tak to nabinduj jen v tom snippetu. Třeba podle id si vyber ten kontejner a nad nim zavolej ten bind.

kleinpetr

Asi jsem tp špatně napsal, jde o to, že to funguje dobře, jen když mám jinde na stránce načteny prvky, které již tento plugin mají a spustím nějaký ajax tak se mi ten plugin nabidnuje zase na všechny prvky bez ohledu jestli jsou v posílaném snippetu nebo ne..

vitkutny

buď zařídíš, že se

$('[data-toggle="switch"]').each

provede jen jednou pro každý prvek, například odstraněním data atributu po inicializaci

nebo budeš provádět inicializaci pouze pro konkrétní snippety

success: function(payload) {
	for snippet in payload.snippets
		$('#' + snippet + '[ data-toggle="switch"]').each

kleinpetr

To je ono, díííky ! Ale i tak si myslím, že by neměl jít plugin bindovat několikrát na sebe, ale toto funguje :)

Editoval kleinpetr (22. 11. 2015 16:22)