[jquery] okienko modalne

Witam,

Korzystam z http://trentrichardson.com/Impromptu/index.php skryptu, i mam coś takiego:

index.html:

 
	<a id="okno" href="http://www.wp.pl">Przykład 1</a>

i teraz po kliknięciu na to uruchamia się kod:

	$(document).ready(function(){
	
	$('a#okno').click(function(){
		
		$.prompt('go to url?',{
			submit: function(v,m,f){return v;},
			buttons:{'yes':true,'no':false},
			prefix:'cleanblue'
		});
		
		return false; // aby nie przeładowywać od razu!
	});	
	
});
 

i teraz, aby nie przeładowywać strony od razu po kliknięicu w link, to dałem "return false;", to teraz jak zrobić, aby po kliknięciu w "no" nieprzeładowywał strony, a po kliknięciu w "yes" odpalał stronę, która jest w href'ie ?

pozdrawiam

Wystarczy poczytać dalej te przykłady i już masz odpowiedź. @see Example 9.

niestety, dalej to samo...
za każdym razem następuje przejście do strony podanej w href'ie...

podpowiedz co mam zrobić, aby anulować przejście do strony w hrefie, a zresztą sobie już poradzę

Przecież to już umiesz zrobić. Wystarczy, że w funkcji obsługi zdarzenia zwrócisz false. Ale lepiej zastosować metodę DOM o nazwie preventDefault. jQuery zapewnia, że metoda zadziała nawet w IE. Metodę preventDefault wywołujesz na rzecz obiektu zdarzenia, który jest przekazywany do funkcji obsługi zdarzenia jako jedyny parametr, w ten sposób (tutaj przekazanemu obiektowi nadałem nazwę evt):

$('a#cośtam').click(function(evt) {
  evt.preventDefault();
});

Ale to nie rozwiązuje Twojego problemu. Nie wiem czemu drugi raz o to spytałeś, skoro już w pierwszym poście to rozwiązałeś -- używając return false.

Twój problem to nie samo zablokowanie przejścia na kolejną stronę, tylko warunkowe zablokowanie.

Czyli musisz sprawdzić, jaki guzik został kliknięty. Tę informację możesz odczytać w funkcji callback -- jej pierwszy parametr to wartość klikniętego przycisku. To jest opisane w przykładzie 9, który wskazał Ci @Demonical Monk. Musisz tylko poskładać to do kupy. Jak nie działa -- pokaż kod, w którym próbujesz z tego korzystać, a jednak coś się kaszani. Podpowiem, że najłatwiej Ci będzie skorzystać z tego sposobu z preventDefault. Powęsz trochę w dokumentacji żeby dowiedzieć się, co to znaczy np. "wartość przycisku". Ponieważ funkcja callback otrzymuje za pierwszy parametr wartość klikniętego przycisku, możesz ją porównać z wartościami zdefiniowanymi wcześniej, w polu buttons. I jeśli callback otrzyma wartość przypisaną do przycisku OK, to wtedy wywołujesz preventDefault().

PS. Szczerze mówiąc to ja nigdy nie użyłem tego pluginu, więc podpowiadam Ci na bazie tego co zauważyłem zerkając przez minutę w dokumentację...

ok, mam coś takiego:
część pliku html: index.html:

	<!-- adres wp to tylko przykład, naprawdę będzie się ładowało cośinnego .. -->
	<a msg="Czy usunac wpis z bazy?" href="http://wp.pl/">Przykład 1</a>

no i plik main.js :

function mycallback(v,m,f){
	return v;
}	

$(document).ready(function(){
	
	$('a[msg]').click(function(){
		var msg = $(this).attr('msg');
		
		$.prompt(msg,{
			callback: mycallback,
			buttons: { 'yes':true, 'no':false },
			prefix: 'cleanblue'
		});
		
		// 1. chcę móc zwrócić w tym miejscu to, co zwróciła funkcja 'mycallback', czyli jak klikne w 'no' to zwraca false, jak w 'yes' to true
		return 'to co zwróci mycallback';
	});

});

tak jak w pkt 1. chcę, aby w jakiś magiczny sposób to co zwróci funkcja mycallback znalazło się po return, bo wcześniej (jak zauważył @bswierczewski) zawsze był false, czyli taki 'statyczny zwrot', a ja chciałbym, aby był to 'zwrot dynamiczny', lub 'warunkowy'.

