Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [JS][jQuery] Zdarzenie unload sonda przed opuszczeniem strony
adamantd
post 20.09.2013, 16:11:08
Post #1





Grupa: Zarejestrowani
Postów: 228
Pomógł: 7
Dołączył: 15.08.2012
Skąd: Rzeszów

Ostrzeżenie: (0%)
-----


Witam! Na swoim serwisie spotykam się z sytuacjami, kiedy użytkownik pomimo iż zaangażował się w zakup usługi i wypełnił formularz wiedząc, że usługa jest płatna i znając szczegóły, po przejściu na stronę wyboru płatności (przelew lub sms) rezygnuje z jej dokonania. Przeczytałem kiedyś, że aż 50% użytkowników internetu przyznaje się do zmiany zdania przed samym dokonaniem płatności pomimo zaangażowania się np. dodawanie do koszyka lub wypełnienie formularza.

Chciałbym zatem zastosować coś takiego jak sonda wyświetlona za pomocą jQuery UI DIALOG albo w Fancyboxie, żeby było ładnie. User w momencie kiedy NIE KLIKNIE "Zatwierdź" -chodzi oczywiście o zatwierdzenie wyboru płatności, tylko kliknie krzyżyk wyłączający przeglądarkę lub będzie chciał zmienić stroną na inną, wyświetlę mu ankietę w której będzie musiał zaznaczyć przyczynę rezygnacji. To sobie później prześlę ajaxem do php i zapiszę w bazie albo do pliku nie ważne chodzi mi głównie o to jak wyświetlić tą sondę?

Zdarzenie unload oraz beforeunload nie działa mi np w chromie chyba, że zastosuję czysty JS ale to i tak nic mi nie pomaga ponieważ wyświetla się coś w rodzaju alertu, i nie mam pomysłu jak wstawić tam html.

  1.  
  2. window.onbeforeunload = function(){
  3. return 'PRZYKLADOWY TEKST';
  4. }
  5.  


To powyżej działa ale:

  1.  
  2. window.onbeforeunload = function(){
  3. var html = '<p>PRZYKLADOWY TEKST</p>';
  4. return html;
  5. }

nie działa -wyświetla się alert z akapitem w środku
nie działa również zastosowanie tutaj fancyboxa:

  1.  
  2. window.onbeforeunload = function(){
  3. var html = '<p>PRZYKLADOWY TEKST</p>';
  4. $.fancybox(
  5. html,
  6. {
  7. 'autoDimensions' : false,
  8. 'width' : 500,
  9. 'height' : 'auto',
  10. 'transitionIn' : 'none',
  11. 'transitionOut' : 'none',
  12. 'padding' : 5,
  13. helpers : {
  14. overlay : {closeClick: false}
  15. }
  16. }
  17. );
  18. }
  19.  


jak to ugryźć i czy da się coś takiego zrobić, biorąc pod uwagę, że jeżeli klient kliknie w przycisk "zatwierdź" to nie wyświetli mu się komunikat

Pozdrawiam
Go to the top of the page
+Quote Post
lukasz1985
post 20.09.2013, 16:22:45
Post #2





Grupa: Zarejestrowani
Postów: 205
Pomógł: 43
Dołączył: 5.03.2012

Ostrzeżenie: (0%)
-----


http://stackoverflow.com/questions/1631959...e-event#1632004
Go to the top of the page
+Quote Post
adamantd
post 20.09.2013, 20:22:04
Post #3





Grupa: Zarejestrowani
Postów: 228
Pomógł: 7
Dołączył: 15.08.2012
Skąd: Rzeszów

Ostrzeżenie: (0%)
-----


Ok dzięki za linka -częściowo problem rozwiązany, ponieważ mogę ominąć submit i działa również pod chrome ale jak podpiąć pod to fancyboxa, żeby zamiast alertu wyświetlał się mój content z treścią w tym przypadku z sondą?


  1.  
  2. var inFormOrLink;
  3. //$('a').live('click', function() { inFormOrLink = true; });
  4. //$('form').bind('submit', function() { inFormOrLink = true; });
  5.  
  6. $(window).bind("beforeunload", function() {
  7. var newslettfancy = '<div><p><strong>Siemano działa fancybox</strong></p></div>';
  8.  
  9. return $.fancybox(
  10. newslettfancy,
  11. {
  12. 'autoDimensions' : false,
  13. 'width' : 500,
  14. 'height' : 'auto',
  15. 'transitionIn' : 'none',
  16. 'transitionOut' : 'none',
  17. 'padding' : 5,
  18. helpers : {
  19. overlay : {closeClick: false}
  20. }
  21. }
  22. );
  23.  
  24. });
  25.  
  26.  
  27.  


Też niby działa ale pojawia się na ułamek sekundy i strona się przeładowuje. Jakby brakowało czegoś typu async:false

Ma ktoś może jakiś pomysł?
Go to the top of the page
+Quote Post
lukasz1985
post 21.09.2013, 18:14:24
Post #4





Grupa: Zarejestrowani
Postów: 205
Pomógł: 43
Dołączył: 5.03.2012

Ostrzeżenie: (0%)
-----


