Nie wiem do końca w czym tkwił problem (domyślam się, że mogłeś coś nie do końca dobrze zapisać) ale udało mi się go naprawić. Tutaj jest twój, przerobiony kod:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
</head>
<body>
<div class="czat">
<h2>Shoutbox:</h2>
<table class="table table-hover">
<thead>
<form>
<td class="wiadomosc" colspan="2">
<input type="text" name="wiadomosc" class="form-control" id="wiadomosc">
</td>
<td class="przycisk">
<input type="button" value="Wylij" id="submit-btn" class="btn btn-primary">
</td>
</form>
</thead>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
function wysylanie() {
console.log("To działa!");
}
$('#submit-btn').click(wysylanie);
</script>
<body>
</html>
Mam jeszcze kilka uwag, do których zastosowanie się na pewno pomorze tobie w dalszej nauce programowania, jak i osobom czytającym twój kod.
- Nie wiem czy w swoim pliku HTML zapisałeś <!DOCTYPE html> i sekcje head, więc podałem prosty przykład w mojej odpowiedzi. Jeżeli nie do końca rozumiesz dlaczego powinna się ona tam znaleźć, odsyłam do tej strony - kurs html.
- Skrypty javascript najlepiej zapisać po strukturze strony, a przed zamknięciem znacznika body. Przyśpiesza to "wizualnią" prędkość ładowania strony.
- Do działania znacznej części twojego kodu niezbędna jest biblioteka jQuery. (https://jquery.com/). Jeżeli nie wczytasz jej przed załadowaniem twojego kodu js, nie ma on prawa działać.
- Rozumiem, że funkcja odczytaj ma wczytać dane z pliku php wiadomosci.php. W takim wypadku użycie metody setInterval z drugim parametrem 1 spowoduje wywołanie jej co jedną milisekundę. Owszem to da pożądany efekt, jednak odpytywanie pliku php (który zapewnie łączy się jeszcze z bazą danych) w tak krótkim odstępie czasu nie jest najlepszym pomysłem.
- Gdy jako pierwszy parametr funkcji setInterval podasz ciąg znaków (string) spowoduje to wywołanie funkcji odczytaj przez eval (eval). Znacznie lepiej zapisać tę cześć kodu
setInterval("odczytaj()", 1);
W trochę inny sposób
setInterval(odczytaj(), 1);
// lub
setInterval(function() {
$('#czat_odczytaj').load('czat/wiadomosci.php #czat_odczytaj');
}, 1);
-
jQuery.ajax (http://api.jquery.com/jquery.ajax/) jako parametr przyjmuje obiekt. Obiekty na początku nauki sprawiały trudność znacznej części programistów, jednak na tym etapie nie musisz się nimi zbytnio przejmować. Warto zapamiętać, że kolejne pola ("zmienne w obiekcie") w javascripcie zapisuje się po przecinku, i nie kończy się linii średnikiem. W tym przypadku domyślam się, że jako wartość data chciałeś podać treść wiadomości. Zapisując nazwę zmiennej w apostrofach przesyłasz sam wyraz dataString a nie wartość zmiennej o tej nazwie
$.ajax({
type: 'POST',
url: 'czat/wyslij.php',
data: dataString
});
Mam nadzieję, iż mimo późnej odpowiedzi choć trochę pomogłem. Życzę powodzenia w dalszej nauce programowania.
