Javascript Inside Facebox Lightbox

Question

I am working on a rails app, where I am using jQuery and the Facebox Lightbox for popup forms. I want to use some jQuery validation on the form. When I try to implement this, I run into some weird results.

If i put the javascript directly into the view I am loading in the popup, the javsacript works just fine.

Example: app/views/item/view.html.erb

...

<script type="text/javascript">
    $(document).ready(function() {
        ...
    });
</script>

However, if I abstract it one step and put the javascript into the layout I am using for the popup, it fails.

Example: app/views/layouts/popup.html.erb

<script type="text/javascript">
    $(document).ready(function() {
        ...
    });
</script>

<div id="popup">
    <%= yield %>
</div>

It also fails if I pull the script from being directly coded into the view into a seperate javascript file, for example if i put the same script into ../public/javascripts/popup.js

then in my view i do:

<%= javascript_include_tag 'popup' %>

It fails here to.

You'd think that it wouldn't make any difference which file it's in. It should get loaded the same way.

Any idea on why this is happening?

Answer 1

I think in your document.ready code you're doing something like

$(".supercool")..bind('click', function() {
  somethingAwesome();
});

So that will attach to all classes with supercool class that exist on load. What you want to do is use the live

$('.supercool').live('click', function() {
  // Live handler called.
});

That's just a guess though -- I think that's what's going on -- need to see more javascript if it's not that.

http://api.jquery.com/live/