I want to edit my database table without refreshing the page and edit all columns. For some reason seems my script it's not working proper. Popup works, select from database works but nothing happens when I press on submit, it doesn't go to edit.php page I think.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js'></script>
<link rel='stylesheet' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css' />
<script type='text/javascript'>
$(document).ready(function() {
//Create dialog
$edit_dialog = $("#edit_dialog").dialog({
autoOpen:false,
title:"Edit Book",
modal:true,
buttons:[
{text: "Submit", click: function() { $('form',$(this)).submit(); }},
{text: "Cancel", click: function() { $(this).dialog("close"); }},
]
});
//Submit action for dialog form
$("#edit_dialog form").submit(function() {
var form = $(this);
//post form data to form's action attribute
$.post($(this).attr('action'), $(this).serialize(),function(data) {
//get DOM element of updated book
var book = $('#book_'+data.id);
//update title
$('.title',book).html(data.title);
//update genre
$('.genre',book).html(data.genre);
//update description
$('.description',book).html(data.description);
//close the dialog
$("#edit_dialog").dialog('close');
},'json');
//stop default form submit action
return false;
});
//when the edit link is clicked
function edit_link_action() {
//get closest book div
var book = $(this).closest('.book');
//get id from div
var id = book.attr('id').split('_');
idid = id[id.length-1];
//set id in form
$('#edit_dialog input[name="id"]').val(id);
//set current title in form
$('#edit_dialog input[name="title"]').val($('.title',book).html());
//set current genre in form
$('#edit_dialog select[name="genre"]').val($('.genre',book).html());
//set current description in form
$('#edit_dialog textarea[name="description"]').val($('.description',book).html());
//open dialog
$edit_dialog.dialog('open');
//stop default link action
return false;
}
//attach action to edit links
$(".edit").click(edit_link_action);
});
</script>
</head>
<body>
<div class='books'>
<?php
//connect to database
mysql_connect('localhost', 'mysql_user', 'mysql_password');
mysql_select_db('dbname');
//get all books
$query = "SELECT * FROM books";
$result = mysql_query($query) or die("Error selecting books");
//display books
while($row = mysql_fetch_assoc($result)) {
?>
<div class='book' id='book_<?php echo $row['id']; ?>'>
<a class='edit' href='#'>edit</a>
<h3 class='title'><?php echo $row['title']; ?></h3>
<p><em class='genre'><?php echo $row['genre']; ?></em></p>
<p class='description'><?php echo $row['description']; ?></p>
</div>
<?php
}
?>
</div>
<div id='edit_dialog'>
<form action='edit.php' method='post'>
<input type='hidden' name='id' />
Title:
<input type='text' name='title' /><br />
Genre:
<select name='genre'>
<option value='fantasy'>Fantasy</option>
<option value='mystery'>Mystery</option>
<option value='nonfiction'>Nonfiction</option>
</select><br />
Description:
<textarea name='description' cols='30' rows='3'></textarea>
</form>
</div>
</body>
</html>
