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 
```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');
    });
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....

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