Hooray, someone else has already done the hard work for us! So, what I want to do is dynamically generate a table with objects and allow the user to edit one of the columns. In my case, only the end column is editable, but I could just as easily spread this availability to all my columns. I’m using all my favorite tools to create this page, specifically ruby, Sinatra, Twitter Bootstrap, and HAML.
X-editable has implementations using Bootstrap, jQuery UI, and jQuery. Since I’m already using Bootstrap in my app, I’m going to go with that version. Note that there are Bootstrap 2 and Bootstrap 3 builds of X-editable, and I’m using the Bootstrap 3 variety.
First I include the necessary files at the top of my HAML document.
1 2 3 4 5 6
I’m going to dumb my page down so I only have to show the important parts. I’m going to create a table from an array of hashes called
@options. Each hash has two important fields for this table: Points and Dollars. I will iterate over
@options, displaying the
points field as plain text and the
dollars field as an X-editable link. Each hash also has a
value field containing the primary key for the object to be edited.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
The important part is the
data-typetells X-editable how it will edit the presented data. According to the docs, types include text, textarea, select, date, checklist and more.
data-pkis the primary key of our data in the database. In my case, that comes to me stored in the
valuefield of the option hash.
postmethod that will be used to interpret the data.
data-titleis used to tell the user what to do.
editable attribute on the appropriate DOM objects. Since I’m using an array, I found the easiest way to do this was to start at the table’s id (edit_points_goal) and trace down to the
1 2 3 4 5 6 7 8
Now we need to deal with the
post request. If you’re really impatient to see things work, you should be able to see your in-line editable code in action, but the
post call will fail with a “NoMethodError.”
post is going to be really simple. We verify that we have a non-negative integer and we either save and return 200 or we return 400 with an appropriate message. Our table in this example is just called
Data, and we use
find to get a value out of the database.
1 2 3 4 5 6 7 8 9 10 11
Things should be working now. When you enter good data and click the ‘Ok’ button, our
post will be called and the text field will turn back into a link. When you enter bad data, you should see our error message below the text field box.
Issues I encountered:
- Table column width shifting - Fixed by setting the widths explicitly, as seen above (35% and 65%).
- Table height shifting - Fixed by setting the style of the
tdas seen above to give a larger height, more padding, and aligning the inner objects explicitly. I would recommend moving this definition to a
- “NoMethodError” after clicking Go - Unfortunately, if you made any coding errors in your route, you won’t be able to see the Sinatra error page but will instead you’ll be presented with a giant wall of HTML below the text box. Try to parse this error, but if you struggle to find out what went wrong you can always substitute a form-post method in place of the
atag, which may allow you to more easily figure out the problem.
The X-editable docs are extremely helpful for beginners. There is even more detail on the X-editable site, including editing multiple items, editing dates, and using a pop-up to edit the data.