Skip to content

Rough Book

random musings

Menu
  • About Me
  • Contact
  • Projects
    • bAdkOde
    • CherryBlossom
    • FXCalendar
    • Sulekha
Menu

Preview Button and no more Iframes

Posted on June 23, 2005September 9, 2009 by vivin

I have added a "Preview Comments" button to the comment submission form. So now, you're able to preview your comments before submitting them. The preview will show you your comments exactly as they will appear (after they have been submitted).

The other big thing is the removal of iframes. I thought iframes were really freaking awesome when I first found out about them. And they are. There are a bunch of cool things you can do with them. I always used iframes to update the contents of a page without refreshing the entire page itself. This was accomplished by submitting to a hidden iframe. The server-side script in the iframe would generate Javascript, which would then manipulate the DOM on the parent page. Pretty nifty. I learnt that when I was working at College of Business at ASU. It was something that the bunch of us (Chris, Kelly, Gravey, Cameron, and I) came up with in the Fall of 2001. We thought it was pretty novel.

I used iframes extensively in the last incarnation of my website. When that crashed and burned, I needed to make a new website. So I went ahead and used iframes on this one too. Somewhere along the way, I was possessed by the urge to make this website XHTML compatible. But alas, iframes didn't pass the compatibility test. I then tried to find a replacement for iframes. The object tag seemed to work, except there was no way to make it reload. Then I tried XMLHttpRequest. This also seemed promising, but I had to make a bunch of changes to the Javascript. I didn't feel like doing that. I also then realized that I wanted content to show up on search engines, and having an iframe wasn't going to do that. So I then decided to re-design the backend completely. Instead of using an iframe, I would just dump content directly into the page. Of course, now it wouldn't load the content seamlessly when you clicked on a date, but what the heck. I still had one iframe though - the one that populates the calendar. I figured there simply wasn't any other way to do it, so I left it as it is.

It stayed that way until Marc left me a comment talking about the need for the functionality to preview comments. I was going to use the iframe, before I realized that the comments could have line-breaks, and all other kinds of nasty stuff that could mess up Javascript. I could have accessed the HTML from the iframe, and dumped it into the page, but the first thing that came to my mind was the XMLHttpRequest object. I used it to replace the iframe. I think it actually works a whole lot better, and is definitely more flexible. Even though the object is used for XML, you can get HTML through it as well through the responseText attribute. This way, you can simulate the action of submitting to a form, and then access the data generated by the server-side script. You can then do whatever you want with the data. This is definitely much more flexible than having to deal with Javascript from the action iframe.

In the course of all this, I wrote some (I think) pretty nifty code. I wrote two functions; getXMLHttpRequestObject creates an XMLHttpRequest object and returns it. I needed this function because IE and Firefox create the object differently. The other function, sendXMLHttpRequest sends the request to the server. The cool part is that I also send in a custom handler. When sendXMLHttpRequest finishes receiving the data from the server, it calls the custom handler with that data. Maybe not all that fancy, but I think it's cool :). Here are what the functions look like:

getXMLHttpRequestObject:

[sourcecode language="javascript"]
function getXMLHttpRequestObject()
{
if(Firefox)
{
return new XMLHttpRequest();
}

else
{
return new ActiveXObject('Microsoft.XMLHTTP');
}
}
[/sourcecode]

sendXMLHttpRequest:

[sourcecode language="javascript"]
function sendXMLHttpRequest(Request, uri, POSTdata, responseHandler)
{
Request.open("POST", uri, true);
Request.setRequestHeader(
'Content-Type',
'application/x-www-form-urlencoded'
);

Request.onreadystatechange = function()
{
if(Request.readyState == 4)
{
if(Request.status == 200)
{
responseHandler(Request.responseText);
}

else
{
alert("There was a problem retrieving data: " + Request.statusText);
}
}
}

Request.send(POSTdata);
}
[/sourcecode]

A sample call is as follows:

[sourcecode language="javascript"]
function doSomething(param1, param2)
{
var Request = getXMLHttpRequestObject();
var FormData = "param1=" + param1 + "¶m2=" + param2;
sendXMLHttpRequest(Request, "doit.php", FormData, myResponseTextHandler);
}

function myResponseTextHandler(text)
{
//do something with text
}
[/sourcecode]

Neat huh? Javascript is a whole lot more powerful than some people think. Ok, enough geek talk!

References:

  • Use the XMLHttpRequestObject to Post Data
  • AJAX: XMLHttpRequest and POST to PHP
  • Guide to Using XMLHttpRequest (with Baby Steps)
  • Dynamic HTML and XML: The XMLHttpRequest Object

3 thoughts on “Preview Button and no more Iframes”

  1. test says:
    June 23, 2005 at 7:42 pm

    test

    Reply
  2. Anonymous says:
    June 23, 2005 at 7:42 pm

    Heh! Go Marc^H^H^H^H XMLHttpRequest!

    Reply
  3. anonymous says:
    June 25, 2005 at 4:58 pm

    Cool stuff!!

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

Archives

  • February 2023
  • April 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • September 2019
  • August 2019
  • July 2019
  • June 2019
  • May 2019
  • March 2019
  • February 2019
  • January 2019
  • December 2018
  • November 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • June 2017
  • March 2017
  • November 2016
  • August 2016
  • July 2016
  • June 2016
  • February 2016
  • August 2015
  • July 2014
  • June 2014
  • March 2014
  • December 2013
  • November 2013
  • September 2013
  • July 2013
  • June 2013
  • March 2013
  • February 2013
  • January 2013
  • October 2012
  • July 2012
  • June 2012
  • January 2012
  • December 2011
  • November 2011
  • October 2011
  • September 2011
  • July 2011
  • June 2011
  • May 2011
  • February 2011
  • January 2011
  • December 2010
  • November 2010
  • October 2010
  • September 2010
  • July 2010
  • June 2010
  • May 2010
  • April 2010
  • March 2010
  • January 2010
  • December 2009
  • November 2009
  • October 2009
  • September 2009
  • August 2009
  • July 2009
  • May 2009
  • April 2009
  • March 2009
  • February 2009
  • January 2009
  • December 2008
  • November 2008
  • October 2008
  • August 2008
  • March 2008
  • February 2008
  • November 2007
  • July 2007
  • June 2007
  • May 2007
  • March 2007
  • December 2006
  • October 2006
  • September 2006
  • August 2006
  • June 2006
  • April 2006
  • March 2006
  • January 2006
  • December 2005
  • November 2005
  • October 2005
  • September 2005
  • August 2005
  • July 2005
  • June 2005
  • May 2005
  • April 2005
  • February 2005
  • October 2004
  • September 2004
  • August 2004
  • July 2004
  • June 2004
  • May 2004
  • April 2004
  • March 2004
  • February 2004
  • January 2004
  • December 2003
  • November 2003
  • October 2003
  • September 2003
  • July 2003
  • June 2003
  • May 2003
  • March 2003
  • February 2003
  • January 2003
  • December 2002
  • November 2002
  • October 2002
  • September 2002
  • August 2002
  • July 2002
  • June 2002
  • May 2002
  • April 2002
  • February 2002
  • September 2001
  • August 2001
  • April 2001
  • March 2001
  • February 2001
  • January 2001
  • December 2000
  • November 2000
  • October 2000
  • August 2000
  • July 2000
  • June 2000
  • May 2000
  • March 2000
  • January 2000
  • December 1999
  • November 1999
  • October 1999
  • September 1999
©2023 Rough Book | Built using WordPress and Responsive Blogily theme by Superb
All original content on these pages is fingerprinted and certified by Digiprove