jQuery + callback z iframe

0

Witam, staram się osiągnąć następującą rzecz :

  1. klikam link
  2. otwiera się okno - przy pomocy fancybox z iframe, do którego załadowana jest strona z np. trzema buttonami.
  3. klikam jeden z trzech buttonów
  4. następuje wypełnienie pola tekstowego na stronie głównej wartością np. kliknięto btn1
  5. zamknięcie okna fancybox

Nie bardzo wiem, jak z iframe odwołać się do elementu strony głównej (czyli tej, z której został wywołany iframe).
Ogólnie rzecz biorąc, chciałbym, żeby użytkownikowi pokazało się okno, z możliwością wyboru jakiejś opcji (np. lista produktów), po wybraniu (kliknięciu) na produkt, okno zostaje zamknięte, a informacja o produkcie wędruje do pola tekstowego na stronie głównej.

//dopisane
Potrafię pobrać ze strony głównej, wartość elementu znajdującego się w iframe. Ale jak z poziomu iframe, odwołać się do elementu na stronie głównej ?

//dopisane

na podobnej zasadzie działa http://jqueryui.com/demos/datepicker/ - tyle tylko, że ja potrzebuję iframe z buttonami, zamiast listy dni

1

parent. ... ?

0

No... teoretycznie tak, ale...

mam kod w IFRAME

 $(document).ready(function(){
	$('#buttontestowy2').click(function(){
	  alert( $('#RodzajFaktury', parent.document).val());
	});
 });

w FF, działa : wyświetli tekst z pola tekstowego rodzica. Natomiast w Operze, dostaję błąd zabezpieczeń
Uncaught exception: ReferenceError: Security error: attempted to read protected variable: jquery

próbowałem dawać różne parametry : top.document / parent.document.body etc etc....
cały czas w Opera dostaję błąd :/

0

a bez jQuery działa? tj. parent.document.getElementById('RodzajFaktury').value ?
obie strony są w tej samej domenie?

jeśli nie to nie możesz skorzystać z "parent" i dziwne że FF na to pozwala
możesz wtedy wykorzystać window.postMessage z HTML5, albo przesyłać dane zmieniając lokalizacje ramki na ten sam adres ale z danymi dopisanymi po hashu (strona się nie przeładuje, a dane będziesz miał w location.hash)

a jeszcze skoro piszesz że możesz ze strony głównej odczytywać wartość w iframe i to działa w operze to możesz też przypisać instancję klasy / funkcję ze strony głównej do zmiennej w ramce i odwołując się w ramce do niej będziesz mieć kontakt ze stroną główną:

// na stronie głównej:
function lokalnaFunkcja(msg)
{
    window.title = msg;
}

document.getElementById('ramka').contentWindow.funkcjaNadrzedna = lokalnaFunkcja;

// w ramce:
window.funkcjaNadrzedna('KOMUNIKAT');
0

Działam w obrębie tej samej domeny. Sprawdziłem zwykłe JS - i działa, opera łyka bez zająknięcia.
Stąd też, chciałbym się Ciebie spytać, dlaczego użycie jQuery sprawia problemy ? Chciałbym uniknąć przypisywania funkcji do zmiennej, i tak już mam trochę kodu, i nie chcę później jeszcze szukać gdzie i co używa danej funkcji.

0

prawdopodobnie problemem jest to, że korzystasz z lokalnej instancji jQuery do elementów z innej ramki i próbuje wykonywać coś co jest niedozwolone między ramkami lub próbuje odwoływać się do siebie, a w rzeczywistości przez zmiany kontekstu odwołuje się do innej instancji jQuery z drugiej ramki i następuje jakiś konflikt

sprawdź czy:
window.parent.$ zamiast $ rozwiązuje problem

tą funkcją której nie chcesz przypisywać może być też cały jQuery, czyli:

document.getElementById('ramka').contentWindow.$ = jQuery;