i jak to teraz osiągnąć ?
pozdr

Powinieneś to zrobić inaczej, korzystając z podstawowych możliwości programowania funkcyjnego w JavaScripcie. Właśnie m.in. dlatego polecam ludziom naukę samego języka JavaScript, a nie tylko jQuery i innych bibliotek. Do nauki języka polecam zawsze książkę "JavaScript -- mocne strony" Douglasa Crockforda -- zwięzła, niedroga, dobra.

W tym wypadku niepotrzebne Ci jest definiowanie mycallback, skoro chcesz tej funkcji użyć tylko raz. To zbyt dużo tłumaczenia żebym Ci to teraz wyjaśniał (kup książkę, serio -- polecam!), ale może mniej-więcej to zrozumiesz patrząc na konkretny kod.

Użyję w nim funkcji anonimowej i własności zwanej domknięciem:

$(document).ready(function(){
       
        $('a[msg]').click(function(evt) {
                var msg = $(this).attr('msg');
               
                $.prompt(msg,{
                        buttons: { 'yes':true, 'no':false },
                        prefix: 'cleanblue',
                        callback: function(clickedButtonValue, $message, formValueMap) { // te ich nazwy parametrów: v, m, f -- są beznadziejne
                            if (clickedButtonValue === true) {
                                evt.preventDefault();
                            }
                        }
                });
        });
});

Pisałem to na sucho, ale może od razu zadziała.

W skrócie, w "funkcji anonimowej" chodzi o to, że podstawiam sobie jakąś funkcję bezpośrednio do literału obiektowego, czyli opcji funkcji prompt. Tworzę funkcję bez nazwy (anonimową) i podstawiam ją pod callback. Nie mam tu nigdzie funkcji o nazwie mycallback.

W domknięciu chodzi zaś o to, że moja funkcja anonimowa, zdefiniowana w funkcji obsługi zdarzenia click (funkcja obsługi zdarzenia click jest funkcją zewnętrzną, moja funkcja callback jest funkcją zewnętrzną), widzi zmienną evt, która pochodzi z funkcji zewnętrznej. To bardzo przydatne, bo mogę wywołać metodę evt.preventDefault() z wnętrza mojej funkcji callback. I to wystarczy żeby przeglądarka nie przechodziła do strony wskazywanej przez kliknięty link.

niestety... kliknięcie w link powoduje automatycznie przeładowanie strony i ładuje się zawartość atrybutu href..

Jak to debugowałeś? Co sprawdziłeś?

Funkcja callback jest wywoływana? Co otrzymuje w parametrze clickedButtonValue?

Koderzy muszą debugować, a nie rozkładać ręce ;-).

a chociażby tak:

$(document).ready(function(){
       
        $('a[msg]').click(function(evt) {
                var msg = $(this).attr('msg');
               
                $.prompt(msg,{
                        buttons: { 'yes':true, 'no':false },
                        prefix: 'cleanblue',
                        callback: function(clickedButtonValue, $message, formValueMap) { // te ich nazwy parametrów: v, m, f -- są beznadziejne
                            if (clickedButtonValue === true) {
                                evt.preventDefault();
                                
                                // testowanie
                                alert('v='+clickedButtonValue);
                            }
                        }
                });
                
                // wstawione tymczasowo, aby nie przeładowywał
                return false;
        });
});

po uruchomieniu skryptu i kliknięciu w 'no' nic się nie wyświetla, po kliknięciu w 'yes' pojawia się monit: 'v=true'.

A chcesz, żeby było odwrotnie, tak? Tj. żeby po kliknięciu w no nie przeładowywał strony. To oznacza, że warunek jest nie taki jak trzeba -- preventDefault powinno być odpalane, gdy clickedButtonValue jest równe false, a nie true.

Ogólnie problem wygląda tak:
użytkownik klika w link, wyskakuje okno z pytaniem : "czy chcesz przejść na stronę WP?", jeśli kliknie 'tak', to przechodzi, jeśli kliknie 'nie' to nie przechodzi.

do tej pory przy kliknięciu następowało mimo wszystko przeładowanie, nie mam pojęcia o co chodzi, ale może pomoże Ci taka informacja:
najpierw drobna modyfikacja kodu:
main.js:

