Until recently I’ve used both border and background-color CSS properties to make elements visible when laying out a new web page structure. Until I’ve added content, most block-level elements are invisible.

The problem with those methods is that a) giving an element a border will increase its width and/or height, which can affect your layout, and b) background-colors needed to be set for each element, and possibly with different colors. It all takes more code than I like and it usually looks awful.

(more…)

It became necessary this week for me to find a way to convert html entities into their decimal equivalents. I’m not very fond of dealing with character encoding and entity issues but I was finally able to get things working. In the end we modified data within the database which meant I wouldn’t get to use this script, but it was a very nice find.

The nice thing about this is that it leaves any existing decimal-format characters alone, and properly translates html entities to the decimal format.

After searching the net for a while I found a piece of code that seemed like a good solution. The original needed a bit of cleanup and tweaking, but here it is:

function htmlentities2unicodeentities ($input) {
  $htmlEntities = array_values (get_html_translation_table (HTML_ENTITIES, ENT_QUOTES));
  $entitiesDecoded = array_keys  (get_html_translation_table (HTML_ENTITIES, ENT_QUOTES));
  $num = count ($entitiesDecoded);
  for ($u = 0; $u < $num; $u++) {
   $utf8Entities[$u] = '&#'.ord($entitiesDecoded[$u]).';';
  }
  return str_replace ($htmlEntities, $utf8Entities, $input);
}

You can test the translation with this:

$test_strs = array('Kūlob', 'Kópavogur');

foreach($test_strs as $test_str){

  print 'ORIGINAL: ' . $test_str . '<br />'."\n";
  print 'TRANSLATED: ' . entities_to_unicode($test_str) . '<p>'."\n";

}

If you’re interested in converting things the other way around, good luck. I’ve been searching around for a while and I just can’t seem to find anything that works well enough without using some long array to translate things. Let me know if you find one!

Recently, I had another project where I needed to use AJAX to fill in a SELECT element based off of values from another SELECT. Previously I had used some very detailed and difficult javascript from an example found in the Apple Developer documentation. I have used this code before so I knew it, but I wanted to get something a bit easier. I was already using the Prototype framework in my code, so I figured I’d use Prototype for this as well.

However, I found no documented way to parse XML using prototype, so with a bit of toying around I was able to find a pretty simple solution.

First of all, here is the html I have for the two selects I need to work with.

State:<br />
  <select onchange="searchStates()" id="states">
    <option value="">CHOOSE</option>
    <option value="CO">CO</option>
    <option value="OR">OR</option>
  </select>
<br /><br />

Counties:<br />
  <select id="counties">
      <option value="">Please select a state first</option>
  </select>

The first select field has a list of states that when selected, will fill in the second select element with counties from the selected state. I could have gone the easy way and just replaced the counties element with HTML, but I wanted my counties to be returned in XML. As I mentioned, Prototype didn’t have any documented way of easily parsing XML nodes.

To start, the states select calls this function when the selection is changed:

 function searchStates(){
  var s = $F('states');
  var url = 'ajax_select.php';
  var pars = 'state=' + s;

  var myAjax = new Ajax.Request( url, { method: 'get', parameters: pars, onComplete: showResponse });

}

This function opens a new AJAX request through Prototype. It passes the value in the state selection box to ajax_select.php in the form of a GET request. On the server side I have the referenced php file to handle the request, and return some XML. (Obviously this file is simplified for example purposes).

< ?php

  header("Content-Type: text/xml");
  print'<?xml version="1.0" encoding="UTF-8" standalone="yes"?>';

?>

<response>
< ?php if($_GET['state'] == "CO") { ?>
  <record>
    <id>1</id>
    <state>CO</state>
    <county>Jefferson</county>
  </record>
< ?php } ?>
< ?php if($_GET['state'] == "OR") { ?>
  <record>
    <id>2</id>
    <state>OR</state>
    <county>Washington</county>
  </record>
< ?php } ?>
</response>

This file essentially returns an ID number, state, and county for the state passed in the GET request. It opens sending a ContentType of xml so that it doesn’t come back as text, and we add the xml declaration after that. These two statements are required otherwise the javascript gets text instead of XML, and can’t handle it the way we want.

To start out the response handling function, I call it showResponse. In the Prototype ajax request call, I told it onComplete: showResponse, which tells it to call the showResponse function if the request completes.

function showResponse(originalRequest){

}

This is the basic outline of the script. Using the prototype call for an element by its ID, I get the counties element. I need to clear it out, so I loop through it’s options and remove any.

  var c = $('counties');

  while (c.length > 0) {
    c.remove(0);
  }

Now my target element is clear. But the problem I set out to resolve, is the fact that Prototype doesn’t have any easy way of sorting through the child nodes and returning values. My solution is to pull the nodes out by name, since I know the names of the nodes I need.

var tagValue = originalRequest.responseXML.getElementsByTagName('county');
var tagId = originalRequest.responseXML.getElementsByTagName('id');

Now all we need to do is iterate through the array returned. I just picked the first array although it really doesn’t matter as both should have the same counts as they originate in the same records. I create a new option for the select element for each one, with a value of the ID I’m pulling from the XML, and text of the county name. IE handles this differently than other browsers, so I need to use try/catch to get past errors. IE uses nodeName.text while everyone else uses nodeName.textContent.

  for (var i = 0; i < tagValue.length; i++) {
    var opt = document.createElement("option");
    try {
      opt.text = tagValue[i].textContent;
      opt.value = tagId[i].textContent;
      c.add(opt, null);
    }
    // IE needs special handling
    catch(ex){
      opt.text = tagValue[i].text;
      opt.value = tagId[i].text;
      c.add(opt);
    }
}

That’s it! Checkout the working example here!

Or you can Download these source files along with Prototype here.