SPA + zewnętrzny skrypt jQuery

0

Posiadam aplikacje typu SPA do której próbuje podpiąć zewnętrzny skrypt jQuery. Skrypt ten odpowiedzialny jest za walidacje formularza. Zdarzenie event w formularzu działa ale wyłącznie w sytuacji gdy:

  1. Wczytam bezpośrednio podstronę z formularzem.
  2. Odświeżę podstronę z formularzem.

Nie jestem w stanie wymusić działania skryptu po standardowym wczytaniu strony głównej a następnie przechodząc do zakładki z formularzem. Podstrona się ładuje, kod HTML formularza także ale walidacja nie działa. Próbowałem różnych kombinacji z atrybutem defer jak i umieszczeniem skryptu w głównym pliku index.html ale nic to nie daje. Ktoś wie jak to ugryźć?

jQuery(window).load(function(){
	
	$('#contactform').submit(function(){
	
		var action = $(this).attr('action');
		
		$('#submit').attr('disabled','disabled').after('<img src="assets/ajax-loader.gif" class="loader" />');
		
		$("#message").slideUp(750,function() {
		$('#message').hide();			
		
		$.post(action, { 
			name: $('#name').val(),
			email: $('#email').val(),
			phone: $('#phone').val(),
			subject: $('#subject').val(),
			comments: $('#comments').val(),
			verify: $('#verify').val()
		},
			function(data){
				document.getElementById('message').innerHTML = data;
				$('#message').slideDown('slow');
				$('#contactform img.loader').fadeOut('fast',function(){$(this).remove()});
				$('#submit').removeAttr('disabled'); 
				if(data.match('success') != null) $('#contactform').slideUp('slow');
				
			}
		);
		
		});
		
		return false; 
	
	});
	
});

0

Przy SPA raczej nie ma sensu ładować jquery, bo zwykle robisz to na vue/react/angular więc to bez sensu, ew. możesz użyć axios do ajaxa.

0
czysteskarpety napisał(a):

Przy SPA raczej nie ma sensu ładować jquery, bo zwykle robisz to na vue/react/angular więc to bez sensu, ew. możesz użyć axios do ajaxa.

No tak, tyle, że ja nie mam wystarczającego doświadczenia aby ogarnąć to w vue/react/angular a tutaj mam gotowe rozwiązanie, które z jakiegoś powodu nie do końca działa. Wiem, że HTML5 ma natywna walidacja formularzy ale wolałbym wykorzystać załączony skrypt z racji tego, że po zatwierdzeniu formularza jego mechanizm od razu ukrywa formularz po wysłaniu.

Próbowałem dodawać skrypt zarówno do head jak i footer ale nic to nie rozwiązuje problemu.

1

Twój skrypt jest wywoływany tylko przy tradycyjnym załadowaniu strony:

Ten kod jQuery(window).load(function(){ ... } nasłuchuje moment załadowania strony (nie ajaxowy). I uruchamia wewnętrzną funkcję $('#contactform').submit(function(){ ... } która nasłuchuje eventu submit na formularzu.
Kiedy wchodzisz bezpośrednio na stronę z formularzem to wszystko działa poprawnie. Natomiast gdy wchodzisz początkowo na inną stronę, nasłuchiwanie na formularzu nie jest dodawane, bo po prostu nie ma tam formularza w momencie kiedy jest emitowany event load na window.

Dlatego musisz podpinać nasłuchiwanie na formularzu za każdym razem kiedy zostaje on załadowany. Ten $('#contactform').submit(function(){ ... } fragment musi być odpalany ręcznie za każdym gdy nowa treść jest załadowana przez ajaxa.

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