Bookmarklet detecting if a page uses automatically generated ids

README.md

Bookmarklet detecting if a page uses automatically generated ids

Purpose

When producing HTML markup from XForms, Orbeon Forms automatically generates ids if your XForms doesn't contain ids. If you reload the same page twice, the ids produced by Orbeon Forms will be the same. However, if you upgrade to a newer version of Orbeon Forms, those ids could be different, which might be an issue for you if you have automated tests that depend on those ids. You can avoid this issue by making sure you always specify ids in your XForms, and this bookmarklet helps you to check that a given page doesn't contain any automatically generated id.

Install

1. Drag & drop the following link to your bookmark toolbar: Check ids.
2. Right click on the bookmark you created, choose Properties, in the Location field, remove http://remove?this= at the beginning of the location.

Use

1. Load the page you want to check.
2. Make sure the Firebug console is open.
3. Click on the bookmarklet you added to your bookmark toolbar. An array with the elements using an automatically generated id is shown in the console.

Code

You'll find the code for this bookmarklet in the bookmarklet-code.coffee (see below). We can't compile the CoffeeScript to JavaScript running the CoffeeScript compiler on the browser as browsers limit cross-script scripting. So you need to compile the CoffeeScript on your machine "by hand", that is with: coffee -c bookmarklet-code.coffee.

The source for the bookmarklet is in bookmarklet-link.js (see below). This loads and runs the latest version of bookmarklet-code.js, so you won't have to change the bookmarklet in your browser even if you change its implementation in CoffeeScript.

bookmarklet-code.coffee

allElements = document.getElementsByTagName "*"
hasXf = (e) -> i = e.id.indexOf("xf-"); not(i == -1) and (i == 0 or e.id[i - 1] == "$")
isFormElement = (e) -> e.tagName.toLowerCase in ["input", "textarea", "select", "button", "a"]
elementsWithXf = (e for e in allElements when ((hasXf e) and (isFormElement e)))
console.log elementsWithXf

bookmarklet-code.js

(function() {
  var allElements, e, elementsWithXf, hasXf, isFormElement;
  allElements = document.getElementsByTagName("*");
  hasXf = function(e) {
    var i;
    i = e.id.indexOf("xf-");
    return !(i === -1) && (i === 0 || e.id[i - 1] === "$");
  };
  isFormElement = function(e) {
    var _ref;
    return (_ref = e.tagName.toLowerCase) === "input" || _ref === "textarea" || _ref === "select" || _ref === "button" || _ref === "a";
  };
  elementsWithXf = (function() {
    var _i, _len, _results;
    _results = [];
    for (_i = 0, _len = allElements.length; _i < _len; _i++) {
      e = allElements[_i];
      if ((hasXf(e)) && (isFormElement(e))) {
        _results.push(e);
      }
    }
    return _results;
  })();
  console.log(elementsWithXf);
}).call(this);

bookmarklet-link.js

function f() {
    var d = document, c = d.createElement("scr" + "ipt"), b = d.body;
    try {
        if (!b)throw(0);
        c.setAttribute("src", "https://gist.github.com/raw/785391/bookmarklet-code.js");
        b.appendChild(c);
    } catch(e) {
        alert('Please wait until the page has loaded.');
    }
}
f();
void(0)