Przycisk wywołujący zapytanie update bez przeładowania strony.

0

Cały czas próbuję rozwiązać problem połączenia ajaxa, js, php. Znalazłem coś co mniej więcej by mi było potrzebne.
https://stackoverflow.com/questions/17581623/update-sql-value-in-ajax-and-php
Jest tylko jeden problem, ID, jest tam stałe. Zapisane w htmlu i js na sztywno. Potrzebowałbym dynamicznie tworzonych buttonów/znaczników<a> i tak robię, ale mają one id np. btn_13. Jak zrobić, żeby działało to na każdy przycisk? I jak zrobić, żeby w pliku bookmarks.php mieć dostęp do zmiennych z głównego pliku?

0

Najprościej wykorzystać jQuery.
Jeśli masz taką możliwość, wykorzystaj button zamiast a. Wszystkim daj znacznik class, np. btn-xxx i atrybut, np. data-id. W jQuery robisz

$(".btn-xxx").click(() => {
    let id = $(this).attr("id");
    $.post('/url.php', {id: id});
});

Piszę to tak na prawdę na podstawie pierwszego zdania Twojego postu. Przyznaję szczerze, że do końca nie wiem o co Ci chodzi. Fajnie byłoby, gdybyś wkleił co już masz i gdzie konkretnie masz problem.

0

@arczinosek dzięki za pomoc. W załączniku jest screen na, którym jest tabela z buttonami, wszystko działa, ale napisałem to w php i po kliknięciu strona się odświeża a tak być nie może. Może być w jquery, mam już podpięte i używam.

[0] -> kliknięcie -> zapytanie UPDATE do bazy sql -> zmiana napisu/koloru [1]
[1] -> kliknięcie -> zapytanie DELETE do bazy sql -> zmiana napisu/koloru [0]

0

Po pierwsze, tak jak wcześniej pisałem zrób buttony buttonami a nie linkami (<button>).
Po drugie, gdyby jakimś cudem nadal dochodziło to przeładowania strony, zmodyfikuj callback na:

$(".btn-xxx").click((e) => {
  e.preventDefault();
  // reszta bez zmian
});

e to obiekt zdarzenia a metoda preventDefault() jak sama nazwa mówi, nie dopuszcza do domyślnej obsługi zdarzenia, czyli ma się wykonać to co w tej funkcji i nic więcej.

Kolejna sprawa: jesteś pewny, że po stronie PHP wszystko działa jak należy?

0

Użyj AJAX . Pozwala na modyfikacje strony bez przeładowania. Definiujesz Ajax w javascript gdy ktoś naciśnie buttona dostajesz odpowiedz z strony.php np kod html który podmieniasz gałęzi drzewa DOM tym samym updejtując np dany panel .

0

@arczinosek: index.html

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\" lang=\"pl-PL\">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style></style>
</head><body>
<button class="btn-xxx" id="p1" name="p1">p1</button>
<button class="btn-xxx" id="p2" name="p1">p2</button>
<button class="btn-xxx" id="p3" name="p1">p3</button>
<button class="btn-xxx" id="p4" name="p1">p4</button>


<script>
$(".btn-xxx").click(() => {
    let id = $(this).attr("id");
    $.post('/button.php', {id: id});
});
</script>
</body>
</html>

button.php

<?php

echo "Button o id: ".$id;

Niestety nie działa, nie wiem dalej co jest źle.

0
<html xmlns=\"http://www.w3.org/1999/xhtml\" lang=\"pl-PL\">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style></style>
</head><body>
<button class="btn-xxx" id="p1" onclick="loadDoc(1)">p1</button>
<button class="btn-xxx" id="p2" onclick="loadDoc(2)">p2</button>
<button class="btn-xxx" id="p3" onclick="loadDoc(3)">p3</button>
<button class="btn-xxx" id="p4"  onclick="loadDoc(4)">p4</button>
 <span id="napis"></span>
<script>
                                  // Tak w JS ale możesz to przerobić na JQuery
function loadDoc(num) {       
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     document.getElementById("napis").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "button.php?selected=num", true);
  xhttp.send();
}
</script>
</body>
</html>

W php
Może brakowało ci pobrania wartości
to wtedy
$wartosc = $_POST["id"];

