Tengo una página php que tiene unos inputs text para meter nuevos elementos en la tabla y una tabla generada haciendo una consulta a la bbdd:
index.php:
Código PHP:
<?php
<label for="texto_visible">Texto visible:</label><input id="texto_visible" name="texto_visible" type="input" size="35" /><br/>
<label for="url">Url:</label><input id="url" name="url" type="input" size="60" /><br/>
<label for="orden">Orden:</label><input id="orden" name="orden" type="input" size="1" />
<input id="anadir" name="anadir" type="submit" value="Añadir" />
<table class="tabla">
<thead>
<tr>
<td>Texto visible</td>
<td>Url</td>
<td>Orden</td>
</tr>
</thead>
<tbody id="table_body">
<?php require_once("connection.php");
$db_connection = new connection();
$db_connection->query("select *
from menu
order by orden asc");
$dataset = $db_connection->result();
while($row = mysql_fetch_array($dataset))
{
$id = $row[0];
$texto_visible = $row[1];
$url = $row[2];
$orden = $row[3];
?>
<tr id="row_<?php echo $id; ?>" class="edit_tr">
<td>
<span id="first_<?php echo $id; ?>" class="text"><?php echo $texto_visible; ?></span>
<input type="textarea" value="<?php echo $texto_visible; ?>" class="editbox" id="first_input_<?php echo $id; ?>" ></input>
</td>
<td>
<span id="second_<?php echo $id; ?>" class="text"><?php echo $url; ?></span>
<input type="text" value="<?php echo $url; ?>" class="editbox" id="second_input_<?php echo $id; ?>"></input>
</td>
<td class="edit_td short">
<span id="last_<?php echo $id; ?>" class="text"><?php echo $orden; ?></span>
<input type="text" value="<?php echo $orden; ?>" class="editbox" id="last_input_<?php echo $id; ?>"></input>
</td>
<td id="edit_<?php echo $id; ?>" class="edit_button">
<img src="edit.png" title="Editar" alt="Editar"></img>
</td>
<td id="delete_<?php echo $id; ?>" class="delete_button">
<img src="delete.png" title="Borrar" alt="Borrar"></img>
</td>
<td id="accept_<?php echo $id; ?>" class="accept_button">
<img src="accept.png" title="Aceptar" alt="Aceptar"></img>
</td>
<td id="cancel_<?php echo $id; ?>" class="cancel_button">
<img src="cancel.png" title="Cancelar" alt="Cancelar"></img>
</td>
</tr>
<?php
}
?>
</tbody>
<tfoot>
<tr >
<td id="<?php echo $id; ?>" class="add_button">
<img src="insert.png" title="Añadir" alt="Añadir"></img>
</td>
</tr>
</tfoot>
</table>
?> index_events.js
Código:
Y por último el fichero insert.php que tiene:$(document).ready(function()
{
// Los "botones" para editar filas
$('.edit_button').click(function()
{
var id = $(this).attr('id');
var number = id.split('_')[1];
$('#first_' + number).hide();
$('#second_' + number).hide();
$('#last_' + number).hide();
$('#first_input_' + number).show();
$('#second_input_' + number).show();
$('#last_input_' + number).show();
$('#cancel_' + number).show();
$('#accept_' + number).show();
$('#edit_' + number).hide();
$('#delete_' + number).hide();
});
// Botóon para añadir una fila a la tabla
$('#anadir').click(function()
{
var texto_visible = $('#texto_visible').val();
var url = $('#url').val();
var orden = $('#orden').val();
var dataString = 'texto_visible=' + texto_visible + '&url=' + url + '&orden=' + orden;
$.ajax({
type: 'POST',
url: 'insert.php',
data: dataString,
cache: false,
success: function(html)
{
$('#table_body').append(html);
},
error: function(jqXHR, textStatus, errorThrown)
{
alert(textStatus)
alert(errorThrown);
}
});
});
});
Código PHP:
<?php require_once("connection.php");
if (isset($_POST['texto_visible']) && isset($_POST['url']) && isset($_POST['orden']))
{
$texto_visible = mysql_escape_String($_POST['texto_visible']);
$url = mysql_escape_String($_POST['url']);
$orden = mysql_escape_String($_POST['orden']);
$db_connection = new connection();
$query = "select max(id) from menu";
$db_connection->query($query);
$dataset_id = $db_connection->result();
$row = mysql_fetch_row($dataset_id);
$id = $row[0] + 1;
$query = "insert into menu (id, texto_visible, url, orden) values ($id, '$texto_visible', '$url', $orden)";
$db_connection->query($query);
if ($db_connection->error() != "")
{
echo 'Error al insertar:'.$db_connection->error();
}
else
{
?>
<tr id="row_<?php echo $id; ?>"class="edit_tr">
<td>
<span id="first_<?php echo $id; ?>" class="text"><?php echo $texto_visible; ?></span>
<input type="textarea" value="<?php echo $texto_visible; ?>" class="editbox" id="first_input_<?php echo $id; ?>" ></input>
</td>
<td>
<span id="second_<?php echo $id; ?>" class="text"><?php echo $url; ?></span>
<input type="text" value="<?php echo $url; ?>" class="editbox" id="second_input_<?php echo $id; ?>"></input>
</td>
<td>
<span id="last_<?php echo $id; ?>" class="text"><?php echo $orden; ?></span>
<input type="text" value="<?php echo $orden; ?>" class="editbox" id="last_input_<?php echo $id; ?>"></input>
</td>
<td id="edit_<?php echo $id; ?>" class="edit_button">
<img src="edit.png" title="Editar" alt="Editar"></img>
</td>
<td id="delete_<?php echo $id; ?>" class="delete_button">
<img src="delete.png" title="Borrar" alt="Borrar"></img>
</td>
<td id="accept_<?php echo $id; ?>" class="accept_button">
<img src="accept.png" title="Insertar" alt="Insertar"></img>
</td>
<td id="cancel_<?php echo $id; ?>" class="cancel_button">
<img src="cancel.png" title="Cancelar" alt="Cancelar"></img>
</td>
</tr>
<?php
}
}
?> Cuando cargo index.php, todos los botones cuya clase es "edit_button" son totalmente funcionales.
Si relleno los input text y le doy al botón "Añadir", dibuja la nueva fila mediante ajax al final de la tabla.
El problema es, que el botón para editar de esa nueva fila parece estar inactivo y no encuentro la manera de que funcione como los que ya hay "dibujados" anteriormente en index.php
¿Alguien puede decirme por qué ocurre esto o cómo se soluciona? Parece como si no pudiese reconocer cosas que han sido creadas después de la carga de la página.
Un saludo a todos
