earth tech

The javascriptkit.com site makes some interesting points about AJAX and the implementation of the responseXML property of the XMLHttpRequest object.

"If you're running an Ajax request offline locally on your PC, a value of 0 is returned by status in most browsers regardless of the actual request status, even if it was successful. To run and test Ajax requests locally, it should overlook the status code being 200, and merely rely on a readyState value of 4. The following example takes into account the request possibly being run offline and to enable it:"

var myrequest = new ajaxRequest()
myrequest.onreadystatechange=function() {
  if ( myrequest.readyState == 4 ) { //if request has completed
    if ( myrequest.status == 200 || 
      window.location.href.indexOf("http") == -1 ) {

      /* if request was successful 
         (versus "page not found" etc) 
         or if run offline (rely on readyState of
         4 alone then) */

      // ... do something with returned data ...

  }
 }
}

From the example, it is clear that the test

window.location.href.indexOf("http") == -1

can be generally useful for other things - like finding the protocol string from the URL of the current document. In theory, at least, this should tell you what protocol was used to load the content of window.

Labels: ajax, javascript, responseXML, XMLHttpRequest

posted by pd wilson   #   15:32

This has got to be the sickist piece of Javascript ever, in the bitniverse. A True Manifestation of The Overmind. Or is that Infestation? Must use this code. http://www.thomasfrank.se/easier_than_ajax.html

Labels: ajax, javascript

posted by pd wilson   #   08:57

A really great blog post about how to do javascript includes using "asynchronous javascript" XMLHTTP requests to server-side PHP scripts.

The article shows how to do 'include_once' and 'on-demand' loading of javascript code, which can be executed by the browser to modify the current document, including by use of HTTP GET request results assigned to the DOM.

Labels: ajax, dom, javascript, php, xml

posted by pd wilson   #   06:25

Wacka-wacka DOOOO!

Today's brain teaser is AJAX + PHP + Javascript + XML + MySQL ... and there may be some others I've left out CSS, XHTML, stuff like that.

Nevertheless, we will prevail. Links to follow.^

• PHP Example - responseXML
• JavaScript and HTML DOM Reference
• XML DOM
• XML Manipulation (from the PHP Manual)

Nothing specific to the MySQL side of this, for now.

Labels: ajax, javascript, mysql, php, w3c, xml

posted by pd wilson   #   03:48

In constructing a web application with more than 2 PHP source modules, I found that it is useful to have a quick and easy way of finding a syntax error that may exist in one (or more) of a list of included modules.

Getting a List of PHP Includes

There is a function in PHP for this, which we will get back to in a moment. For right now I wanted to address some things we can do at a Bash prompt to troubleshoot why a script may not be sending any output to the browser on STDOUT.

That's a very common situation when you're working on a large application with many modules. It becomes important in those situations to be meticulous about syntax checking each change in any code before making additional changes.

I've been using the 'Lint' mechanism provided by PHP to syntax check PHP source code. It works like this: 

  $php -l <fileName>

Now, some of you might already be seeing the implications of this. Hows about: 

$for fn in \
      `grep require frmPlayerInformation_body.09.inc\
      | perl -ne '/\"([a-zA-Z0-9.]+)\"\;/ && print "$1\n";'` ;;
 do 
      echo $fn ;;
      php -l $fn ;;
      echo "########" ;;
 done

The implications for scripting this operation from the command line are clear.

get_included_files()

PHP provides a function to get a list of module dependencies for a running script. It's called

get_included_files()

… and here's the URL for the docs: http://us2.php.net/manual/en/function.get-included-files.php

Problems with this Approach

There is at least one serious deficiency inherent in using the require, require_once, include, and include_once directives as the sole indicators of module dependency;  that is that, simply, the modules which are required or "included" due to HTML element attribute values.

Examples include the ACTION attrubute value(s) of HTML FORM element(s), the SRC attribute values for SCRIPT elements. and so on. IFRAME and LINK elements are also among those that can cause a module dependency within the HTML, CSS, or Javascript layer(s) generated by PHP code of a site.

Labels: 0x0000, bash, code, css, html, javascript, linux, perl, php, script, source, webappdev

posted by pd wilson   #   22:13