<?php
$wartosc = $_GET["selected"]
echo $wartosc;

Nie korzystam za czesto z Jquery ale mi trochę tam brakuje Ajaxa

function loadDoc(x)
{

        $.ajax({
            url: "button.php", 
            type:'POST',
            data:{id: x},
           contentType: 'charset=utf-8',
            success: function(response){
            $("#napis").html(response);
        }});
 

}
0
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\" lang=\"pl-PL\">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style></style>
</head><body>
<button class="btn-xxx" id="p1" name="p1">p1</button>
<button class="btn-xxx" id="p2" name="p1">p2</button>
<button class="btn-xxx" id="p3" name="p1">p3</button>
<button class="btn-xxx" id="p4" name="p1">p4</button>
 
<script>
$(".btn-xxx").on("click", function(){
    var id = $(this).attr("id");
    $.post('/button.php', {id: id});
});
</script>
</body>
</html>

0

@krancki działa, to znaczy po naciśnięciu przycisku działa, ale pokazuje w każdym przypadku tylko num

0
CodeRZ napisał(a):

@krancki działa, to znaczy po naciśnięciu przycisku działa, ale pokazuje w każdym przypadku tylko num

xhttp.open("GET", "button.php?selected="+num, true); // tu był błąd
xhttp.send();
}

0

@krancki teraz działa. Dzięki! Jeszcze tylko jedna rzecz. Czy nie dało by się tego inaczej zrobić, bez tego onclick="loadDoc(1)", tylko onclick="loadDoc" . Chce to zrobić dynamicznie, żeby przyciski się tworzyły same. I jeszcze jak tego ajaxa dodać? dodać go niżej do funkcji czy zastąpić? Docelowo muszę wykonać jeszcze zapytanie update. I jeszcze jedna prosta chyba rzecz, zmiana klasy i wartości pomiędzy <button></button>

0
CodeRZ napisał(a):

@krancki teraz działa. Dzięki! Jeszcze tylko jedna rzecz. Czy nie dało by się tego inaczej zrobić, bez tego onclick="loadDoc(1)", tylko onclick="loadDoc" . Chce to zrobić dynamicznie, żeby przyciski się tworzyły same. I jeszcze jak tego ajaxa dodać? dodać go niżej do funkcji czy zastąpić? Docelowo muszę wykonać jeszcze zapytanie update. I jeszcze jedna prosta chyba rzecz, zmiana klasy i wartości pomiędzy <button></button>

to jest właśnie ajax -> var xhttp = new XMLHttpRequest();
możesz ustawiać w



<button class="btn-xxx" id="p1" onclick="loadDoc(this)" >p1</button>                            słowo kluczowe this zwraca ci element <button>


<script>
                                
function loadDoc( button) {
   
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     document.getElementById("napis").innerHTML = this.responseText;     // to sie wykonuje gdy  xhttp.open() się wykona. Tutaj możesz zmieniać swoje drzewo DOM
  // Jakbyś chciał zmienić wartość w <button></button> wtedy       button.innerHTML="jakiś napis";
    }
  };
  xhttp.open("GET", "button.php?selected="+button.innerHTML, true);
  xhttp.send();
}
</script>


function loadDoc(button)

ten button to jest element drzewa DOM
poczytaj sobie na
https://www.w3schools.com/js/js_htmldom.asp

Na backend byś musiał sprawdzać wartości czy są poprawne (walidacja )

0

@krancki: chyba zrobiłem, jak trzeba, zostawiam to jak by ktoś miał podobny problem

index.html

<html xmlns=\"http://www.w3.org/1999/xhtml\" lang=\"pl-PL\">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style></style>
</head><body>
<button class="btn-xxx" id="b1" onclick="loadDoc(this)">OFF</button>
<button class="btn-xxx" id="b2" onclick="loadDoc(this)">OFF</button>
<button class="btn-xxx" id="b3" onclick="loadDoc(this)">ON</button>
<button class="btn-xxx" id="b4" onclick="loadDoc(this)">OFF</button>
 <span id="napis"></span>
<script>

