Modální okno z obsahu jQuery/AJAX

Zdravím,
zkouším na stránky vložit jQuery a využít jeho AJAXových funkcí.
Spustit AJAX pomocí jQuery se mi podařilo a téměř funguje jak jsem potřeboval. Odešlu form, AJAX data zpracuje a zobrazí v připraveném divu. Ale narazil jsem na jeden problém...

Konkrétně tímto způsobem aktualizuji ceník (HTML tabulka). Tabulka obsahuje jen 6 řádků a na konci každého řádku jsou dvě ikonky: 1. pro vymazání (vynulování) řádku a 2. pro editaci řádku. Tyto ikonky mají vyvolávat modální okno FancyBox, kde se natavují nové údaje.

Ale po té, co jsem předělal tabulku tak, aby byla vygenerovaná jQuery/AJAXem, modální okna nefungují, vůbec nevyskakují. JS bohužel moc nerozumím a kód jsem dal dohromady pomocí různých ukázek.

Zde je kód který momentálně používám:

Kód:

$(document).ready(function() {
	$("#form_new_def_currency").live('change',function(){  			
		$("#ajax-pricelist").show('slow'); 			
		$.ajax({  
			type: "POST", 
			url: 'pricelist_ajax.php', 
			data: {
				id_object:		$("#id_object").val(),
				abbr_currency:	$("#abbr_currency").val()
			},
			complete: function(data){  
				$("#ajax-pricelist").html(data.responseText);  
			}  
		}); 
		
		$('a.iframe-pricelist-edit').fancybox({
			width			: 402,
			height		: 446,
			autoScale		: false,
			transitionIn		: 'elastic',
			transitionOut	: 'elastic',
			titlePosition 	: 'no',
			scrolling		: 'no',
			overlayOpacity	: 0.7,
			overlayColor	: '#000000',
			type			: 'iframe',				
			onClosed		: function(){window.location.reload(true);}
		});
		return false;  
	}); 
});

Zkoušel jsem kód pro vyvolaní modálního okna vkládat do AJAXu do funkce Complete nebo i do Success, protože mi bylo doporučeno, aby byl kód FancyBox načten až po úplném načtení stránky, tedy všech odkazů (nevím, jestli to dobře popisuji?).
Také jsem zkoušel plugin Listen, na který jsem našel odkaz zde na fóru, ale s ním se mi nepodařilo rozběhat ani jQuery/AJAX.

Kdybyste mi dokázal někdo pomoci, byl bych velice rád,
moc děkuji.

Pokud se odkazy se třídou .iframe-pricelist-edit načítají ajaxem, tak by kód pro fancybox opravdu měl být ve funkci complete. Jinak mi moc nedává smysl kód předávaný parametrem onClosed, který po zavření okna načte stránku znova, což mi do ajaxového řešení moc nezapadá. Bez živé ukázky není bohužel možné dát nějakou přesnější odpověď. Vypisuje něco chybová konzola?

Diky za první odpověď.
Pokud kód pro FancyBox vložím do complete, tak se mi odkazy se třídou .iframe-pricelist-edit (vygenerované AJAXem), otevírají jako nová stránka.
Co se týče parametru onClosed, tak ten tam je prozatím ponechán z původní verze, která byla bez AJAXu. Ale vím o tom, že to budu muset změnit - ale vše popořadě (teda podle mně :-) )
Firebug mi žádnou chybu v JS nevypisuje.
Živou ukázku musím někde připravit (ale to bude až někdy pozdě večer).

Jinak co complete jsem to vlozil takto:

Kód:

...
complete: function(data){  
	$("#ajax-pricelist").html(data.responseText, function(){			
		$('a.iframe-pricelist-edit').fancybox({
			width			: 402,
			height			: 446,
			autoScale		: false,
			transitionIn	: 'elastic',
			transitionOut	: 'elastic',
			titlePosition 	: 'no',
			scrolling		: 'no',
			overlayOpacity	: 0.7,
			overlayColor	: '#000000',
			type			: 'iframe',				
			onClosed		: function(){window.location.reload(false);}
		});
	});  
}  
...

Potřebujete navěsit metodu na prvek, který zatím neexistuje. To se dělá pomocí metody .on(), dřív .live()
http://api.jquery.com/on/

Kód:

