Witam!
Mam problem z dodaniem odświeżania do shoutboxa. Wszystko działa dobrze skrypt pobiera dane i je wyświetla. Gdy dodamy posta, po dodaniu wywoływana jest fukcja updateShoutbox();, pobiera dane i wyswietla. Chciałem dodać przycisk [Odśwież] wywoływałem to tak:
<a href="#odswiezWpisy" id="odswiez">[Odśwież]
</a>
$(document).ready(function() {
$('#odswiez').click(function() {
updateShoutbox();
});
});
a tutaj kod PHP i Javascript, oraz index.html (znajduja sie w jednym katalogu shoutbox i index.html jest includowany do pliku php top.php a ten do plikow takich jak index.php, galeria.php):
<!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" dir="ltr"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" href="../styl/s6.css" type="text/css" media="screen" /> <script type="text/javascript" src="../js/shoutbox.js"></script> <div class="shoutbox_main"> <div id="panel_shoutbox"> <div id="shoutbox" style="display: none;"> <form method="post" id="form"> <td><input class="text user" id="nick" type="text" MAXLENGTH="15" /></td> <td><input class="text" id="message" type="text" MAXLENGTH="255" /></td> <td><input id="send" type="submit" value="Wyraz To!" /> </td>
<a href="#odswiezWpisy" id="odswiez">[Odśwież]
</a> </div><div id="shoutbox_napis"><img src="../shoutbox/shoutbox.png" /></div> <div id="shoutbox_toggle"> <a href="#shoutbox_otworz" id="sh_open" class="open"></a> <a href="#shoutbox_zamknij" id="sh_close" style="display: none;" class="close"></a>
$(document).ready(function(){
var inputUser = $("#nick");
var inputMessage = $("#message");
var loading = $("#loading");
var messageList = $(".content > ul");
function updateShoutbox(){
messageList.hide();
loading.fadeIn();
$.ajax({
type: "POST", url: "shoutbox.php", cache: false, data: "action=update",
complete: function(data){
loading.fadeOut();
messageList.html(data.responseText);
messageList.fadeIn(2000);
}
});
}
function checkForm(){
if(inputUser.attr("value") && inputMessage.attr("value"))
return true;
else
return false;
}
updateShoutbox();
$("#form").submit(function(){
if(checkForm()){
var nick = inputUser.attr("value");
var message = inputMessage.attr("value");
$("#send").attr({ disabled:true, value:"Wysylanie..." });
$("#send").blur();
$.ajax({
type: "POST", url: "shoutbox.php", cache: false, data: "action=insert&nick=" + nick + "&message=" + message,
complete: function(data){
messageList.html(data.responseText);
updateShoutbox();
$("#send").attr({ disabled:false, value:"Wyraz To!" });
}
});
}
else alert("Wypelnij wszystkie pola!");
return false;
});
});
$(document).ready(function() {
$('#odswiez').click(function() {
updateShoutbox();
});
});
<?php
require_once "../engine.php";
if(!$_POST['action']){
header ("Location: index.php"); } else {
switch($_POST['action']){
case "update":
$res = dbquery("SELECT date, user, message FROM shoutbox ORDER BY date DESC LIMIT 10");
$result .= "<div class='contentin'><span class='shoutbox_nick'><b>".$row['user']." </b></span> <span class=\"date\"> ".$row['date']."</span><br /><span class=\"message\">".$row['message']."</span> </div>";
}
echo $result."<script type=\"text/javascript\"> $(document).ready(function(){
$('div.contentin:even').css('background', '#780000');
});
</script>";
break;
case "insert":
echo dbquery
("INSERT INTO shoutbox(user, message) VALUES('$user', '$message')"); break;
}
}
?>
ale po kliknieciu nic sie nie dzieje
na wstępie mówie że chciałem edytować post @up, ale się rozwaliło kodowanie więc piszę pod nim.
Sam rozwiązałem problem
$(document).ready(function() {
$('#odswiez').click(function() {
var loading = $("#loading");
var messageList = $(".content > ul");
//just for the fade effect
messageList.hide();
loading.fadeIn();
//send the post to shoutbox.php
$.ajax({
type: "POST", url: "shoutbox.php", data: "action=update",
complete: function(data){
loading.fadeOut();
messageList.html(data.responseText);
messageList.fadeIn(2000);
}
});
});
});
co mnie zdziwiło pomogło ponowne napisanie tego samego(jest 2 razy w dokumencie) z taką różnicą że bez
function updateShoutbox(){
....
}
i bez wywoływania jej
updateShputbox();
[jQuery] odswiezanie shoutboxa
