Today's mission, at work, was to implement some AJAX. I had this huge form that needed to be saved but not reload the page. AJAX should have handled that. Unfortunately, I don't know how to POST data with AJAX. After a while of browsing Google, I realized that AJAX POSTs were almost the same as AJAX GETs. You send the info via a string. Worse, however, is that PHP won't handle the the POSTed with $_POST or $_GET or anything like that.
I guess this wouldn't be bad if there wasn't so much data to be posting. Unfortunately, I would be posting this huge dynamically generated form. There was way too much data and way too little time to waste trying to code some AJAX. I was getting frustrated and asked Google what I should do. After a while, I came upon a few forum discussion somewhere that were really helpful.
Usually, when you submit a form, it will call the script and load it into the current browser window. Which is something I'm trying to avoid. Something I didn't know was that forms accept the target attribute. It works like a regular link, so if you wanted to have the submitted form load in a new window, you could do:
<form method="POST" action="script.php" target="_blank"></form>
As you may or may not know, the target tag can be used to target a frame when dealing with frame sets. Or iFrames. And iFrames can be manipulated by CSS. In fact, you can make them invisible. So, basically you're submitting a form to an invisible iFrame which reloads the iFrame and not the whole page. It's like magic:
<iframe name="submitFrame" src="" style="display: none"></iframe>
<form method="POST action="script.php" target="submitFrame"></form>
The only downfall is that you can't really any info back from the script. You can't have the script return an XML file or anything like that. So, it's pretty much only good for saving or deleting or something like that. Which is great for what I needed it to do.
I was dealing with a huge form, though. It might take a while to process, looping over quite a few records. Updating, Selecting, Manipulating. That sort of thing. It might be nice if I could update the user on the progress or at least tell them when it finished.
The best way I could think of was to not make the iFrame completely invisible. Just make it small enough. Or at least hide it until I needed to call it. The form processing script could echo "I'm finished" at the end and that would be visible to the user. In the end I had something like the following:
form.html:
<iframe name="submitframe" src="" style="width: 5em; height: 1em;">
<form name="someForm" method="POST" action="script.php" target="submitframe">
<input /> <input /> <input type="submit" />
</form>
script.php
<?php
$arrayOfStuff = $_POST["stuff"];
?>
<span id="status"></span>
<script type="text/javascript">
<?
for($k = 0; $k < count($arrayOfStuff); $k++)
{
DoSomeStuff();
?>
document.getElementById("status").innerHTML="<?= $k/count($arrayOfStuff) ?>%";
<?
}
?>
document.getElementById("status").innerHTML = "Done";
</script>
The form.html file contains the form and the iframe. No big surprise if you've been reading this. The iframe isn't not displayed. It's just sized so that it's not huge.
The script.php file gets an array that was posted to it. It spits out an empty span tag called "status" and starts a javascript. You put the script after the span so that it'll run as the php script runs. The span is already defined, so the javascript can use it as it goes. No need to define a function at the top and call it and all kinds of nonsense.
Then it loops over the array, doing whatever it is that you need to do. Wat each iteration, you spit out a line of javascript that changes the span to reflect the percentage that's been completed (the element you're at, divided by the total). When the loop is over, you spit out a final line that changes the span to say, "done" and close the script.
The user will see the script running in the iFrame, but the form.html page will not reload. Nice, easy and clean.
Of course, this is all super simplified so that it's easy for me to explain here. My actual code has lots of extras like alert boxes on errors: if there's an error in any iteration of the script, you could print out an 'alert("errormessage")' which will display a popup.
It's not a new idea, but I just discovered it and got super excited. It worked great. Did just what I wanted. Saved me a lot of time and code. I love it.
Until next time,
~~Ben
Wisdom Archive
- August 2008 (2)
- July 2008 (2)
- June 2008 (3)
- May 2008 (3)
- April 2008 (4)
- March 2008 (7)
- February 2008 (6)
- January 2008 (1)
- December 2007 (3)
- November 2007 (9)
- October 2007 (26)
- August 2007 (1)
- June 2007 (1)
- May 2007 (1)
- March 2007 (1)
- February 2007 (2)
- December 2006 (4)
- November 2006 (4)
- October 2006 (5)
- September 2006 (2)
- August 2006 (1)
Categories
- poonheads (22)
- music (17)
- comic (16)
- site news (12)
- coding (11)
- Classic Wisdom (10)
- video (10)
- I Love Music (9)
- javascript (9)
- photo (9)
- rant (8)
- tutorial (8)
- web design (8)
- hardware (7)
- hobby (7)
- mustaches (7)
- gear (6)
- horrifying (6)
- story time (6)
- earworm (5)
- food (5)
- art (4)
- software (4)
- Coding for Complete Noobs (3)
- movie (3)
- Captain Numbskull (2)
- Everyday Wisdom (2)
- beverage (2)
- knives (2)
- review (2)
- toys (1)
Saturday, October 27, 2007
AJAX ... Sorta
Labels:
coding,
javascript,
tutorial,
web design