$('#ajax-pricelist').on('mouseover', 'a.iframe-pricelist-edit', function(event) {
    $(event.target).fancybox( ... );
}

Nebo tím, že Fancybox aktivujete vždycky při načtení nového obsahu. Tam jste to chybně poslal jako argument metody html()

Kód:

complete: function(data){  
    $("#ajax-pricelist").html(data.responseText);
    $('a.iframe-pricelist-edit').fancybox( ... );
}

Petr-K: Tím se to vysvětluje. Funkce html nepotřebuje callback, protože běžný kód je narozdíl od ajaxového volání synchronní, takže se nejdřív počká na dokončení jedné operace a až potom se vykoná další(v tomhle případě inicializace fancyboxu).

Martin: V případě navěšení na mouseover by podle mě bylo dobré nějak odlišit už inicializované prvky(například třídou), aby nedocházelo k inicializaci opakovaně.

Kód:

$('#ajax-pricelist').on('mouseover', 'a.iframe-pricelist-edit:not(.fancybox-initialized)', function(event) {
    $(event.target)
        .addClass('fancybox-initialized')
        .fancybox( ... );
});

Dobrá připomínka, je dobré si odlišit ty, které to už mají inicalizované, ať to nevoláme zbytečně.
Ještě jednodušší by bylo odstranit třídu, pokud na ní není nic jiného

Kód:

$('#ajax-pricelist').on('mouseover', 'a.iframe-pricelist-edit', function(event) {
    $(event.target)
        .fancybox( ... );
        .removeClass('iframe-pricelist-edit')
});

A kdybych to dělal já, zvážil bych přeskočit metodu fancybox() úplně, ale přímo volat ten proces. Tedy podle toho, jak to uvnitř Fancyboxu vypadá.

Kód:

$('#ajax-pricelist').on('click', 'a.iframe-pricelist-edit', function(event) {
    $(event.target).getFancy({ ... });
}

Zdravím, tak už jsem tu.
Zkouším nyní Vámi navrhovaná řešení a funguje to, díky moc chlapi!

Zatím jsem použil první řešení, podle Martina, a jsem nadšený, funguje to! Jestě ted otestuji návrh 800XE a uvidím u čeho zůstanu.

Jestli mohu, tak mám jětě dva drobnější dotazy :-) :
1) Martin: Moc nerozuím tému poslednímu návrhu řešení, jak bys to řešil ty. Hledal jsem co je getFancy a nenašel. Jak jsem psal na úvod, jQuery lepím hlavně z různých ukázek JS nikdy nebyl má slná stránka, stále s ním bojuji. Mohl bys mi dát nějaké vysvětlení proč bych ho měl použít a ja to funguje?
2) 800XE: Jak mohu vyřešit onClosed AJAXově?

Jestě ted otestuji návrh 800XE

To bylo spíš jenom drobné vylepšení.

Jak mohu vyřešit onClosed AJAXově?

Jednoduše - nedávej ho tam :-).

Hledal jsem co je getFancy a nenašel

Trochu ty varianty rozepíšu:

Kód:

...
complete: function(data){  
    $("#ajax-pricelist").html(data.responseText);
    $('a.iframe-pricelist-edit').fancybox( ... );
}
...

- Po načtení prvků se každý zvlášť inicializuje pro použití fancyboxu.

Kód:

...
$('#ajax-pricelist').on('mouseover', 'a.iframe-pricelist-edit:not(.fancybox-initialized)', function(event) {
    $(event.target)
        .addClass('fancybox-initialized')
        .fancybox( ... );
});
...
complete: function(data){  
    $("#ajax-pricelist").html(data.responseText);
}
...

- Po dotažení prvků se neinicializuje nic. Až po najetí myší na některý z odkazů .iframe-pricelist-edit se událost odchytí v prvku, který je všem odkazům nadřazený(#ajax-pricelist) a tam se fancybox inicializuje pro ten konkrétní odkaz. To je o něco lepší řešení.

Kód:

...
$('#ajax-pricelist').on('click', 'a.iframe-pricelist-edit', function(event) {
    $(event.target).getFancy({ ... });
}
...
complete: function(data){  
    $("#ajax-pricelist").html(data.responseText);
}
...

- Tohle podle mě bylo myšleno obecně. Fancybox nepoužívám, ale teoreticky by v něm mohla být i funkce, která okno fancyboxu zobrazí hned, aniž by se předtím musela asociovat s nějakým prvkem. Fungovalo by to podobně jako v předchozím případě, v podstatě jde zase o malé zjednodušení přeskočením jednoho kroku. Taky by to bylo efektivnější v tom ohledu, že v předešlých variantách se fancybox inicializoval, aniž by bylo jasné, že se někdy použije. Tu funkci si Martin pojmenoval jako getFancy, ve skutečnosti to nejspíš bude něco jako $.fancybox(parametry).

800XE: Asi jsem svůj předchozí dotaz nenapsal zrovna obratně. Až takto jsem to rozepisovat nepotřeboval, ale i tak díky.
Každopádně, já onClosed použít musím. Protože otevřené modální okno je typu iframe, takže po provedení změn a po zavření okna musím havní stránku aktualizovat. A iframe použít musím aby mi správně fongoval jiný plugin.

Nadřazenou stránku můžeš aktualizovat i z iframe. Vytvoř si třeba funkci update a z iframe jí volej pomocí top.window.update:

Kód:

<!doctype html>
<html>
    <head>
        <title>
            Hlavní stránka
        </title>
        <meta charset="utf-8">
        <script>
            function update(param) {
                alert(param);
            };
        </script>
    </head>
    <body>
        <iframe src="iframe.html"></iframe>
    </body>
</html>

iframe.html:

Kód:

<!doctype html>
<html>
    <head>
        <title>
            Iframe
        </title>
        <meta charset="utf-8">
        <script>
            top.window.update('Test');
        </script>
    </head>
    <body></body>
</html>

Dobře zkusím si s tím pohrát.
Ještě jednou děkuji a tvou ochotu!