I've been playing around with jQuery's AJAX capabilities lately in some PHP reports I have to do for work. I wanted to have pop-up forms to prompt the user for information and update the database without using a real pop-up window and without needing to submit the page. I found the Boxy jQuery Plug-in and found it to suit my needs nicely.
While I can't post my exact work code, I wanted to post some notes about how I did it for future reference and for others who may be just picking it up themselves.
Installation
Installation of Boxy was simple; all I had to do was copy three folders from their zipfile into my html directory.
Implementation
My page already included a jquery.js script since I was already using jQuery to do my database submits. I had to add these two lines to be able to use boxy:
<script type='text/javascript' src='javascripts/jquery.boxy.js'></script>
<link rel="stylesheet" href="stylesheets/boxy.css" type="text/css" />
I also put my "images" directory in a different place than the css expected, so I had to edit that.
For work, I had a table displaying data which was stored in the database. In one column of cells were dropdowns with the value from the database selected. I needed the user to be able to change the value and have it save to the database. I also wanted to prompt the user to enter a comment for why they were modifying the dropdown. I started with a call to a javascript function in my onchange portion of my select.
Here is my javascript code (with proprietary information modified):
function prompt_user(rowid) {
new Boxy("
<h2>Please enter a comment for the change:</h2>
<center>
<input type=\"text\" id=\"comments\"
onchange=\"update_db("+rowid+");
Boxy.get(this).hide();\"/>
</center>",
{modal:true}
);
}
I use rowid since each row in the table refers to a different row in the database and I need to be able to pass that on to the next function that will do the db update. The
onchange will activate when the user either pressed enter, tab, or clicks away from the textbox. It will
not activate if they just change the value of the textbox without doing one of those things (that would be an onkeypress).
The
modal:true option makes the rest of the screen inactive until the user supplies the prompted information.
For my
update_db function, I use jQuery to help me out. Now this isn't the best way, passing the whole db statement from here but for me it was easier to write and debug for now and it will be fixed in the final version.
function update_db (rowid) {
var comments=document.getElementById('comments').value;
$.post("submit_sql.php", {
sql_query: "update my_table set
choice='" + document.getElementById('choice_select_'+rowid).value + "',
comments='" + comments + "'
where id="+rowid},
function(error) {
if (error != '') {
Boxy.alert(error, null, {modal: true});
} else {
document.getElementById("comments_"+rowid).innerHTML=comments;
new Boxy("<h2>Success</h2>", {
afterShow: function() {
var self = this;
setTimeout(function() { self.hide(); }, 1000);
},
modal: true,
closeable: false
});
}
}
);
}
Here, I am sending the SQL query as a parameter to a separate php script. In the callback, I create a Boxy alert if there's a problem. It's a modal again, so the user cannot ignore it and has to close it before doing anything else. If there's no error, then in the callback I make sure the page updates with the comments and I alert "Success", but I have this Boxy auto-close (actually I just hide it) after 1 second (1000 milliseconds).
For reference, here is some sample html code for submit_sql.php:
<?
include('dbinfo.inc');
$conn = pg_connect( 'host=' . $dbhost
. ' dbname=' . $dbname
. ' user=' . $dbuser
. ' password=' . $dbpass )
or die ("Can't connect to db");
$queryString = $_POST['sql_query'];
$result = pg_query( $conn, $queryString );
#echo pg_affected_rows($result);
if ( !$result ) {
echo(pg_last_error());
}
?>
