SPA + zewnętrzny skrypt jQuery

Odpowiedz Nowy wątek
2019-09-07 07:02
007
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; 

    });

});
edytowany 1x, ostatnio: 007, 2019-09-07 07:10

Pozostało 580 znaków

2019-09-07 10:43
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.


Pozostało 580 znaków

2019-09-07 11:14
007
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.

Pozostało 580 znaków

2019-09-07 13:23
m31
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.

edytowany 1x, ostatnio: m31, 2019-09-07 13:24

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

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