The World Wide Web Consortium (W3C) defines the HTML Document Object Module (DOM) as a standard. The DOM is used as a standardized way to programmatically access the content of HTML [and XML – we're only concerned with the HTML, here] documents.

Languages commonly used to access and modify the content of a DOM document instance [an instance of a DOM-conformant document] are Java and Javascript.

In this case, we are interested in accessing and modifying the content (data and meta-data) of an HTML document using Javascript to manipulate HTML elements using DOM-defined methods.

Reference Material

• Document Object Model (Core) Level 1 – REC-DOM-Level-1-19981001 from W3C
• HTML DOM Tutorial &ndash from w3schools.com
• HTML DOM Reference – provided by w3schools.com

Labels: html, javascript, w3c, web, webappdev, xml

posted by pd wilson   #   17:43

How cool is that?

Wanting to make some notes here about some things that I'm just now realizing are possible with the combined technologies mentioned in the title line. This is to remind myself to

1. look up whether or not some of these ideas have been implemented, like: I know for sure there are Javascript solutions out there for things like Color Selection Dialogs, calendar widgets for date/time entry, and so on. Not so sure about things like GUI interfaces to controlling CSS attribute properties. And didn't I see a Javascript (back in the day) that would set stylesheet properties in real time, on a page already loaded into the browser?
2. Write some code to implement things like positioning a control box on a form at design time - this is basically the VB concept: realtime control of the CSS properties [attributes?] of e.g. an HTML element (or a logical grouping of HTML elements - a "control") by up/down counter/spinners or drag/drop operations - Should be fairly simple to code up, so much so that I'm having trouble believing such doesn't already exist for the HTML/PHP/CSS universe.

These ideas deserve a more detailed study - just put them here to be sure they're written down and accessible.

The link at W3C that set all this thought process in motion – at least, this phase of it – is the one given above with the title:  http://www.w3.org/TR/CSS21/visuren.html#comparison

Labels: css, html, javascript, php, webappdev

posted by pd wilson   #   09:49

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>My Google Data API Application</title>
    <script src="http://www.google.com/jsapi?key=ABQIAAAAEF0hbwoIdolnKjr5eMdCPRR65_V0rae5Sii3SwQWquZGohjOQRRV-du2YimkeA46q7aGVN6U-luT3w" type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[

    google.load("gdata", "1");

    function OnLoad() {
      // Fill out
    }

    //]]>
    </script>
  </head>
  <body onload="OnLoad()">
    <div id="panel"/>
  </body>
</html>

Labels: code, gdata, gooogle, javascript, web

posted by pd wilson   #   21:32

Problem

The problem we're solving here is that Firefox does not store a page icon when a bookmark is created which launches a Javascript to e.g. open a pop-up. Specifically, while the Google Bookmarks script is handy and functional, there is no icon stored for it, which means that if we - as some are wont to do - put the Google Bookmarks shortcut on the tool bar without a Name (in the Name: field of the Properties dialog), a generic icon is used which is difficult to differentiate from the rest of the toolbar icons at a glance.

To give you an idea of how annoying this is, here's a screen-shot of typical our FF Links toolbar on a typical day:

Where is the Bookmark Icon Stored?

In looking at the Firefox bookmarks.html file we find that bookmark icons are stored as non-standard attributes of HTML A elements, each of which contain a bookmark URL as an HREF attribute.

We haven't been able to find this documented anywhere, but if we look at the Firefox bookmark file [Firefox 2.0.0.5], the bookmark for the Firefox Start Page looks something like this:

  <DT><A HREF="http://en-us.start.mozilla.com/firefox"
  LAST_VISIT="1162959544"
  ICON="data:image/png;base64,
  iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/
  9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJ
  ZTwAAAHWSURBVHjaYvz//z8DJQAggJiQOe/fv2fv7Oz8rays/N+VkfG/iYnJfyD/1+rVq7
  ffu3dPFpsBAAHEAHIBCJ85c8bN2Nj4vwsDw/8zQLwKiO8CcRoQu0DxqlWrdsHUwzBAAIGJ
  mTNnPgYa9j8UqhFElwPxf2MIDeIrKSn9FwSJoRkAEEAM0DD4DzMAyPi/G+QKY4hh5WAXGf
  8PDQ0FGwJ22d27CjADAAIIrLmjo+MXA9R2kAHvGBA2wwx6B8W7od6CeQcggKCmCEL8bgwx
  YCbUIGTDVkHDBia+CuotgACCueD3TDQN75D4xmAvCoK9ARMHBzAw0AECiBHkAlC0Mdy7x9
  ABNA3obAZXIAa6iKEcGlMVQHwWyjYuL2d4v2cPg8vZswx7gHyAAAK7AOif7SAbOqCmn4Ha
  3AHFsIDtgPq/vLz8P4MSkJ2W9h8ggBjevXvHDo4FQUQg/kdypqCg4H8lUIACnQ/SOBMYI8
  bAsAJFPcj1AAEEjwVQqLpAbXmH5BJjqI0gi9DTAAgDBBCcAVLkgmQ7yKCZxpCQxqUZhAEC
  CJ4XgMl493ug21ZD+aDAXH0WLM4A9MZPXJkJIIAwTAR5pQMalaCABQUULttBGCCAGCnNzg
  ABBgAMJ5THwGvJLAAAAABJRU5ErkJggg=="
  LAST_CHARSET="ISO-8859-1"
  ID="rdf:#$.vPhC3">Firefox Start Page</A>

The example above has been line-wrapped and HTML encoded, but clearly, the icon used for this bookmark is defined by the content of the [non-standard] ICON attribute of the A element. Furthermore, we may deduce a few things from the definition shown:

• data: - this implies that something besides data might be stored here. Since we don't have a specification for this attribute value, we'll pass over this for the moment and just plan on using it "as is" - that is, we will create a bookmark that uses this same format for the ICON attribute
• image/png;base64 - This appear to be a MIME-type/encoding specification - we're guessing that the 'base64' goes with the [more obviously a MIME-type] 'image/png' since it is separated by a semi-colon instead of a comma...
• The string after the comma is obviously uuencoded data - the image itself, stored as ASCII characters pto avoid the problems inherent with trying to put binary image data in a text file]

Solution

Since

1. we don't have a base64 encoder handy,
2. we want to avoid manual editting of bookmarks.html
3. the Firefox bookmark property sheet doesn't provide a means to set the icon to use for the bookmark
4. we want to do this as much as possible within Firefox

we propose to follow the following steps to accomplish the goal of setting the ICON attribute of a bookmark which launches a Javascript target:

1. Create a Shortcut Icon Image to use in the bookmark
2. Create a webpage that has the bookmark/page icon we created
3. Navigate Firefox to the page we created
4. Boomark the page in Firefodx
5. Edit that bookmark, removing the page URL, and adding the Javascript
6. Clear the 'Name' property of the bookmark

Create an Shortcut Icon Image

Here is a link to the shortcut icon we created for the 'Add Google Bookmark' script: star-gold+16.png

This icon was created using The GIMP - a description of creating the PNG image is beyond the scope of this post.

Create a Web Page that Uses the Shortcut Icon

This is pretty simple, but assumes access to a web server - for some reason it doesn't seem to work with file:// URLs.

Here is the code for the HTML file we use:

  <html>
    <head>
      <title>example</title>
      <link rel="shortcut icon"
      href="star-gold+16.png" />
    </head>
    <body>
      <p>Example of shortcut icon META element</p>
    </body>
  </html>

This file is a here: http://blogs.earthside.org/earth_tech/uploads.html

Creating the Bookmark

Here is a screen shot of the browser showing the newly created toolbar icon - a plain file icon with labeled 'example'.

Note that you will need to click the newly created shortcut once to get the new icon to show up on the toolbar - for some reason the icon doesn't load when the shortcut is created [this can be seen if you watch the bookmarks.html file - it doesn't update until you click the new shortcut for the first time and the icon loads - it may be that the shortcut would update if FF closed, but...].

