jQuery + callback z iframe

Odpowiedz Nowy wątek
2011-07-10 21:29
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

edytowany 2x, ostatnio: mr.hex, 2011-07-10 21:46

Pozostało 580 znaków

2011-07-11 14:42
1

parent. ... ?


Pół giga extra na dropboxie? Pół giga extra na dropboxie! Tyle wygrać! >>Klik here<<

Pozostało 580 znaków

2011-07-11 19:22
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 :/

edytowany 1x, ostatnio: mr.hex, 2011-07-11 19:25

Pozostało 580 znaków

2011-07-11 21:53
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');

Pół giga extra na dropboxie? Pół giga extra na dropboxie! Tyle wygrać! >>Klik here<<

Pozostało 580 znaków

2011-07-12 15:23
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.

Pozostało 580 znaków

2011-07-12 15:46
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


Pół giga extra na dropboxie? Pół giga extra na dropboxie! Tyle wygrać! >>Klik here<<
edytowany 1x, ostatnio: unikalna_nazwa, 2011-07-12 15:50

Pozostało 580 znaków

2011-07-12 15:48
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 ^^

edytowany 1x, ostatnio: mr.hex, 2011-07-12 15:49

Pozostało 580 znaków

2011-07-12 19:49
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 
```javascript
 $('.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');
    });
edytowany 1x, ostatnio: mr.hex, 2011-07-12 19:55

Pozostało 580 znaków

2011-07-12 21:32
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


Pół giga extra na dropboxie? Pół giga extra na dropboxie! Tyle wygrać! >>Klik here<<

Pozostało 580 znaków

2011-07-12 21:39
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....

edytowany 2x, ostatnio: mr.hex, 2011-07-12 21:51

Pozostało 580 znaków

2011-07-12 21:42
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


Pół giga extra na dropboxie? Pół giga extra na dropboxie! Tyle wygrać! >>Klik here<<
edytowany 4x, ostatnio: unikalna_nazwa, 2011-07-12 21:56

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

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

Robot: Google Favicon