function loadDoc( button) {

  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     document.getElementById("napis").innerHTML = this.responseText;
	 if(button.innerHTML=="ON"){button.innerHTML="OFF";}
	 else{button.innerHTML="ON";}
    }
  };
  xhttp.open("GET", "button.php?id="+button.id+"&state="+button.innerHTML, true);
  xhttp.send();
  
  
}
</script>
</body>
</html>

button.php

<?php
$id = $_GET["id"];
$state = $_GET["state"];
if($state == "OFF"){
	$sql="UPDATE test SET State='ON' WHERE ID=$id";
}
else{
	$sql="UPDATE test SET State='OFF' WHERE ID=$id";	
}
	

echo $sql;

Jak do button php dam połącznie do bazy i zapytanie update to wszystko będzie działać? Nie muszę nic więcej zmieniać?

0

@krancki: próbowałem to dalej przerabiać i jest dziwna rzecz, nie chce przechodzić dalej, zatrzumuje się przd if sprawdzajacym zaladowanie

<script>function loadDoc( button) {
	document.getElementById("p_test").innerHTML = 1;

  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
	  document.getElementById("p_test").innerHTML = 2;
    if (this.readyState == 4 && this.status == 200) {
		document.getElementById("p_test").innerHTML = 3;
     //document.getElementById("napis").innerHTML = this.responseText;
	 if(button.innerHTML=="✔"){button.innerHTML="✘";document.getElementById("p_test").innerHTML = 4;}
	 else{button.innerHTML="✔"; document.getElementById("p_test").innerHTML = 4;}
    }
  };
  xhttp.open("GET", "php/button.php?id="+button.id+"&state="+button.innerHTML, true);
  xhttp.send();
  
  
}</script>

nie rozumiem, na innej stronie działało.

0
CodeRZ napisał(a):

@krancki: próbowałem to dalej przerabiać i jest dziwna rzecz, nie chce przechodzić dalej, zatrzumuje się przd if sprawdzajacym zaladowanie

<script>function loadDoc( button) {
	document.getElementById("p_test").innerHTML = 1;

  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {                              // onreadystatechange wykona funkcje  4 razy  
	  document.getElementById("p_test").innerHTML = 2;      // Czyli to również wykona się 4 razy. jest to bez sensu żeby to tu umieszczać.
    if (this.readyState == 4 && this.status == 200) {
		document.getElementById("p_test").innerHTML = 3;
     //document.getElementById("napis").innerHTML = this.responseText;
	 if(button.innerHTML=="✔"){button.innerHTML="✘";document.getElementById("p_test").innerHTML = 4;}
	 else{button.innerHTML="✔"; document.getElementById("p_test").innerHTML = 4;}
    }
  };
  xhttp.open("GET", "php/button.php?id="+button.id+"&state="+button.innerHTML, true);       // ostatni parametr też ma znaczenia ponieważ oznacza on czy ładowanie ma być synchroniczne czy niesynchroniczne, Oznacza to iż dopuki strona cała się nie załaduje(Całe drzewo DOM)  funkcja się nie wykona.  Tutaj wykona się raz bo przy pierwszym stanie edytujesz drzewo(Możliwe że przez to się blokuje) - > document.getElementById("p_test").innerHTML = 2;  . Jeżeli zmienisz na false funkcja wykona się niezależnie od stanu drzewa DOM, Jest to spoko gdy strona jest rozbudowana.  
  xhttp.send();
  
  
}</script>

nie rozumiem, na innej stronie działało.

Staraj się zawsze zaznaczać gdzie pojawia się błąd

0

