Przekierowanie na inną stronę - Window.setTimeout

0

Witam serdecznie.

Mam kod do newslettera i teraz moje pytanie jest takie: Jak w momencie pojawienia się wiadomości "Dziękujemy za dodanie się do newslettera" przekierować użytkownika na moją stronę na /artykuły? po 5 sekundach? (www.x.pl/articles)

<form id="subscribe-form" class="subscribe-form hide">
            <div class="form-title">Dodałeś się do newslettera!</div>
            <hr>
            <div class="form-loading hide"><i class="fa fa-circle-o-notch fa-spin"></i></div>
            <div class="form-message hide">
                Dziękujemy za dodanie się do newslettera! Zaraz zostaniesz przekierowany na stronę z aktualnymi artykułami.
</div>
jQuery( document ).ready(function( $ ) {
	var $form_subscribe = $('#subscribe-form'),
			$form_unsubscribe = $('#unsubscribe-form');

	$form_subscribe.add($form_unsubscribe).submit(function(){
		var $form = $(this),
				$loading = $('.form-loading', $form),
				$content = $('.form-content', $form),
				$message = $('.form-message', $form);

		$loading.removeClass('hide');

		$.ajax({
			type: 'POST',
			url: 'script.php',
			data: $(this).serialize(),
			dataType: 'json',
			success: function(data){
				$loading.fadeOut('fast', function(){
					$(this).addClass('hide').fadeIn();
				});
				$('.error-message', $form).remove();
				if (data.code == 'failed'){
					data.fields = data.fields.reverse();
					for (var i in data.fields){
						$('[name=' + data.fields[i].name + ']', $form).trigger('focus').each(function(){
							if (['checkbox', 'radio'].indexOf($(this).prop('type')) === -1){
								$(this).trigger('click');
							}
						}).parent('div').each(function(){
							$(this).append($('<div>').addClass('error-message').html(data.fields[i].message));
						});
					}
				}else if (data.code == 'success'){
					$content.fadeOut('fast', function(){
						$(this).addClass('hide');
						$message.removeClass('hide');
					});
				}
			},
		});
		return false;
	});

	/**
	 * Show/Hide forms
	 * @param  {Boolean} is_subscribe [description]
	 * @return {[type]}               [description]
	 */
	function showForm(is_subscribe){
		var $form, $form_hide, timeout;
		if (is_subscribe){
			$form = $form_subscribe;
			$form_hide = $form_unsubscribe;
		}else{
			$form_hide = $form_subscribe;
			$form = $form_unsubscribe;
		}
		if (!$form_hide.hasClass('hide')){
			$form_hide.removeClass('show-me');
			timeout = 600; // base on css transitio duration
		}else{
			timeout = 0;
		}

		setTimeout(function(){
			$form_hide.addClass('hide');
			$form.removeClass('hide');
			setTimeout(function(){
				$form.addClass('show-me');
			}, 100);
		}, timeout);
	}

	$('[data-toggle=subscribe]').click(function(){
		showForm(true);
		return false;
	});

	$('[data-toggle=unsubscribe]').click(function(){
		showForm();
		return false;
	});

	// on load
	showForm(true);

});

Sądzę, że po

$message.removeClass('hide'); 

należy dodać jakiś kod, ale próbowałem

window.setTimeout(window.location.href = "https://www.x.pl/articles",5000);

Ale nie działa.
Proszę o pomoc :)

0
window.setTimeout(function(){window.location.href = "https://www.x.pl/articlesl"},5000);

Przecież to jest guglalne w 5 sekund :p

0

No okej, tylko jak teraz się do tego odwołać, aby działało to w momencie, gdy użytkownika przekieruje na wcześniej ukrytą formę "form-message".
Bo gdy dodaje do index.php kod:

<form id="subscribe-form" class="subscribe-form hide">
            <div class="form-title">Dodałeś się do newslettera!</div>
            <hr>
            <div class="form-loading hide"><i class="fa fa-circle-o-notch fa-spin"></i></div>
            <div class="form-message hide">
                Dziękujemy za dodanie się do newslettera! Zaraz zostaniesz przekierowany na stronę z aktualnymi artykułami.
<script type="text/javascript">
window.setTimeout(function(){window.location.href = "https://www.x.pl/articles"},5000);
    </script>
</div>

To przekierowuje mnie po pięciu sekundach od razu na stronę z artykułami, a nie czeka aż użytkownik, poda e-mail i zostanie mu wyświetlona wiadomość "dziękujemy..."

Poproszę o pomoc jak się do tego dokładnie odwołać aby działało :)

0
Owneds napisał(a):

No okej, tylko jak teraz się do tego odwołać, aby działało to w momencie, gdy użytkownika przekieruje na wcześniej ukrytą formę "form-message".

Nigdzie nie przekieruje, tylko uwidoczni obecny już na stronie, ukryty element (swoją drogą czemu zawarli to w FORM, skoro de facto nie jest formularzem?).
Nie wklejaj przekierowania wewnątrz tego ukrytego elementu, tylko po funkcji, która zdejmuje z niego klasę "hide".

0
else if (data.code == 'success'){
                    $content.fadeOut('fast', function(){
                        $(this).addClass('hide');
                        $message.removeClass('hide');
window.setTimeout(function(){window.location.href = "https://www.x.pl/articles"},5000);
});
                }
            },
        });
        return false;
    });

Też niestety nie daje żadnego efektu ;/ - w sensie nie przekierowuje już nigdzie

0

No to nie wiem, co tam się dzieje, a nie chce mi się zgadywać :)

0

Nie prościej zrobić po walidacji backendowej redirecta?

0

Generalnie to chciałem pójść na łatwiznę i mieć jakiś ładny 'newsletter', ale nie za dobrze znam to środowisko, więc mimo iż może poświecę więcej czasu to zrobię to chyba jednak na normalnym samym php

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