Lista select zmiana koloru wiersza

Question

Witam, mam tabelę TR/TD z 3 kolumnami. W jednej z nich w wierszu jest lista rozwijana SELECT.

Próbuję zrobić żeby po wybraniu z SELECT np. kolor = Czerwony zapisała mi się ta wartość do bazy ale i od razu podświetliła wiersz tabeli na wybrany kolor bez odświeżania i wyczytywania tej wartości z bazy.
 

<code>
<tr style="background-color: '.$row["column3"].'">
<td>Column1</td>
<td>Column2</td>
<td>
<form>
<select id="column3" style="width:auto;">
        <option>-Wybierz status</option>
        <option value="red">Red</option>
        <option value="green">Green</option>
        <option value="yellow">Yellow</option>
    </select>
</form>
</td>
</code>
<script>
    function edit_data(id, text, column_name)  //Problem1 nie zmienia mi koloru wybranego wiersza w czasie rzeczywistym
    {  
        $.ajax({  
            url:"edit.php",  //Problem2 nie przekazuje mi value do tej funkcji. Edit.php tam mam update sql pola
            method:"POST",  
            data:{id:id, text:text, column_name:column_name},  
            dataType:"text",  
            success:function(data){  
                $('#result').html("<div class='alert alert-success'>"+data+"</div>");
            }  
        });  
    }  
</script>

</code>

 

Comments

Czy wołasz gdzieś funkcję edit_data (w powyższym kodzie tego nie widać)? Powinna być wołana na change event selecta. Czy w konsoli przeglądarki są jakieś błędy? Czy ten ajax jest w ogóle wysyłany - jeśli tak, to czy PHP go odbiera?

---

//Problem1 nie zmienia mi koloru wybranego wiersza w czasie rzeczywistym

bo ajax jest asynchroniczny?  

---

@maciej1234, Ten kawałek kodu javascript co pokazałeś

    function edit_data(id, text, column_name)  //Problem1 nie zmienia mi koloru wybranego wiersza w czasie rzeczywistym
    {  
        $.ajax({  
            url:"edit.php",  //Problem2 nie przekazuje mi value do tej funkcji. Edit.php tam mam update sql pola
            method:"POST",  
            data:{id:id, text:text, column_name:column_name},  
            dataType:"text",  
            success:function(data){  
                $('#result').html("<div class='alert alert-success'>"+data+"</div>");
            }  
        });  
    } 

w żaden sposób nie odwołuje się do elementu wiersza tabeli, więc nie może wpłynąć na jego kolor (nawet w czasie rzeczywistym).

Nie zaszkodzi dodać obsługi błędów do Twojego ajax-a.

    function edit_data(id, text, column_name)  //Problem1 nie zmienia mi koloru wybranego wiersza w czasie rzeczywistym
    {  
        $.ajax({  
            url:"edit.php",  //Problem2 nie przekazuje mi value do tej funkcji. Edit.php tam mam update sql pola
            method:"POST",  
            data:{id:id, text:text, column_name:column_name},  
            dataType:"text",  
            success: function(data) {  
                $('#result').html("<div class='alert alert-success'>"+data+"</div>");
            },
            error: function(xhr) {
                console.log("Wystąpił błąd: " + xhr.status + " " + xhr.statusText);
            } 
        });  
    } 

 

Answer 1

Podszedł bym inaczej do tematu. Zmiana koloru tabeli powinna być niezależna od wysyłania danych, więc ustawił bym kolor tabeli na wybrany select i dopiero wysłał dane do bazy i ustawił status wysyłania na zakończone powodzeniem lub nie.

<table>
    <thead>
        <tr>
            <th colspan="2">Kolorowanie kolumn</th>
        </tr>
    </thead>
    <tbody>
        <tr class="choiceBgColor">
            <td>kolumna 1</td>
            <td>kolumna 2</td>
        </tr>
        <tr>
          <td>
          <form>
          <select id="column3">
                  <option>-Wybierz status</option>
                  <option value="red">Red</option>
                  <option value="green">Green</option>
                  <option value="yellow">Yellow</option>
              </select>
          </form>
          </td>
        </tr>
    </tbody>
</table>
<div>Wybrałeś kolor: <span class="result"></span></div>
<div class="sendInfo"></div>

const sendData = (info) => {
  const data = { id: "id", text: "text", column_name: "column_name" };

  fetch("edit.php", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(data),
  })
    .then((response) => response.json())
    .then((data) => {
      console.log("Success:", data);
      info.textContent = "Dane zostały poprawnie wysłane";
    })
    .catch((error) => {
      console.error("Error:", error);
      info.textContent = "Dane nie zostały poprawnie wysłane";
    });
};

const selectElement = document.querySelector("select");
const tr = document.querySelector(".choiceBgColor");
selectElement.addEventListener("change", (event) => {
  const result = document.querySelector(".result");
  const sendInfo = document.querySelector(".sendInfo");
  tr.style.backgroundColor = event.target.value;
  result.textContent = event.target.value;
  result.style.color = event.target.value;
  sendData(sendInfo);
});

Brakuje zabezpieczenia przed wybraniem pierwszej opcji '-Wybierz status' w select