I faced one nice problem while using Facebox for one of our recent project http://www.dunnitt.com, thought i would take this moment to share the problem and solution I found.
Previously I used Thickbox based popup for the web applications, then I came to know about facebox and started using it in my recent projects. I am pretty pleased with its simplicity and configurations. It is also very simple to integrate with RAILS application. When i started using it in my Ajax pages, its wasn’t working the way it should.
The thing is, after making an Ajax call, a new element is added in the DOM which has A tag with attribute rel set to facebox, like A tag href=”ajaxcontent” rel=”facebox” foo foo < /A tag , when I click on that link facebox was not working and the content is loaded in a new page. I searched for some solution but could not find any good one.
Then I found that the issue was that facebox function was not bind to the newly created link tag, that is A tag in my case.
To resolve this problem, I simply added the jQuery “$(‘a[rel*=facebox]’).facebox(); ” code to bind facebox() to the newly created element. It worked properly but I faced another problem with that, that is, facebox() got bound to every A tags along with the attribute rel=”facebox”. This means, all the A tags bacame facebox enabled, which led to links clicked been loaded on facebox popup.
So I decided to give a dynamic unique id for the newly added link to bind facebox only for that specific element or tag.
Some thing like..
[source language=”Html”]
” href=”/controller/action” rel=”facebox”>Click here to get the facebox.”
[/source]
I added the following jQuery code in my controller action:
[source language=”Ruby”]
def update
# Usual controller code goes here
render :update do |page|
page << '"$('a[rel="facebox"][id="<%= "#{some_id}}" %>"]').facebox(); "'
end
end
[/source]
So, by this way, every A tag which has rel= "facebox" and id as "some dynamic unique id which is passed" get bind to the facebox.
Hope you liked my solution. If you have any doubts please let me know by adding a comment below.
