[AJAX] Okna dialogowe, podstawy. Opcje

[Wishermil]

Witam!

Rozpocząłem swoją przygodę z Ajaxem i nigdzie nie mogę znaleźć tutoriala odnośnie kreowania samych okienek, wszędzie pchają jakieś zaawansowane moduły (galerie itp.). Mi chodzi tylko o sam szkielet.

Tzn.:

Klikam na link, który wywołuje Ajaxa wykonującego operacje na pliku php i chciałbym, aby po skończeniu operacji pojawiło się zwykłe okienko z informacją: "Poprawnie wykonane." Klikamy w puste pole i okienko się ładnie zamyka.

Z góry dziękuje za pomoc.

[toffiak]

Po otrzymaniu danych z serwera stwórz/odkryj (jeśli jest już stworzone ale ukryte) okienko, wypełnij je informacją i wyświetl.

Okienko może byc najzwyklejszym div-em z ustawionym position: fixed i odpowiednimm z-indeksem.

Można też skorzystać z wbudowanej metody alert() ale tą trudno ostylować.

Ten post edytował toffiak 15.02.2012, 16:41:11

[Wishermil]

Właśnie chodzi mi o to, że nigdzie nie jestem w stanie znaleźć podstawowych informacji na temat samego szkieletu tworzenia okienek. Nie mam pojęcia jak je stworzyć, gdyż wszędzie napotykam jakieś skomplikowane kody. Mógłbyś przedstawić mi procedury, funkcje? Napisać przykładowe okienko dialogowe, które pobiera info z diva?

[Kostek.88]

Jakiś czas temu robiłem takowe okienka. Teraz z pamięci w wielkim skrócie:

[HTML] pobierz, plaintext 
<div id="wrapper"><div>
 
<div id="container">
   <div id="popup">
      <h1>Title</h1>
      <p>Content</p>
   </div>
</div>
[HTML] pobierz, plaintext 

To wyżej to szkielet HTML: wrapper to ma być ciemne, półprzezroczyste tło za oknem, stąd div jest wyrzucony poza obszar, container to kontener na Twoje okienko: oba mają mieć ustawione position:fixed oraz width i height na 100%. Z kolei #popup ma być na środku ekranu? Jak to zrobić? Jak masz stałą szerokość okna to:

[CSS] pobierz, plaintext 
#popup {
position: absolute;
top: 50%;
left: 50%;
margin: -100px 0 0 -200px; // marginesy ujemne równe połowie szerokości i wysokości okna
width: 400px;
height: 200px
}
[CSS] pobierz, plaintext 

Jeśli chodzi o dynamicznej wielkości okno, to poszukać centering div horizontal vertical w google, albo zrób jQuery.

pozostałe elementy: <h1> - tytuł, <p> - treść

A teraz AJAX: (umieszczam w kodzie PHP, bo ładniej koloruje, niech Cię nie zmyli to)

[PHP] pobierz, plaintext 
$(document).ready(function(){
 
   $('a.link').click(function(){
      $.ajax({
          type: 'POST', // lub GET
          success: function(data) {
             $('body').append(sciezka); // sciezka do pliku HTML
          },
          beforeSend: function(){
              // tutaj mozesz wstawic loader
          }, 
          error: function(){
             $('body').append(sciezka);
          }
      });
   });
 
});
[PHP] pobierz, plaintext 

Aha, do samego okienka wrzuć jeszcze trochę jQuery

[PHP] pobierz, plaintext 
    $('div#container').click(function(){
       $('div#wrapper').remove();
       $('div#container').remove();
})
[PHP] pobierz, plaintext 

ew. jak masz dużo takich okienek aktywnych już, to odwołuj się poprzez $(this)

[PHP] pobierz, plaintext 
    $('div#container').click(function(){
       $(this).prev('div#wrapper').remove();
       $(this).remove();
});
[PHP] pobierz, plaintext 

A wtedy też pozamieniaj ID na class, co by się nie duplikowało. Oczywiście w kodzie może być sporo błędów, sam to zrobiłem jeszcze inaczej, ale generalnie idea jest taka. Co do wrappera, to tak sobie teraz pomyślałem, że możesz go wywalić, a zostawić sam container, tylko jak będziesz chciał ustawić tło półprzezroczyste, to nie używaj opacity, bo okno też Ci się takie zrobi... no chyba że zdefiniujesz kolor np. rgba(0,255,0, 0.5) - zielony przezroczysty 50%.