Here is a screenshot of the browser after the toolbar shortcut icon has loaded:

Next we open the properties page for the old Gmark shortcut and copy the Jacascript out of the Location field.

Below is a copy of the the Javascript - this all has to go on one line for in the bookmark Properties dialog Location field:

 javascript:(function(){var
 a=window,b=document,
 c=encodeURIComponent,
 d=a.open(
 %22http://www.google.com/bookmarks/mark?op=edit&output=popup&bkmk=%22
 +(b.location)+%22&title=%22+c(b.title),%22bkmk_popup%22,
 %22left=%22+((a.screenX||a.screenLeft)+10)+%22,
 top=%22+((a.screenY||a.screenTop)+10)+%22,height=420px,width=550px,
 resizable=1,alwaysRaised=1%22);a.setTimeout(function(){d.focus()},
 300)})();

Here is a link to a text file which contains the Javascript shown above, but all on one line, so it can be easily copied and pasted [the line is 392 characters in length]: gmark.js

1. Open the properties dialog for the 'example' shortcut
2. Clear the 'Name' field
3. Paste the Javascript code into the 'Location' field
4. Hit the 'OK' button to save the bookmark

Here is a screen-shot of the 'example' properties after the above changes have been made:

The DT element line from the bookmarks.html file with the Javascript target and the custom icon [saved to a text file]: http://blogs.earthside.org/earth_tech/uploads/gmark.txt

