I’ve been trying to get a slider bar working recently as part of a facebook application. To get the example on the Facebook wiki working out-of-the-box was no problem.
The problems came when I wanted to create the slider bar as the result of a user clicking on an input. For some reason, Facebook only loads 3rd party Javascript (ie. mine) in the body of the page. If a user clicks a link that calls a Javascript function before the page has finished loading, the function may fail if it depends on functions kept in external Javascript files (that have not yet loaded).
Because of the complexity of Facebook pages, there is often between 1 and 5 seconds when a user may click one of my links even though the page hasn’t technically finished loading. If this happens, the user will either see a very cryptic error or nothing will happen. It’s a completely unacceptable user experience so I was forced to come up with the workaround below.
var sliderCreated = false; // can only create one slider per-page with this
function createSlider() {
if (!sliderCreated) {
try {
new slider(document.getElementById('output'), document.getElementById('count_slider'), 0, 100000, 250, document.getElementById('salary_min'), , 500);
sliderCreated = true;
} catch (error) {
// Errors may get thrown if the fbslider.js wasn't loaded quickly enough, so we wait a second
setTimeout(function() { createSlider() }, 1000);
}
}
}
This will detect any errors thrown from the creation of the slider (which relies on an external Javascript file). If an error is found, then the attempt to create the slider will occur again after a second. This has the advantage that even if the second attempt fails (if the network is very slow), it will continue to retry with a delay between each attempt.
A variable (sliderCreated) is used to detect when the slider has been successfully created. In case the link that creates the slider is still clickable after the slider is created, this variable guards against multiple sliders being spawned on the page.
It is left as an exercise to the reader to add an upper limit to the retries if required.
fonicmonkey 