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!