mr.hex napisał(a)

Chciałbym uniknąć przypisywania funkcji do zmiennej, i tak już mam trochę kodu, i nie chcę później jeszcze szukać gdzie i co używa danej funkcji.

własnie moim zdaniem gorzej jak odwołujesz się bezpośrednio do elementów z innej ramki, bo potem chcąc zmienić nazwę powiedzmy inputa musisz to zrobić w dwóch lub więcej plikach

0

coś nie do końca sprawdziłem wszystkie możliwości....

 $(document).ready(function(){
	$('#buttontestowy2').click(function(){
	alert( $('#RodzajFaktury', window.parent.document).val());
	});
	
 });

window.parent.document

działa ^^

0
unikalna_nazwa napisał(a)

a bez jQuery działa? tj. parent.document.getElementById('RodzajFaktury').value ?
obie strony są w tej samej domenie?

j

// na stronie głównej:
function lokalnaFunkcja(msg)
{
    window.title = msg;
}

document.getElementById('ramka').contentWindow.funkcjaNadrzedna = lokalnaFunkcja;

// w ramce:
window.funkcjaNadrzedna('KOMUNIKAT');

powiedz mi proszę, jak wykonać to w jQuery ?
Bowiem, potrzebuję przekazać uchwyt do dynamicznie tworzonego pola input :/

Nie wiem czy nie kombinuję za bardzo ale chciałbym osiągnąć następujący efekt :

  1. na stronie głównej, user klika "Dodaj element". Do formy, dodaje się input (właściwie to jest klonowany).
  2. następnie użytkownik klika w input, otwiera się iframe (tutaj powinien zadziałać fancybox).
  3. do iframe ładowana jest strona z buttonem, po którego kliknięciu następuje wypełnienie klikniętego inputa (ze strony głównej) żądanym tekstem.

// kliknięcie w input klasy classFakPoz

 $('.classFakPoz').click(function(){
	  //pokaż iframe korzystając z fancybox : done
          // przekaż handle tego obiektu do iframe np. do zmiennej ? : to do
	});

z kolei w iframe :

$('#buttontestowy2').click(function(){
	  // wstaw do pola input tekst 
	 $( '#uchwy_ktorego_nie_mam' , window.parent.document).val('wstaw mnie to pola input');
	});
0

np:

$('#ramka').contents().find('#buttontestowy2').get(0).uchwyt = $(handle);
//                             ^ do czego przypisać dane, możesz to ominąć i dać samo .get(0), wtedy przypiszesz do "window"

a potem w tym onclick przycisku:

$(this).get(0).uchwyt.val('wstaw mnie to pola input');
// ^ to do czego przypisałeś dane, zakładam że this odwoluje się tutaj do #buttontestowy2

niestety nie można tutaj skorzystać z $.data bo nie przypisuje ono danych tak naprawdę do elementu, tylko do wewnętrznej konstrukcji jQuery $.cache - chyba że iframe będzie korzystał z tej samej instancji jQuery

0

Nie rozumiem :/

//strona główna

// po kliknięciu na pole tekstowe, otwórz fancybox (iframe) o klasie .iframe
$(".classPozFakt").click(function(){
$.fancybox.init();
	 $('.iframe').fancybox({
		onStart : function(){
			$('.iframe').contents().find('#buttontestowy2').data('uchwyt', $(this));  //podczas uruchamiania, przyczep do btntestowy2 uchwyt do elementu, z którego nastąpiło kliknięcie.
		}
	 }).trigger('click');
});

teraz w iframe

$(document).ready(function(){

	$('#buttontestowy2').click(function(){
				// $('#RodzajFaktury', window.parent.document).val('wstaw mnie do pola');
				//$(this).data('uchwyt').val('wstaw mnie to pola input');

				$(
					$($(this).data('uchwyt'), window.parent.document).val('wstaw mnie do pola')
				); // do pobranego uchwytu podstaw tekst
				
	});
 });