Nie możesz zwrócić fancyboxa bo to jest kod asynchroniczny...
Musisz zwrócić false i przesłać odpowiedni callback do fancyboxa lub wywołać odpowiednią funkcję później, który(a) będzie odpowiadał(a) za wykonanie akcji w momencie odpowiedzi.

Ten post edytował lukasz1985 21.09.2013, 18:16:14
Go to the top of the page
+Quote Post
adamantd
post 21.09.2013, 22:12:56
Post #5





Grupa: Zarejestrowani
Postów: 228
Pomógł: 7
Dołączył: 15.08.2012
Skąd: Rzeszów

Ostrzeżenie: (0%)
-----


ok a mógłbyś mi to przybliżyć? Jakiś przykład -nie jestem mega specem od js. Przypuśćmy, że zwracam false, jak odpalić wtedy fancyboxa po tym jak zwrócę false?

  1.  
  2. var inFormOrLink;
  3. //$('a').live('click', function() { inFormOrLink = true; });
  4. //$('form').bind('submit', function() { inFormOrLink = true; });
  5.  
  6. $(window).bind("beforeunload", function() {
  7.  
  8.  
  9. return false;
  10.  
  11.  
  12. });
  13.  
  14.  
  15. //JAK W TYM PRZYPADKU ODPALIĆ FANCYBOXA PO ZWRÓCENIU FALSE?
  16. var newslettfancy = '<div><p><strong>Siemano działa fancybox</strong></p></div>';
  17. $.fancybox(
  18. newslettfancy,
  19. {
  20. 'autoDimensions' : false,
  21. 'width' : 500,
  22. 'height' : 'auto',
  23. 'transitionIn' : 'none',
  24. 'transitionOut' : 'none',
  25. 'padding' : 5,
  26. helpers : {
  27. overlay : {closeClick: false}
  28. }
  29. }
  30. );
  31.  
  32.  


Ten post edytował adamantd 21.09.2013, 22:13:39
Go to the top of the page
+Quote Post
lukasz1985
post 22.09.2013, 13:39:31
Post #6





Grupa: Zarejestrowani
Postów: 205
Pomógł: 43
Dołączył: 5.03.2012

Ostrzeżenie: (0%)
-----


Wygląda na to jednak, że tego nie można zrobić:

http://stackoverflow.com/questions/6063522...ry-beforeunload

Jedynym rozwiązniem jest użycie tego co już masz z tym, że musiałbyś podać informację (prośbę) o to, żeby użytkownik pozostał na stronie i wypełnił ankietę / dał odpowiedź na powód dla którego opuszcza stronę:

W kodzie wyglądałoby by to tak:


  1. <!DOCTYPE html>
  2. <meta charset="UTF-8">
  3. <title>Insert title here</title>
  4.  
  5.  
  6. <script type="text/javascript"
  7. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  8.  
  9. <script type="text/javascript" src="/jquery.fancybox.js"></script>
  10. </head>
  11.  
  12.  
  13. <script type="text/javascript">
  14. var inFormOrLink;
  15. //$('a').live('click', function() { inFormOrLink = true; });
  16. //$('form').bind('submit', function() { inFormOrLink = true; });
  17.  
  18. $(window)
  19. .bind(
  20. "beforeunload",
  21. function(event) {
  22.  
  23. //JAK W TYM PRZYPADKU ODPALIĆ FANCYBOXA PO ZWRÓCENIU FALSE?
  24. var newslettfancy = '<div><p><strong>Siemano działa fancybox</strong></p></div>';
  25. $.fancybox(newslettfancy, {
  26. 'autoDimensions' : false,
  27. 'width' : 500,
  28. 'height' : 'auto',
  29. 'transitionIn' : 'none',
  30. 'transitionOut' : 'none',
  31. 'padding' : 5,
  32. helpers : {
  33. overlay : {
  34. closeClick : false
  35. }
  36. }
  37. });
  38.  
  39. // Tutaj się wyświetli okno dialogowe przeglądarki.
  40. return "Czy chciałby Pan/i podać powód rezygnacji ze strony? Prosimy pozostać na stronie, jeśli tak."; // Tutaj
  41.  
  42. // Jeśli odpowiedź będzie pozytywna wyświetli się fancybox
  43. });
  44. </script>
  45.  
  46.  
  47. </body>
  48. </html>
  49.  

Go to the top of the page
+Quote Post
adamantd
post 22.09.2013, 14:34:25
Post #7





Grupa: Zarejestrowani
Postów: 228
Pomógł: 7
Dołączył: 15.08.2012
Skąd: Rzeszów

Ostrzeżenie: (0%)
-----


Rozumiem. W takim razie będę musiał się zastanowić czy w ogóle wprowadzać takie rozwiązanie, ponieważ chciałem bezwzględnie wymusić na użytkowniku zaznaczenie przyczyny opuszczenia strony. Tak to się opisze i opisze, żeby dopracować kod a podejrzewam, że mało komu będzie się chciało zaznaczać przyczynę -lepiej uciec od razu skoro decyzja o ucieczce została już podjęta :/ Nikt nie lubi się tłumaczyć jeżeli nie musi tego robić.. Dzięki za odpowiedzi Pozdrawiam
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 31.05.2024 - 03:37