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

Question

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();

});

 

Comments

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() 

---

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 zapytanie" ajax-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

---

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.

---

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.

---

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.