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

edytowanie komentarzy

VPS Starter Arubacloud
+1 głos
245 wizyt
pytanie zadane 3 września 2020 w JavaScript przez Hub ert Nowicjusz (170 p.)

Witam,
robię forum i wyświetlam kolejne komentarze z bazy przy pomocy pętli w PHP i grida w CSS. 

Poglądowo
$zap = "SELECT * FROM forum";
$ilekomentarzy = $zap->num_rows;

for ($i = 0; $i < $ilekomentarzy; $i++ ) {

$w = $zap->fetch_assoc();
$user = $w['user''];
$komentarz = $w['komentarz'];

echo '
<div class="i-.'$i'.">
<div class="user">$user</div>
<div class="komentarz">$komentarz</div>
<button>Edytuj</button>
';
</div>
}


Chcę zrobić edycję swojego komentarza dla użytkownika i mam zagwozdkę jak do tego podejść.
Chciałem użyć ajaxa, ale nwm jak to zrobić, aby przy pomocy JS po naciśnięciu przycisku włączyło mi się ładnie edytowanie gridowanego diva z komentarzem. Następnie żeby wpisać komentarz i żeby edytowało to komentarz w bazie.
Nie chce wejść w ślepą uliczkę, proszę o radę/sugestie. 

komentarz 5 września 2020 przez VBService Ekspert (251,210 p.)
edycja 6 września 2020 przez VBService

2 odpowiedzi

0 głosów
odpowiedź 4 września 2020 przez jankustosz1 Nałogowiec (35,880 p.)
No musisz zrobić formularz w html w którym edytujesz komentarz i wysłać go post'em do akcji która to obsłuży, a następnie przekieruje użytkownika na stronę główną.

Ewentualnie zamiast robić formularz możesz w javascript za pomocą funkcji fetch wysłać dane do akcji po kliknięciu przycisku, a następnie przekierować się w javascript, bo chyba nie robisz SPA. Pierwsza opcja w twoim przypadku prostsza.
komentarz 4 września 2020 przez Hub ert Nowicjusz (170 p.)
Stworzenie formularza, obsługa zapytania i reload strony to bardzo proste rozwiązanie.
Myślałem raczej o eleganckiej edycji samego pola (diva z komentarzem) i bez przekierowań.
Nie ma być to SPA, ale chce ograniczyć do minimum odwołania.
Po tym co napisałeś nasunął mi się pewien pomysł.
Spróbuje mieszanki tych dwóch rozwiązań, poeksperymentuje.
komentarz 5 września 2020 przez Hub ert Nowicjusz (170 p.)
Czytałeś moje pytanie od początku do końca? Używam AJAX.
Rozwiązałem już sprawę. Pozdrawiam. :D
komentarz 5 września 2020 przez jankustosz1 Nałogowiec (35,880 p.)
ajax jest coraz mniej potrzebny, skoro jest wbudowany fetch, jedyna przeglądarka na jakiej nie działa to stary internet explorer, jednak jeżeli już używać jakieś libki to axios jest bardzo fajny, jednocześnie bardzo łatwy w użytku oraz ma duże możliwości konfiguracji. Warto też użyć babela
0 głosów
odpowiedź 6 września 2020 przez VBService Ekspert (251,210 p.)
edycja 7 września 2020 przez VBService

Generowanie prostej listy komentarzy (poglądowo):

Poglądowo

$SESSION['logged_user_id'] = 2;
$zap = "SELECT id_comment, user_id, user_name, comment FROM forum";

if ($zap->num_rows > 0) {
    while ($w = $zap->fetch_assoc()) {
        if ($w['user_id'] == $SESSION['logged_user_id']) {
            $id_comment = " id=\"c".$w['id_comment']."\"";
            $button = "<button id=\"b".$w['id_comment']."\">Edytuj</button>"
                     ."<span id=\"m".$w['id_comment']."\"></span>";
        } else {
            $id_comment = "";
            $button = "";
        }

        echo '
        <div class="comment-wrap">
        <div class="user">'.$w['user_name'].'</div>
        <div class="comment"'. $id_comment.'>'.$w['comment'].'</div>'
        .$button.'</div>';
    }

    echo '<script src="./js/comment_edit.js"></script>';
} else {
    echo '<div class="comment-wrap">Brak komentarzy</div>';
}

comment_edit.js

const BUTTON_EDIT_MODE = "Edytuj";
const BUTTON_SAVE_MODE = "Zapisz";
let before_content = "";

const MESSAGE = {
  CLEAR: 0,
  INFO: 1,
  SUCCESS: 2,
  ERROR: 3
};

const MODE = {
  EDIT: 1,
  UPDATE: 2
};
let mode = MODE.EDIT;

const buttons_edit = document.querySelectorAll("[id^='b']");
buttons_edit.forEach((button_edit) => {
  button_edit.addEventListener('click', ({target}) => {
    let id_comment = target.id.replace('b','c');
    const comment = document.getElementById(id_comment);
    
    if (target.textContent == BUTTON_EDIT_MODE && mode != MODE.UPDATE) {
      comment.contentEditable = true;
      comment.className = "user-comment-edit-mode";
      before_content = comment.innerHTML;
      comment.focus();
    } else if (target.textContent == BUTTON_SAVE_MODE) {
      target.textContent = BUTTON_EDIT_MODE;
      const comment_html = comment.innerHTML;
      id_comment = id_comment.replace('c','');      

      mode = MODE.UPDATE;
      showMessage(id_comment, MESSAGE.INFO);
      setTimeout(updateComment, 2000, id_comment, comment_html);
    }   
  });
});

function updateComment(id_comment, comment_html) {
  const id_comment_encode = encodeURIComponent(id_comment);
  const comment_encode = encodeURIComponent(comment_html);      
  const body = `id_comment=${id_comment_encode}&comment=${comment_encode}`;
  //console.log(body);
  
  /* 
    W pliku update_user_comment.php
    if ($_SERVER["REQUEST_METHOD"] == "POST") {
      if (isset($_POST['id_comment']) && isset($_POST['comment'])) { 
        ...
        
        header("HTTP/1.1 200 OK");
        exit(0);
      }
    }
  */
  fetch("update_user_comment.php", {
    method: "post",
    body: body,
    headers: { 'Content-type': 'application/x-www-form-urlencoded' }
  })
    .then(res => {
    if (res.ok) {
      return res.text();
    } else {
      throw new Error(`${res.status} ${res.statusText}`);
    }
  })
    .then(res => {
    //showMessage(id_comment, MESSAGE.SUCCESS, res);
    showMessage(id_comment, MESSAGE.SUCCESS);
  })
    .catch(error => {
    showMessage(id_comment, MESSAGE.ERROR, error);
  });
  
  setTimeout(showMessage, 5000, id_comment, MESSAGE.CLEAR);
}

function showMessage(id, type, add_message = "") {
  const message_box = document.getElementById(`m${id}`);
  let class_name = "";
  let message = "";
  
  switch (type) {
    case MESSAGE.INFO:
        class_name = "message-info";
        message = "Zapisuje komentarz ...";
      break;
    case MESSAGE.SUCCESS:      
        class_name = "message-success";
        message = "Komentarz został zapisany.";
      break;
     case MESSAGE.ERROR:      
        class_name = "message-error";
        message = "Wystąpił błąd.";
      break;
      case MESSAGE.CLEAR:
      default:
        mode = MODE.EDIT;
  }
  
  message_box.className = class_name;
  message_box.textContent = message + " " + add_message;
}

const comments_box = document.querySelectorAll("[id^='c']");
comments_box.forEach((comment_box) => {
  comment_box.addEventListener('focusout', ({target}) => {
    const comment = document.getElementById(target.id);
    comment.contentEditable = false;
    comment.className = "user-comment";
  });  
});

comments_box.forEach((comment_box) => {
  comment_box.addEventListener('input', ({target}) => {
    const id_button = target.id.replace('c','b');
    const button_edit = document.getElementById(id_button);
    if (before_content != target.innerHTML) {
      button_edit.textContent = BUTTON_SAVE_MODE;
    } else {
      button_edit.textContent = BUTTON_EDIT_MODE;
    }    
  });
});

 CodePen 

Do edytowanych pól można dodać proste menu edycji podobne do tego wink:

 

Podobne pytania

0 głosów
1 odpowiedź 96 wizyt
pytanie zadane 9 kwietnia 2017 w PHP przez mordimer Mądrala (5,720 p.)
0 głosów
2 odpowiedzi 247 wizyt
pytanie zadane 16 listopada 2022 w HTML i CSS przez Millo Nowicjusz (150 p.)
0 głosów
1 odpowiedź 477 wizyt
pytanie zadane 27 lipca 2020 w PHP przez Samek2222 Początkujący (440 p.)

92,452 zapytań

141,262 odpowiedzi

319,079 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!

...