$(document).ready(function(){
	
		// TO DODAŁEM
    	var co_zwrocic = false;   
	
	
        $('a[msg]').click(function(evt) {
                var msg = $(this).attr('msg');
               
                $.prompt(msg,{
                        buttons: { 'tak':true, 'nie':false },
                        prefix: 'cleanblue',
                        callback: function(clickedButtonValue, $message, formValueMap) { // te ich nazwy parametrów: v, m, f -- są beznadziejne
                            if (clickedButtonValue === true) {
                               
                               co_zwrocic = clickedButtonValue;
	                            
                            }
                        }
                });
               
                return co_zwrocic;
                
        });
});

a index.html jest taki sam, tylko komunikat przemawia bardziej za przeznaczeniem tego skryptu:

<a href="http://wp.pl/" msg="Czy chcesz przejść na strone WP?">Przykład 1</a>

Teraz skrypt działa w sposób następujący:
1. klikam w "przykład 1"
1.1. klikam w 'nie' --> okienko się zamyka, nie ma przeładowania - DOBRZE
1.2. klikam w 'tak' --> okienko się zamyka, nie ma przeładowania - ŹLE, POWINIEN PRZEŁADOWAĆ
2. klikam w "przykład 1" --> od razu następuje przeładowanie - ŹLE, TAKIE JAKBY 'SPÓŹNIONE PRZEŁADOWANIE'...

Trzeba to jednak inaczej rozwiązać, bo funkcja $.prompt działa asynchronicznie. Ona po prostu wyświetla komunikat i natychmiast kończy działanie, zwracając sterowanie do funkcji wywołującej -- zanim jakikolwiek przycisk został kliknięty. Czyli: w naszej funkcji obsługującej zdarzenie click wywołujemy prompt i okienko jest wyświetlane, ale prompt nie czeka na to aż ktoś kliknie, tylko od razu się kończy -- bez wywołania funkcji callback. Nasza funkcja obsługująca zdarzenie click kontynuuje działanie i zwraca co_zwrocic, tymczasem co_zwrocic nie zostało jeszcze ustawione. Zostanie ustawione dopiero gdy ktoś kliknie w przycisk, bo dopiero wtedy zostanie wywołana funkcja callback.

Mogłem się domyślić, że funkcja $.prompt działa asynchronicznie, skoro okienko jest tworzone dynamicznie i nie korzysta ze standardowych okienek modalnych, ale niestety byłem do tego za głupi :).

Więc zastosujemy inne podejście. W funkcji obsługującej zdarzenie click zawsze blokujemy przejście do linku, bo tylko tyle możemy zrobić w tym momencie (wyświetliliśmy okienko za pomocą prompt, ale użytkownik jeszcze nie kliknął na Tak lub Nie). Jeśli użytkownik kliknie na któryś przycisk, to nasza funkcja callback zostanie dopiero wtedy wywołana. I wtedy sprawdzimy, czy kliknięte zostało Tak. Jeśli zostało kliknięte, to przechodzimy do strony, na którą wskazywał atrybut href klikniętego linku. Używamy w tym celu window.location.

W sumie wygląda to tak:

$(document).ready(function(){
        $('a[msg]').click(function(evt) {
                var $clickedLink = $(this);
                var msg = $clickedLink.attr('msg');
                $.prompt(msg,{
                        buttons: { 'tak': true, 'nie': false },
                        prefix: 'cleanblue',
                        callback: function(clickedButtonValue, $message, formValueMap) {
                                if (clickedButtonValue === true) {
                                        window.location = $clickedLink.attr('href');
                                }
                        }
                });
                evt.preventDefault();
        });
});

BTW. Marooned oczywiście ma rację. Skoro używasz niestandardowego, tj. wymyślonego przez siebie atrybutu msg, to powinieneś użyć HTML-a 5 (zapisanego w formacie HTML lub XHTML) i powinieneś nazwać swój atrybut data-msg. Bo normalnie nie wolno wstawiać w dokumenty (X)HTML atrybutów wymyślonych przez siebie. W HTML 5 dopuszcza zaś możliwość zdefiniowania takich atrybutów -- dokument pozostanie poprawny tak długo, jak długo nazwa Twojego atrybutu będzie się zaczynała od ciągu data-. Czyli w sumie data-msg.