• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Drugi skrypt ajax nie działa poprawnie po załadowaniu pierwszego

VPS Starter Arubacloud
0 głosów
306 wizyt
pytanie zadane 5 marca 2022 w JavaScript przez Us Użytkownik (880 p.)
edycja 5 marca 2022 przez Us

Cześć,

Mam takie dwa skrypty jak poniżej. Oba działają poprawnie jeśli używam ich oddzielnie, jednak jak załaduję pierwszego, a następnie drugiego to już nie. Działa to tak, że ten drugi skrypt potrafi zmienić css, ale już wartości nie. Podejrzewam, że jest to związane z metodą .load() w pierwszym skrypcie, ale sam nie potrafię rozwikłać problemu. 

Z góry dziękuję za pomoc.

 

Pierwszy kod:

var basketAddTimeout;
var ajaxSubmitForm;

    ajaxSubmitForm = function() {
        $this = $('#projector_button_basket');
		
        var url = $('#projector_form').attr('action');
        var txt = $this.text().trim();
        clearTimeout(basketAddTimeout);
        $.ajax({
            type: 'POST',
            url: url,
            data: $('#projector_form').serializeArray(),
            success: function(data) {	
                basketAddTimeout = setTimeout(function() { 
					openbasket();
					koszyczekk();
					$('#Basket').load(' #projector-basket-form');
                }, 1000)
                fetch('/ajax/basket.php').then(res => res.json()).then(({
                    basket
                }) => {
                    const number = basket.productsNumber;
					const number12 = basket.worth_formatted;
					$('#kwota-basket').text(number12);
					
                    document.getElementById('badgekoszyka').style.display = 'block';
					$( "#badgekoszyka" ).fadeOut( "slow");
					$( "#badgekoszyka" ).fadeIn( "slow");
                    $('#menu_basket .badge').text(number);
                    $('#badgekoszyka').text(number);
					
                })
            },
            error: function() {
                classObj.alert(classObj.txt.dodano_produkt_blad);
                $('#projector_button_basket').html(txt);
                $('#projector_button_basket').removeClass('loader');
            }
      });
    }

$(document).on('submit', '#projector_form', function(e) {
    
   
    ajaxSubmitForm();
	 e.preventDefault();
});

Drugi:

var ajaxSubmitForm2;

    ajaxSubmitForm2 = function() {
        var url = '/basketchange.php?type=multiproduct';
		$('#loaders').addClass('loader-koszyk');
		$('#blok-koszyk').css('filter','blur(3px)');
		let xxx = $('#projector-basket-form').serializeArray();
     
        $.ajax({
            type: 'POST',
            url: url,
            data: $('#projector-basket-form').serializeArray(),
            success: function(data) {
               
							koszyczekk();
							
                
                fetch('/ajax/basket.php').then(res => res.json()).then(({
                    basket
                }) => {
					
					
                    const number = basket.productsNumber;
                    const number12 = basket.worth_formatted;
					$('#kwota-basket').text(number12);
                    $('#menu_basket .badge').text(number);
                    $('#badgekoszyka').text(number);
					$('.topBasket').load('/basketchange.php?type=multiproduct&mode=2 .topBasket>*', function() {});
					$('#loaders').removeClass('loader-koszyk');
					$('#blok-koszyk').css('filter','blur(0px)');
				
                })
            },
            error: function() {
                classObj.alert(classObj.txt.dodano_produkt_blad);
			}
        });
    }


$(document).on('click', '#usuwanie-koszyk, #dodawanie-koszyk, #usuwanie-calkowite ', function() {
	
	ajaxSubmitForm2();
	e.preventDefault();

});

 

1
komentarz 5 marca 2022 przez Wiciorny Ekspert (269,120 p.)
Ajax jest asynchroniczny, wiec to ze wywolujesz np ajaxSubmit1 potem ajaxSubmit2, nie daje Ci gwarancji ze ajaxSubmit2 nie wywola sie przed :) lub jednoczesnie
komentarz 6 marca 2022 przez VBService Ekspert (251,210 p.)

BTW, dziwne, że drugi skrypt nie "rzuca" błędu w konsoli bo odwołuje się do parametru e (skrócony zapis od event) w sensie, że napisałeś

Oba działają poprawnie

$(document).on('click', '#usuwanie-koszyk, #dodawanie-koszyk, #usuwanie-calkowite ', function() {
     
    ajaxSubmitForm2();
    e.preventDefault();
 
});

powinno być

$(document).on('click', '#usuwanie-koszyk, #dodawanie-koszyk, #usuwanie-calkowite', function(e) {
     
    ajaxSubmitForm2();
    e.preventDefault();
 
});

 

komentarz 6 marca 2022 przez VBService Ekspert (251,210 p.)

