Category Archives: jQuery

HAML and jEditable

One of the problems with jEditable and HAML is that HAML puts whitespace in the form automatically.  So my HAML script looks like this:

%td{ :class => 'edit_area', :id=>"#{k}_#{f}" }
  = format_table_value(f, v[f])

The problem with this in jEditable is that now once the user clicks on it, there is gobs of white space around the word.  To get rid of this you use HAML’s fancy no whitespace flag ‘<’.  This looks like:

%td{ :class => 'edit_area', :id=>"#{k}_#{f}" }<
  = format_table_value(f, v[f])

This is an example of how one simple character can really help improve the user experience :-)

jquery ui tabs and the back button

For the site I help out with, xcat.sf.net, I used jquery-ui tabs.  The only issue I had was that I couldn’t do back button, and I started getting a few complaints from it…

So, after about 20 minutes of investigation, here is the code I used to make it work.  It works pretty well for cases when you navigate externally, but doesn’t work when you press the back button while on the page, expecting to go to the previous tab.  The jQuery team says that they’re working on this but its not in there today. Also, my approach refreshes the entire page with each click, that’s how I get the right page.  So it may not be optimal for many places.  Anyway, here is what I do:

<script type=”text/javascript”>
$(document).ready(function(){
var start = window.location.href.lastIndexOf(“#”);
var tabIndex = 0;
if (start !== -1){
tabIndex = window.location.href.substring(start+1, start+2);
}
$(‘#tabs’).tabs({
selected: tabIndex,
spinner: ‘Retrieving data…’,
select: function(event,ui){
window.location = “#” +  ui.index;
window.location.reload();
},
});
});
</script>

Then, down below in the HTML, I have:

<div id=’tabs’>
<ul>
<li><a href=”about.html”>About</a></li>
<li><a href=”download.html”>Download</a></li>
<li><a href=”start.html”>Getting Started</a></li>
<li><a href=”docs.html”>Documentation</a></li>
<li><a href=”support.html”>Support</a></li>
<li><a href=”test.html”>Testimonials</a></li>
</ul>
</div>

That makes it so that the back button is supported.  It changes the URL a bit, by giving it a nasty #<tabindex> but it does the trick for me.