Ajax - problem ze zmianą zawartości divów

0

Witam. Mam problem. Otóż utworzyłem sobie na stronie dwa divy, w których są strzałki. Mają one służyć do przełączania zdjęć i opisów znajdujących się w dwóch innych divach (taka mała galeria). Jednak mam problem ze skryptem (wywoływany podczas onclick na diva), gdyż nie wykonuje mi się on w całości. mam coś takiego:

function showData(wybor) {  
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("zdjecie").innerHTML = xmlhttp.responseText;
        }
    };   
    xmlhttp.open("GET","zmienzdjecie.php?q="+wybor, true);  
    xmlhttp.send();
    
    if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("opis").innerHTML = xmlhttp.responseText;
            }
        };        
    
    xmlhttp.open("GET","zmienopis.php?q="+wybor, true);  
    xmlhttp.send();    
}

I mam dwa divy, jeden o id zdjecie, drugi o id opis. Gdy robię to osobno to wykonuje mi się to prawidłowo, czyli zmienia albo zdjęcie albo opis. Jednak gdy próbuje to wykonać razem zmienia mi tylko opis i kompletnie nie wiem dlaczego. Próbowałem to robić w oddzielnych funkcjach i wywoływać w ten sposób

<div id="lewo" onclick="showData('poprzednie'); showOpis('poprzednie')" ><img src="galeria_funkcyjne/arrow-left.png" id="strzalka"></div>

Ale także był zmieniany sam opis. I nie wiem w czym problem, a słabo znam javascript.

0

Pierwsze primo: nie ma zupełnie potrzeby wywoływania Twojego showData podwójnie - pozbądź się parametru na rzecz zwyczajnego xmlhttp.open("GET","zmienopis.php?q=poprzednie", true); .

Drugie primo: nadpisujesz sobie zmienną xmlhttp - albo wydziel ten kod do dwóch odrębnych funkcji, albo stwórz dwie odrębne zmienne.

Trzecie primo: zapomnij o istnieniu XMLHttpRequest - https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

0
Patryk27 napisał(a):

Pierwsze primo: nie ma zupełnie potrzeby wywoływania Twojego showData podwójnie - pozbądź się parametru na rzecz zwyczajnego xmlhttp.open("GET","zmienopis.php?q=poprzednie", true); .

Drugie primo: nadpisujesz sobie zmienną xmlhttp - albo wydziel ten kod do dwóch odrębnych funkcji, albo stwórz dwie odrębne zmienne.

Trzecie primo: zapomnij o istnieniu XMLHttpRequest - https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

Jak ją sobie nadpisuje? Powiem, że tego nie rozumiem, bo chyba powinno to wykonywać po kolei.

0

Tak, ale część kodu działa asynchronicznie - wtedy trzeba podejść nieco inaczej ;-)

Zwróć uwagę na funkcje, które przekazujesz do onreadystatechange - operują one na zmiennej xmlhttp, lecz te funkcje nie są wykonywane od razu - są odpalane gdzieś w bliżej nieokreślonej, asynchronicznej przyszłości (wtedy, gdy skończy się wykonywać żądanie).

Podobna sytuacja, z nadpisaną zmienną, wystąpi w tym kodzie:

let something = 0;

something = 1;

setTimeout(() => {
  alert(something); // zwróci "2", ponieważ zanim ta funkcja się wykona, zmienna "something" zdąży zostać nadpisana przez instrukcję niżej
}, 0);

something = 2;

setTimeout(() => {
  alert(something); // też zwróci "2"
});
0

Dobra, widzę w czym problem. Tylko teraz mam pytanie - czy da się wymusić synchronizację, czy lepiej będzie zmienić sposób aktualizowania zdjęć i opisów do nich?

0

Nie, nie da się wymusić synchronizacji - musisz podejść do tego tak, aby ta zmienna się nie nadpisywała.

0

Dobra, po prostu zrobiłem zmieniłem nazwę w części odpowiedzialnej za opis xmlhttp na xmlhttpdwa. To mam jeszcze jedno pytanie - chciałbym by przy wchodzeniu na tą podstronę powstawała za pomocą phpa zmienna (a przy wychodzeniu z niej się usuwała), która będzie przekazywana do innego pliku php (w celu odczytywania odpowiedniego zdjęcia i informacji z bazy danych o danym id), tam zostanie też ona zmieniona i zwrócona do tej strony. Czyli na zasadzie - ktoś wchodzi na stronę, domyślnie wyświetla się obrazek 1 i dane z bazy o id = 1. Dajemy strzałkę w prawo, czyli będziemy mieć teraz dwa itd. Co będzie lepsze - cookies czy sesja?

0

Cookies mogą być bezpośrednio modyfikowane przez użytkownika - sesja nie.
Wybierz to, co sprawdzi się lepiej.

0

To chyba wolę sesje. I jak to dokładnie powinno wyglądać? Robię bo mam coś takiego:

<body onload="zaladuj(); <?php session_start(); $_SESSION['numer'] = 1; ?>">

Na stronie na której znajduje się galeria.

I w pliku php, w którym odczytuje dane z bazy zrobiłem coś takiego dla testów:

echo $_SESSION['numer'];

Ale na stronie mi pokazuje komunikat Notice: Undefined variable: _SESSION in D:\xampp\htdocs\moto-weteran\zmienzdjecie.php on line 13. Czy czegoś nie uruchomiłem w tamtym pliku php?

0
  1. PHP jest językiem działającym w całości po stronie serwera - fakt, że wrzuciłeś kod PHP do onload nie ma żadnego znaczenia (odpal sobie podgląd odebranego kodu HTML w przeglądarce, a zobaczysz sam, że nie ma tam żadnego PHPa).

  2. Czy w tym drugim pliku masz session_start();?

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