Hola,estoy creando mi sistema de comentarios,y quiero que no se tenga que recargar la página para ver la segunda página de comentarios.
Estos son mis codigos:
comentarios.php
Código HTML:
<?php
include 'config.php'
?>
<?php
// maximo por pagina
$limit = 3;
// pagina pedida
$pag = $_POST["pag"];
if ($pag < 1)
{
$pag = 1;
}
$offset = ($pag-1) * $limit;
$sql = "SELECT SQL_CALC_FOUND_ROWS * FROM comentarios_com ORDER BY fecha DESC LIMIT $offset, $limit";
$sqlTotal = "SELECT FOUND_ROWS() as total";
$rs = mysql_query($sql);
$rsTotal = mysql_query($sqlTotal);
$rowTotal = mysql_fetch_assoc($rsTotal);
// Total de registros sin limit
$total = $rowTotal["total"];
?>
<?php
while ($row = mysql_fetch_assoc($rs))
{
$id = $row["id"];
$comentario = $row["comentario"];
$comentador = $row["comentador"];
$fecha = $row["fecha"];
?>
<div id="comment_section">
<ol class="comments first_level">
<li>
<div class="comment_box commentbox1">
<div class="gravatar"> <img src="images/avatar-none.png" alt="author 1" /> </div>
<div class="comment_text">
<div class="comment_author"><?php echo $comentador ?><span class="time"><?php echo $fecha ?></span></div>
<p><?php echo $comentario ?></p>
</div>
<div class="cleaner"></div>
</div>
</li>
<li></li>
</ol>
</div>
<?php
}
?>
<div class="post_section">
<form id="comentarios" name="comentarios" method="post" action="comentarios.php">
<label>
<?php
$pagina = $pag + 1;
?>
<input name="pag" type="text" id="pag" value="<?php echo $pagina ?>" />
</label>
<label>
<input name="enviar" type="submit" id="enviar" value="Enviar" />
</label>
</form>
<p> </p>
</div> comunidad.php
Código PHP:
<script language="javascript" src="jquery-1.3.min.js"></script>
<script language="javascript">
$(document).ready(function() {
// Esta primera parte crea un loader no es necesaria
$().ajaxStart(function() {
$('#loading').show();
$('#comentarios').hide();
}).ajaxStop(function() {
$('#loading').hide();
$('#comentarios').fadeIn('slow');
});
// Interceptamos el evento submit
$('#form, #comentarios, #comentarios').submit(function() {
// Enviamos el formulario usando AJAX
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data: $(this).serialize(),
// Mostramos un mensaje con la respuesta de PHP
success: function(data) {
$('#comentarios').html(data);
}
})
return false;
});
})
</script>
<script language="javascript">
$(document).ready(function() {
// Esta primera parte crea un loader no es necesaria
$().ajaxStart(function() {
$('#loading').show();
$('#result').hide();
}).ajaxStop(function() {
$('#loading').hide();
$('#result').fadeIn('slow');
});
// Interceptamos el evento submit
$('#form, #fat, #fo3').submit(function() {
// Enviamos el formulario usando AJAX
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data: $(this).serialize(),
// Mostramos un mensaje con la respuesta de PHP
success: function(data) {
$('#result').html(data);
}
})
return false;
});
})
</script>
</head>
<body>
<div id="templatemo_header_wrapper">
<div id="templatemo_header">
<div id="site_title">
<h1><a href="index.html">
<img src="images/templatemo_logo.png" alt=" VidaGame"/></a></h1>
</div>
</div> <!-- end of header -->
<div id="templatemo_menu">
<ul>
<li><a href="inicio">Inicio</a></li>
<li><a href="comunidad" class="current">Comunidad</a></li>
<li><a href="juegos">Juegos</a></li>
<li><a href="tutoriales">Tutoriales</a></li>
</ul>
</div>
</div> <!-- end of header wrapper -->
<div id="templatemo_main_wrapper">
<div id="templatemo_content_wrapper">
<div id="templatemo_content">
<div class="comment_tab">
<?php
$query = mysql_query("SELECT count(*) FROM comentarios_com") or die (mysql_error());
$resultados = mysql_result($query,0);
echo "$resultados";
?>
comentarios</div>
<div id="comentarios"><?php include 'comentarios.php' ?></div>
<div id="result"></div>
<div id="comment_form">
<h3>Deja un comentario</h3>
<form method="post" action="comentar_comunidad.php" id="fo3" name="fo3">
<div class="form_row">
<label>Nombre:</label>
<br />
<input type="text" name="name" />
</div>
<div class="form_row">
<label>Escribre el comentario:</label>
<br />
<textarea name="comment" rows="" cols=""></textarea>
</div>
<input name="Envia el comentario" type="submit" class="submit_btn" id="Envia el comentario" value="Enviar" />
</form>
</div>
El div de comentarios se actualiza y todo pero..cuando se actualiza más de 1 vez,se me carga toda la página en el div.
Veanlo ustedes mismos; http://vidagame.tk/comunidad