kliknięcie buttontestowy2 w iframe - oczywiście nie daje efektu :/ Zakręciłem się konkretnie.

// w takim razie jak można to zrealizować ? Jak przekazać uchwyt do dynamicznego elementu -> do iframe -> następnie w iframe wywołać zdarzenie, które wstawi do w/w elementu żądany tekst ?

Może łatwiej będzie gdy napiszę co chcę osiągnąć.
Otóż, jest formularz...

Lp Nazwa Ilość Jm Netto
1 Wybierz... 2 kg 32.22
2 Wybierz... 12 Mg 2.22

pod nim przycisk "Dodaj element". Po kliknięciu kopiuję wiersz i wstawiam ponownie, tyle tylko, że wyczyszczony z danych.

Zamarzyłem sobie, żeby zamiast zwykłego selectbox'a dać fancybox'a. W fancybox'ie, załaduje się lista towarów. Użytkownik kliknie wybrany towar, parametr tego towaru zostanie wpisany do pola tekstowego - zamiast 'Wybierz...' i fancybox zostanie zamknięty. I tak dla każdego wiersza....

0

ta, sprawdziłem posta i poprawiłem już, przeczytaj jeszcze raz

$($(this).data('uchwyt'), window.parent.document)

zakładając że w $(this)[0].uchwyt będziesz miał element jQuery odwołujący się do danego input, to będzie on już wiedział że jest w oknie wyżej, dlatego niepotrzebne jest tutaj szukanie w window.parent.document

//strona główna

// po kliknięciu na pole tekstowe, otwórz fancybox (iframe) o klasie .iframe
$(".classPozFakt").click(function(){
$.fancybox.init();
	$('.iframe').fancybox({
		onStart : function(){
			$('.iframe').contents().find('#buttontestowy2').get(0).uchwyt = this;
			//podczas uruchamiania, przyczep do btntestowy2 uchwyt do elementu, z którego nastąpiło kliknięcie.
		}
	 }).trigger('click');
});

teraz w iframe

$(document).ready(function(){
	$('#buttontestowy2').click(function(){
		$(this.uchwyt).val('wstaw mnie do pola'); // do pobranego uchwytu podstaw tekst
	});
 });

Swoją drogą po co do tego zatrudniłeś ramki? Dużo stabilniejsze rozwiązanie miałbyś normalnie korzystając z AJAXu

0

konsola w FF krzyczy : Błąd: $(".iframe").contents().find("#buttontestowy2").get(0) is undefined

nie, na dziś koniec, poryłem sobie głowę i nie myślę już logicznie =] Jutro sprawdzę, dzięki za pomomc

0
mr.hex napisał(a)

konsola w FF krzyczy : Błąd: $(".iframe").contents().find("#buttontestowy2").get(0) is undefined

nie, na dziś koniec, poryłem sobie głowę i nie myślę już logicznie =] Jutro sprawdzę, dzięki za pomomc

No i tu prawdopodobnie chodzi o to że treść ramki nie zdąża się załadować a już skrypt próbuje się do niej odwołać
możesz spróbować pominąć .find('#buttontestowy2') i przypisać dane do samej ramki (chyba nie musi być do tego w pełni załadowana)
a potem zamiast $(this.uchwyt) dać $(window.uchwyt)
lub wykryć załadowanie ramki

ale z Twojego opisu tego co chcesz zrobić proponuję przepisanie tego wszystkiego tak żeby w ogóle nie korzystać z ramek

0

hm... sugerujesz jakieś konkretne rozwiązanie ?

0

zdecydowałem się na pokazanie strony w div'ie. Tzn. użyje load() z jQuery, do pokazania paska przewijania skorzystam z jScrollPane i tyle. Bez zbędnych iframe.

Dzięki za pomoc =]

1 użytkowników online, w tym zalogowanych: 0, gości: 1