@Us;

 jednak jak załaduję pierwszego, a następnie drugiego to już nie.

"załaduj" obydwa, "uruchom" stronę i zobacz w konsoli jakie są komunikaty błędów, bo zakładam, że są.  smiley

komentarz 6 marca 2022 przez Us Użytkownik (880 p.)

Niestety nie ma żadnego błędu. Uwierzcie mi, że próbowałem już wszystkiego ;D W zakładce "network" pokazuje jakoby wszystko się ładowało poprawnie. Dodatkowo załączę wam film, który wrzuciłem na youtube, abyście mniej więcej mieli jakiś obraz sytuacji. Pierwszy skrypt to ten duży przycisk "dodaj do koszyka", a drugi plus i minus. Z tym parametrem też kombinowałem, ale efektu nie było.

https://www.youtube.com/watch?v=C9ZRxNsQ8Zw

komentarz 6 marca 2022 przez VBService Ekspert (251,210 p.)
edycja 6 marca 2022 przez VBService

 Z tym parametrem też kombinowałem, ale efektu nie było.

kod w którym odwołujesz się do parametru (zmiennej) bez jest deklaracji (istnienia) "rzuca" błąd, "odpal" ten kod (błędny) i sprawdź konsolę.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<button id="usuwanie-koszyk">-</button>
<button id="dodawanie-koszyk">+</button>
<button id="usuwanie-calkowite">X</button>

<script>
$(document).on('click', '#usuwanie-koszyk, #dodawanie-koszyk, #usuwanie-calkowite', function() {      
  ajaxSubmitForm2();
  e.preventDefault();

  function ajaxSubmitForm2() {
    console.log('Ajax was called by ' + e.target.id);
  }   
});  
</script>

 

tu prawidłowy

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<button id="usuwanie-koszyk">-</button>
<button id="dodawanie-koszyk">+</button>
<button id="usuwanie-calkowite">X</button>

<script>
$(document).on('click', '#usuwanie-koszyk, #dodawanie-koszyk, #usuwanie-calkowite', function(e) {      
  ajaxSubmitForm2();
  e.preventDefault();

  function ajaxSubmitForm2() {
    console.log('Ajax was called by ' + e.target.id);
  }   
});  
</script>

 

komentarz 6 marca 2022 przez VBService Ekspert (251,210 p.)

BTW, według filmiku, m. in. (takie jest Moje zdanie): nie powinna być możliwość dodawania produktu do koszyka przyciskiem  Dodaj do koszyka skro dany produkt już znajduje się w koszyku co najwyżej powinien być wywołany efekt jak po naciśnięciu przycisku w koszyku niebieski plus, czyli zwiększyć tylko wartość w polu ilość.

komentarz 6 marca 2022 przez VBService Ekspert (251,210 p.)

Druga sprawa (Moja opinia) te dane, które pobierasz "drugim" ajax-em., czyli zapis