The toolbar with the new shortcut icon which launches the Javascript to add a Google Bookmark:

Notes:

1. In the screenshot above, the button labeled "Gmark" has the script to add the current browser page to Google Bookmarks stored in its "Location" property - the script is launched when the button is clicked.
2. This functionality [add Google Bookmark] exists in the IE Google toolbar, but not in the Firefox version.
3. The Gmark button is the only button currently on the toolbar that contains a Javascript, but it's so ugly that it would be nice to have a way to add an icon to the buttons which launch Javascript before any more are added.
4. The Firefox bookmark property sheet does not provide a way to set the icon to be displayed for a given bookmark.
5. The Firefox bookmark property sheet does allow a blank "Name" property field, unlike IE, which treats the bookmark name as a filename, and hence will not allow the bookmark to exist without a filename.
6. There are almost certainly others [e.g. manually Base-64 encoding the icon image], but this solution will work for trivial cases, since it leverages the "built-in" Firefox icon storage functionality - this has the advantage of not requiring you to edit the bookmarks.html file.
7. Based on the previous note, above, it should be possible to create a PHP or CGI scripted server page which will allow this process to be somewhat automated [e.g. allow the user to select a favicon from a list, then return a page which has that image as a page icon - the Javascript could be added to the bookmark created for the generated page, preserving the ICON attribute of the bookmark A element...
8. Various of the attribute names used in the Firefox bookmarks file are not defined in HTML, and so are not properly speaking "legal" HTML - we don't really care about that here, but it's worth noting if you are interested in manipulating the bookmarks.html file directly [ignoring the instructions from mozilla to the contrary].
9. Comletely unrelated, but handy: If you click a button on the toolbar while holding down the Shift key, the target URL opens in a new window. Ctrl+<click> opens the target in a new tab.

Labels: bookmarks, firefox, graphics, icons, javascript

posted by pd wilson   #   02:40

Checking out the JavaScript drawing program example called Doodle at the webreference.com section on JavaScript Programming, I found this bit of CSS that does syntax highlighting: SyntaxHighlighter.css [http://www.webreference.com/css/SyntaxHighlighter.css]

See also the Doodle Javascript programming example provided by WebReference for use of these style classes. Nice bit of work.

Here is a trivial example of the HTML to use of some of SyntaxHighlighter.css classes [from the example article, page 3]:

<div style="width: 700px;">
<textarea name="code" class="javascript" cols="60" rows="10"> 

<P class=code>&lt;script src="core.js" 
type=text/javascript&gt;&lt;/script&gt;<BR>&lt;script src="graphics.js" 
type=text/javascript&gt;&lt;/script&gt;<BR>&lt;script src="canvas.js" 
type=text/javascript&gt;&lt;/script&gt;<BR>&lt;script 
type=text/javascript&gt;<BR>var canvas = null;<BR>function initCanvas() 
{<BR>&nbsp;&nbsp;&nbsp;canvas = new 
Canvas($('theCanvas'));<BR>}<BR>window.setTimeout(initCanvas, 
10);<BR>&lt;/script&gt;<BR>&nbsp;&nbsp;&nbsp;&lt;div id="theFrame" 
class="CanvasFrame"&gt;&lt;/div&gt;<BR>&nbsp;&nbsp;&nbsp;&lt;div id="theCanvas" 
class="Canvas"&gt;&lt;/div&gt;<BR>&lt;/div&gt;</P>

</textarea>
</div>

Other examples occur in the article.

This CSS seems to make a nice complement to the PHP syntax highlighter blogged about elsewhere.

Labels: blog, blogger, code, css, html, javascript, php, source, syntax highlighter, web

posted by pd wilson   #   05:10