Co do kliknięcia poza okno i jego likwidacji, gdzieś na stronce jquery4u.com widziałem rozwiązanie, że wystarczy dać $('html').click ..... i wywołać akcję dla zamknięcia okna. Testowałem i działa. Aha... jest jeszcze jeden problem, oczywiście do obejścia.... jak klikniesz w samo okno, to też znika (IMG:style_emoticons/default/biggrin.gif) Musisz dać coś takiego

[PHP] pobierz, plaintext 
$('div.popup').click(function(event){
event.stopPropagation();
});
[PHP] pobierz, plaintext 

Zapobiegasz wówczas rozprzestrzenienia się akcji z kontenera na okienko: po dodaniu tego kodu i kliknięciu na kontener, okno zamknie się, po kliknięciu w sam popup - nie. Oczywiście w ogóle nie musisz ładować konterena, tylko dać np. <a href="">x</a> i ustawić go w prawym górnym rogu okna i ostylować odpowiednio.

PS. Do tego potrzebna Ci biblioteka jQuery
PS2. Możesz dograć jQueryUI do tego i zrobić tak:

[PHP] pobierz, plaintext 
   $(div.popup).draggable({handle: 'h1'});
[PHP] pobierz, plaintext 

Wtedy uruchomisz opcję przeciągania i upuszczania okna chwytając za pasek tytułu, tj. H1, ew. $(div.popup).draggable(); - daje Ci możliwość przeciągania okna, gdziekolwiek go chwycisz.

Sorki za bałagan w wypowiedzi, ale naprawdę na szybko napisałem.

[Wishermil]

Mimo wszystko dalej nie jestem w stanie stworzyć na podstawie tego okienka, które wyskoczy po kliknięciu w link. Wydaje mi się, że kod AJAX jest błędnie napisany. Zresztą nawet nie widzę w nim żadnego odniesienia do "diva", czy zawiązywania polecenia wyświetlenia okna. Myślę, że niepotrzebnie to tak mocno rozbudowałeś. Zależy mi na poznaniu samej struktury, bez żadnych konkretnych opcji z omówieniem poszczególnych linii kodu.

Ten post edytował Wishermil 16.02.2012, 01:10:57

[Kostek.88]

Nie sadze bym to za bardzo rozbudowal, to jest raczej minimum jakie mozna zrobic, na pewno nie ma zmiany rozmiaru okienka i innych funkcji, ktore moglyby sie przydac. Co do wyswietlenia okienka to pewnie, ze zrobilem blad... powinno byc...

[PHP] pobierz, plaintext 
$(document).ready(function(){
 $('a.link').click(function(){
      $.ajax({
          type: 'POST', // lub GET
          success: function(data) {
             $('body').load(sciezka); // mozesz tu dac drugiego AJAXa, bo load to skrocona forma
          },
          beforeSend: function(){
              // tutaj mozesz wstawic loader
          }, 
          error: function(){
             $('body').load(sciezka); // mozesz tu dac drugiego AJAXa, bo load to skrocona forma
          }
      });
   });
 
});?
[PHP] pobierz, plaintext 

Tutaj masz przykladowy kod samego okienka

http://jsfiddle.net/kostek/rL6Um/2/ - kod do samego okienka z draggable (edit: nie zapomnij, ze ten kod ma byc umieszony w osobnym pliku, ktory potem ladujesz przez AJAX)

I masz strukture i pole manewru do dalszej rozbudowy, zreszta pamietaj ze zamiast load mozesz wstawic nastepna funkcje ajax i na success ustawic 'body' jako Twoje odwolanie do diva. Dlaczego body? Bo najprosciej jest dolaczyc gotowy kod do body zamiast generowac niepotrzebne divy.

EDIT: ew. uzyc jQuery UI modal box... masz dosc duzo opcji konfiguracji, ale malo pole manewru jesli chodzi o zmiany.

Ten post edytował Kostek.88 16.02.2012, 13:13:52

[Wishermil]

Świetnie, teraz wszystko już mi się rozjaśniło. Dzięki wielkie za zaangażowanie i pomoc. (IMG:style_emoticons/default/wink.gif)

[Kostek.88]

Spoko, w razie czego nie bój sie pytać (IMG:style_emoticons/default/wink.gif)

[viking]

Ja ci jeszcze jeden link podrzucę http://www.paulrhayes.com/experiments/modal/
O ile nie przeszkadza brak obsługi poniżej IE9 można to teraz zrobić bez JS.

[Kostek.88]

Dobry artykuł (IMG:style_emoticons/default/smile.gif) Dzięki wielkie, to i ja skorzystam (IMG:style_emoticons/default/smile.gif)