...
$.ajax({
            type: 'POST',
            url: url,
            data: $('#projector_form').serializeArray(),
            success: function(data) {   
                basketAddTimeout = setTimeout(function() { 
                    openbasket();
                    koszyczekk();
                    $('#Basket').load(' #projector-basket-form');
                }, 1000)
                fetch('/ajax/basket.php').then ...

powinny być pobrane za pierwszym użyciem ajax-a. Po co wywoływać ajax-a w ajax-ie. Nie używasz w ogóle danych zwróconych do zmiennej data

success: function(data) ...

 

komentarz 7 marca 2022 przez Us Użytkownik (880 p.)

Być może za mało podałem danych, stąd też są te komentarze, które nie rozwiązują problemu. Zignorujmy na chwilę wszystko co się wykonuje w "success", oraz parametry, zmienne itd. Jest to środowisko testowe więc niech się dzieje co chcę póki co. 

Jednak ten zapis w pierwszym ajax'ie 

$('#Basket').load(' #projector-basket-form');

moim zdaniem powoduje cały "błąd". Wydaje mi się (bo ajax to ja się dopiero uczę), że kiedy to ładuję, to tak, jak by ładuję do diva pewną wartość lub zestaw wartości, której następnie nie mogę zmienić drugim ajaxem. Tak wiem, że to też jest ajax i ładuje ajaxa ajaxem, ale to nie w tym rzecz. Przy próbie zmiany tych wartości, jak bym po prostu ładował to co już było, dlatego nie widzę zmian, bo one nie zachodzą, a jednak widzę, że ajax coś ładuje w zakładce "network". 

komentarz 7 marca 2022 przez VBService Ekspert (251,210 p.)
edycja 7 marca 2022 przez VBService

Też mam takie wrażenie, że użycie element.load nie jest do końca prawidłowe bo parametr w load odwołuje się do innego elementu  #projector-basket-form nie wiem co zawiera ten element #projector-basket-form, bo na ten przykład Ja zawsze używałem (używam) load w takim kontekście, prosty przykład: wszystkie pliki index.htmldata.txt, data.xml znajdują się w tym samym katalogu na serwerze.

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  </head>
  <body>
    <pre></pre>
    <br />
    <textarea cols="50" rows="5"></textarea>

    <script>
      window.onload = _=> {
        $('pre').load('data.xml');
        $('textarea').load('data.txt');       
      }
    </script>
  </body>
</html>

data.xml

<?xml version="1.0" encoding="UTF-8"?>
<note>
  <to>Tove</to>
  <from>Jani</from>
  <heading>Reminder</heading>
  <body>Don't forget me this weekend!</body>
</note>

data.txt

Czym jest Lorem Ipsum?

Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w. wraz z publikacją arkuszy Letrasetu, zawierających fragmenty Lorem Ipsum, a ostatnio z zawierającym różne wersje Lorem Ipsum oprogramowaniem przeznaczonym do realizacji druków na komputerach osobistych.

 

komentarz 7 marca 2022 przez VBService Ekspert (251,210 p.)
edycja 7 marca 2022 przez VBService

Według dokumentacji .load() pierwszym parametrem jest url, a w Twoim kodzie

$('#Basket').load('#projector-basket-form');

jest to dowołanie się do elementu o id = projector-basket-form, więc sam sobie odpowiedz.

 

ten kod nie wywoła błędu w konsoli

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  </head>
  <body>
    <pre id="note"></pre>
    <br />
    <textarea cols="50" rows="5"></textarea>
    <br />
    <div></div>

    <script>
      window.onload = _=> {
        $('pre').load('data.xml');
        $('textarea').load('data.txt');

        setTimeout(_=> { $('div').load('#note'); }, 2000);       
      }
    </script>
  </body>
</html>

ale zobacz w dev kod html po 2 sekundach (setTimeout ... 2000)

 

u Mnie po załadowaniu się strony:

<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  </head>
  <body>
    <pre id="note"><!--?xml version="1.0" encoding="UTF-8"?-->
      <note>
        <to>Tove</to>
        <from>Jani</from>
        <heading>Reminder</heading>
        Don't forget me this weekend!
      </note>
    </pre>
    <br>
    <textarea cols="50" rows="5">Czym jest Lorem Ipsum?

Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w. wraz z publikacją arkuszy Letrasetu, zawierających fragmenty Lorem Ipsum, a ostatnio z zawierającym różne wersje Lorem Ipsum oprogramowaniem przeznaczonym do realizacji druków na komputerach osobistych.</textarea>
    <br>
    <div></div>

    <script>
      window.onload = _=> {
        $('pre').load('data.xml');
        $('textarea').load('data.txt');

        setTimeout(_=> { $('div').load('#note'); }, 2000);       
      }
    </script>
  
  </body>
</html>

po wykonaniu się kodu

setTimeout(_=> { $('div').load('#note'); }, 2000);
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  </head>
  <body>
    <pre id="note"><!--?xml version="1.0" encoding="UTF-8"?-->
      <note>
        <to>Tove</to>
        <from>Jani</from>
        <heading>Reminder</heading>
        Don't forget me this weekend!
      </note>
    </pre>
    <br>
    <textarea cols="50" rows="5">Czym jest Lorem Ipsum?

Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w. wraz z publikacją arkuszy Letrasetu, zawierających fragmenty Lorem Ipsum, a ostatnio z zawierającym różne wersje Lorem Ipsum oprogramowaniem przeznaczonym do realizacji druków na komputerach osobistych.</textarea>
    <br>
    <div>  
      <meta charset="utf-8">
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  
  
      <pre id="note"></pre>
      <br>
      <textarea cols="50" rows="5"></textarea>
      <br>
      <div></div>

      <script>
        window.onload = _=> {
          $('pre').load('data.xml');
          $('textarea').load('data.txt');

          setTimeout(_=> { $('div').load('#note'); }, 2000);       
        }
      </script>  
    </div>

    <script>
      window.onload = _=> {
        $('pre').load('data.xml');
        $('textarea').load('data.txt');

        setTimeout(_=> { $('div').load('#note'); }, 2000);       
      }
    </script>
  
  </body>
</html>

 

jedna wielka "kaszana".  smiley

komentarz 8 marca 2022 przez Us Użytkownik (880 p.)

Dzięki za odpowiedź. Jeśli chodzi o projector-basket-form to jest to po prostu formularz z listą produktów, któremu muszę przekazać dane, takie jak ilość, koszt, id itd. Też próbowałem załadować dane z url w taki sposób:

$('#projector-basket-form').load('/basketchange.php?type=multiproduct&mode=2');

Ale ładowało do tego formularza całą stronę ;D Więc zrobiłem tak:

$('#projector-basket-form').load('/basketchange.php?type=multiproduct&mode=2 #projector-basket-form>*');

No i niestety to dalej nie śmiga jak powinno, więc chyba muszę zrezygnować z .load() ale nie mam pojęcia jak tam przekazać te dane. Po za tym jest to trochę dziwne, że wybieram element, do którego ładuję dane, a oprócz tego ładuje się tam ta strona, którą aktualnie przeglądam :D

Gdyby istniał sposób na to, żeby odświeżyć ten element #projector-basket-form po kliknięciu to była by rewelacja, ale na stackoverflow jedyny sposób jaki podają to właśnie .load() 

komentarz 8 marca 2022 przez VBService Ekspert (251,210 p.)
edycja 8 marca 2022 przez VBService

ten zapis jest nieprawidłowy

$('#projector-basket-form').load('/basketchange.php?type=multiproduct&mode=2 #projector-basket-form>*');

prawidłowy jest do momentu

$('#projector-basket-form').load('/basketchange.php?type=multiproduct&mode=2');

chyba się domyślam czego potrzebujesz, potrzebujesz obiektu json, który zwróci Twój skrypt php ('/basketchange.php?type=multiproduct&mode=2'), za pomocą json-a, możesz przesłać wartość kilku zmiennych, które mają być załadowane do kilku elementów na stronie i  wystarczy do tego "jedno zapytanieajax-owe.

Przykładowy wygląd takiego json-a, który "zwróciłby" basketchange.php?...

pierwsza wartość w cudzysłowie to może być id elementu na stronie, do którego ma być załadowana wartość podana po dwukropku w drugim cudzysłowie.

{ 'kwota-basket':'12.20pln', 'inne-id1':'wartosc1', 'inne-id2':'wartosc2' }

lub nawet dla kliku artykułów w koszyku

[ 
  { 'kwota-basket':'12.20pln', 'inne-id1':'wartosc1', 'inne-id2':'wartosc2' },
  { 'kwota-basket':'18.20pln', 'inne-id5':'wartosc5', 'inne-id6':'wartosc6' }, // itd.
]

po odebraniu przez ajax-a takiego json-a w 

success: function(data) { ...

iterujesz po odpowiednich polach (getElementById, czy querySelector itp.) i wstawiasz dane.

 

P.S. json_encode in php for js

komentarz 8 marca 2022 przez Us Użytkownik (880 p.)
Próbowałem to sobie zobrazować i faktycznie mogło by pomóc, jednak tylko wtedy gdy bym pracował bezpośrednio na html. A tutaj jest szablon xsl. Jeśli nie ma produktu w koszyku, to formularz jest w postaci "okrojonej" bez wielu elementów i nie mogę sobie tam "od tak" wstawić zdjęcia, tytułu itd. Sprawa niestety jest bardzo skomplikowana ;D Pewnie gdybyś miał wgląd w to co ja to było by inaczej, a tak z mojego opisu musisz się wiele domyślać. Tak sobie teraz pomyślałem, że mógłbym z tego koszyka zrobić osobną stronę, dzięki czemu można by to odświeżać dowoli.
komentarz 8 marca 2022 przez VBService Ekspert (251,210 p.)

Szablony xsl też możesz "przegląd" i robić zmiany prawie podobnie jak to się robi w dokumentach xml i to z poziomu jak i php-a taki i z javascript.

komentarz 8 marca 2022 przez VBService Ekspert (251,210 p.)
edycja 8 marca 2022 przez VBService

Skoro na początku napisałeś

Oba działają poprawnie jeśli używam ich oddzielnie

może pierwszy załaduj jako "normalny" (html + pierwszy skrypt) drugi załaduj na tej samej stronie do <iframe> (html + drugi skrypt) i wtedy będzie traktowany jako osobny dokument html.

 

Tak sobie teraz pomyślałem, że mógłbym z tego koszyka zrobić osobną stronę, dzięki czemu można by to odświeżać dowoli.

w <div> ustawionym jak modal (html + pierwszy skrypt)  wrzucasz <iframe> (html + drugi skrypt) i na jednej stronie masz dwa niezależne dokumenty html, miedzy którymi ciągle możesz "przerzucać" dane za pomocą js-a.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

0 głosów
1 odpowiedź 331 wizyt
0 głosów
2 odpowiedzi 187 wizyt
0 głosów
1 odpowiedź 82 wizyt
pytanie zadane 8 października 2018 w JavaScript przez Bakr Mądrala (6,850 p.)

92,452 zapytań

141,262 odpowiedzi

319,085 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...