I have a table with customer info that is pulled from a database. In the last column of this table, I have an edit button that pulls up a popup window with text fields that have the database values as placeholders. I would like the user to be able to change the values in the text fields, then save these new values to the database.
I used the following jQuery function to call forth the popup window:
<script>
$('#mypopup').dialog({
autoOpen: false,
modal: 'true',
minHeight: '300px',
minWidth: '300px',
buttons: {
'Save Changes': function(){
$.ajax({
url: 'ext/to/my/file.php',
type: 'POST',
data: $(this).find('form').serialize(),
success: function(data){
//some logic to show that the data was updated
//then close the window
$(this).dialog('close');
}
});
},
'Discard & Exit' : function(){
$(this).dialog('close');
}
}
});
$('.edit').click(function(e){
e.preventDefault();
$.ajax({
url: 'ext/to/my/file.php',
type: 'GET',
data: "id="+$(this).parent().next('td').text(), //send some unique piece of data like the ID to retrieve the corresponding user information
success: function(data){
//construct the data however, update the HTML of the popup div
$('#mypopup').html(data);
$('#mypopup').dialog('open');
}
});
});
</script>
This is my first post, so I'm not really sure how much more specific I need to get. The php file that is being called is just basically a form with the proper database info displayed. Just let me know if any additional info is required! Thanks in advance!
You should just edit the 'Save Changes' function. Right where it says 'ext/to/my/file.php' you should put the php file that will be saving the data to the database. Has it is right now, the php function will receive an serialize object which contain all the edit informations. From there, just save it to the database. Hope it helps!