Нажали на кнопку. Вылезло окно с полем редактирования (т.е. текстовое поле с подгруженным текстом). Есть две кнопки - Сохранить и Отмена. Жмем сохранить и результат редактирования сохраняется. Как сделать вот такую вот штуку на javascript, jquery?
<?php
require_once "conf.php";
?>
<head>
<body>
<?php
dbConnect();
$zapros=mysql_query("select * from spr_otdel") or die (mysql_error);
while ($row=mysql_fetch_array($zapros)){
echo "
<div class='panel' style='width:200px;'>
{$row['id']} {$row['name']}<div class='selo' ><a href='#' class='btn-delete'>Удалить</a> | <a href='#' class='edit'>Редактировать</a></div></div>";
}
?>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js'></script>
<script type="text/javascript">
$(document).ready(function () {
$(".panel:even").addClass("alt");
$(".panel .btn-delete").click(function () {
alert("Этот отдел будет удален");
$(this).parents(".panel").animate({
backgroundColor: "#fbc7c7"
}, "fast").animate({
opacity: "hide"
}, "slow")
return false;
});
$(".panel.edit").click(function () {
if (confirm("Хотите указать свой текст?")) {
var s = prompt("Укажите свой текст:");
alert("Вы указали такой текст: " + s);
} else {
alert("Вы отказались указывать свой текст");
}
});
});
</script>
<style type="text/css">
.panel {
background: #ffffff;
padding: 10px 20px 10px;
position: relative;
border-top: solid 1px #ccc
}
.alt {
background: #f5f4f4;
}
.selo {
font-size: 8pt;
}
</style>
</body>
</html>
Не работает этот кусок
$(".panel.edit").click(function () {
if (confirm("Хотите указать свой текст?")) {
var s = prompt("Укажите свой текст:");
alert("Вы указали такой текст: " + s);
} else {
alert("Вы отказались указывать свой текст");
}
});