@krancki zmiana tej wartości na false nie pomogła. Te document.getElementById("p_test").innerHTML = 2; umieściłem, żeby wiedzieć gdzie program nie dochodzi. I niestety tylko do 2 dochodzi. Problem jest dokładnie w tym, że po naciśnięciu zmienia się tylko "p_test" na 2 i nic więcej, a powinno działać wszystko tak jak w innym pliku. Dokładnie to gdzieś tu
if (this.readyState == 4 && this.status == 200) { jest błąd

0
CodeRZ napisał(a):

@krancki zmiana tej wartości na false nie pomogła. Te document.getElementById("p_test").innerHTML = 2; umieściłem, żeby wiedzieć gdzie program nie dochodzi. I niestety tylko do 2 dochodzi. Problem jest dokładnie w tym, że po naciśnięciu zmienia się tylko "p_test" na 2 i nic więcej, a powinno działać wszystko tak jak w innym pliku. Dokładnie to gdzieś tu
if (this.readyState == 4 && this.status == 200) { jest błąd

To prawdopodobnie nie spełnia warunku czyli jest błąd z połączenie albo plik nie istnieje (button.php)
zrób tak

xhttp.onreadystatechange = function() {
      document.getElementById("p_test").innerHTML += this.readyState;  // Sprawdzasz na jakim statusie sie zatrzymuje 
    if (this.readyState == 4 && this.status == 200) {
        document.getElementById("p_test").innerHTML = 3;
     //document.getElementById("napis").innerHTML = this.responseText;
     if(button.innerHTML=="✔"){button.innerHTML="✘";document.getElementById("p_test").innerHTML = 4;}
     else{button.innerHTML="✔"; document.getElementById("p_test").innerHTML = 4;}
    }
  };

w zależności od numeru 0 do 4
0: request not initialized
1: server connection established
2: request received
3: processing request
4: request finished and response is ready

xhttp.open("GET", "php/button.php?id="+button.id+"&state="+button.innerHTML, true);
na pewno masz plik button.php w folderze php ?

0

@krancki: pokazuje tylko 1 w "p_test", po kliknięciu w button.

function loadDoc( button) {

	document.getElementById("p_test").innerHTML = 1;

  var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
      document.getElementById("p_test").innerHTML += this.readyState;
    if (this.readyState == 4 && this.status == 200) {
        document.getElementById("p_test").innerHTML = 3;
     //document.getElementById("napis").innerHTML = this.responseText;
     if(button.innerHTML=="✔"){button.innerHTML="✘";document.getElementById("p_test").innerHTML = 4;}
     else{button.innerHTML="✔"; document.getElementById("p_test").innerHTML = 4;}
    }
  };
}
0

Sprawdź czy plik na pewno ma dobrą ścieżkę . Czy xamp jest uruchomiony. Musisz sam zlokalizować przyczynę

0

@krancki: Capture.PNG
Capture2.PNG

Jestem prawie pewny, że jest coś nie tak z ready state i status.

0

Ten plik php nie generuje błędu ? Stwórz nowy plik i zrób prosty get i echo jeżeli się wykona to masz błąd w tamtym pliku

0

@krancki nie widzę, raczej nie dałem @, to nie jest jeden plik, jest tam już dużo różnych plików php/js/css
Sprawdziłem dokładnie, nie działa na mojej stronie, ale działa na nowej pustej stronie (znaczy tylko z buttonami).

0

Ready state zwraca 1 wpisz w Google jakie maga być powody braku połączenia

0

@krancki: Dzięki, udało mi się, przerobiłem trochę kod:

 function loadDoc( button) {

  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
	if (this.readyState == 4) {
		 document.getElementById("p_test").innerHTML = "readystate = 4";
        if (this.status == 200 || this.status == 304) {
		
		
     //document.getElementById("napis").innerHTML = this.responseText;
	 if(button.innerHTML=="✔"){button.innerHTML="✘";}
	 else{button.innerHTML="✔";}
    }}
  };
  xhttp.open("GET", "php/button.php?id="+button.id+"&state="+button.innerHTML, true);
  xhttp.send();


}

Działa, ale jeszcze nie wiem czy kod php się wykonuje, ten plik button.php jak to sprawdzić? echo nic nie zmienia.

plik button.php

<?php
$id = $_GET["id"];
$state = $_GET["state"];
if($state == "✘"){
	$sql="UPDATE test SET State='ON' WHERE ID=$id";
	echo $sql;
}
else{
	$sql="UPDATE test SET State='OFF' WHERE ID=$id";	
	echo $sql;
}
	

echo $sql;

Nic nie muszę wyświetlać w tym pliku chciałbym jedynie wiedzieć, czy działa. Jeszcze tylko żeby ten button.php działa i skończone

0

Jeżeli zrobisz echo "codscdscs" to dostajesz wszystko do this.responseText;
//document.getElementById("napis").innerHTML = this.responseText;

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