Rowan » javascript

Saving the unsaved with a little Javascript

Rowan — Sun, 07 Sep 2008 16:08:49 +0000

Scenario: you make a nice HTML form for some purpose. A user comes along and spends some time filling it in… and then clicks a link on the page and loses everything they wrote. User never comes back to your site.

What you need is a little bit of Javascript to check for unsaved changes and warn the user before they leave the page if they are going to lose their work. Gutuma uses something like the following:

var is_post_back = false;
 
window.onbeforeunload = function (ev)
{
  var html = document.send_form.msg_html.value;
  var subject = document.send_form.msg_subject.value;
 
  if (!is_post_back &amp;&amp; (html != "" || subject != ""))
    return "Your message will be lost if you leave this page.";
}
 
function cancel_unsaved_warning()
{
  is_post_back = true;
}

The cancel function is called in the onclick events of any buttons on the page which do a POST back to the page, and thus won’t lose the user’s work. This is the best way I think to cancel the warning message as setting window.onbeforeunload = null doesn’t work in IE6, and returning anything from the onbeforeunload handler results in a warning message (even null or false), so you have to use some logic to avoid a return statement altogether. Weird but it works.

UPDATE 11/09/08: I’ve just discovered that IE treats javascript: hrefs as navigations away from the page and fires the onbeforeunload event. So you can’t call a javscript function like

Link

without seeing the above warning message about leaving the page. But you can get around this by using the onclick attribute:

Link

AJAX across domains

Rowan — Sat, 06 Sep 2008 19:56:42 +0000

Another problem I ran into in the course of my recent development of a PHP newsletter tool (Gutuma), was the restriction on AJAX requests to the same domain as the host page. I’ve developed some AJAX gadgets which can be placed on a user’s site and will send subscription requests to the newsletter tool… which might be hosted on a different domain.

If you’ve come across an “Access to restricted URI denied” error then you’re probably having the same problem. The solution is to use a proxy on the domain where the AJAX controls are hosted. This proxy receives the HTTP requests from the AJAX controls and can forward them on to the other domain.

For an example of how to do this, you can check out guproxy.php which is my simple single file PHP script for forwarding AJAX requests (from the SACK AJAX library) to the AJAX interface of Gutuma. As a security precaution it limits forwarded requests based on the destination url, and the filters the POST variables to those used by Gutuma. Other solutions I’ve seen don’t do this and thus leave your proxy script open to abuse.

Server-side Javascript merging

Rowan — Fri, 05 Sep 2008 11:53:22 +0000

Recently I’ve been working on PHP mailing list tool, and I wanted to make a simple Javascript API so that users can place dynamically generated gadgets onto their own pages. I wanted one JS file that could be included on a page, but as I was using a 3rd party AJAX Javascript library, this also had to be included. Unfortunately Javascript has no concept of an include or import statement. So my solution was to use some PHP to merge them on the server:

 header('Content-Type: application/x-javascript'); ?>
/**
 * This file is a server-side merge of first.js and second.js
 *
 * ------------------------------ first.js -------------------------------
 */
 
 echo file_get_contents('first.js'); ?>
 
/**
 * ---------------------------- second.php ----------------------------
 */
 
 echo file_get_contents('second.js'); ?>

This simple approach could be used where you’ve got a lot of JS files and you want to speed up access times.