Question

So, I’m using Facebox 1.3 (latest)

I call facebox with a link like this:

<a href="#dialog" class="comment action_button" rel="facebox">comment</a>

#dialog is a div that looks like this:

<div id="dialog" class="dialog" style="display: none">              
    <form id="redline_form">
        <textarea id="suggested_text" name="suggested_text" style="width: 100%; height: 250px;"></textarea>

        <br>
        <!-- submit button here -->
    </form>

</div>

So, I read that when facebox loads a div into itself, it clones the DOM elements. That would be ok, except for my submit buttons are actually AJAX calls that also submit the form by the form’s ID. and since ID is no longer unique, it submits the original form, rather than the one iside the facebox (which you can get to by adding #facebox to the selectors).

How do I make it so the form remains unique and doesn’t get cloned. or maybe, there is a way to specify the form id in Ruby on Rails’ link_to_remote?

<%= link_to_remote "Submit Comment",
    :url => { :action => :create_redline_comment_or_change, 
    :commit => "Submit Comment" },
    :submit => "redline_form",
    :html => {:id => "comment_submit"} %>

here with the :submit parameter, I tried doing #facebox #redline_form, but it doesn’t know how to interpret that apparently. (no request sent to the server). The way it is now, it sends a request to the server, but it sends the non-facebox form. =\

Using Rails 2.3.8

The relevant Javascript for the workflow displayed here:

    jQuery(".comment").click(function(){
        $j("div#rl_menu").fadeOut(100);

        $j(".original_text").html('' + $selected_text);
        $j("textarea#suggested_text").html("Enter your comment(s) then click submit.");
        $j("#comment_submit").show();
        $j("#change_submit").hide();

        form = $j("#facebox #redline_form_fake");
        form.attr("id", "redline_form");
        form.attr("name", "redline_form");

        field = $j("#facebox #redline_form #suggested_text_fake");
        field.attr("id", "suggested_text");
        field.attr("name", "suggested_text");
    });

EDIT: added code that is supposed to change the ids of the form elements inside the facebox, but it doesn’t work.

Answer 1

My solution: was to instead of load a div that was already on the page (which get’s cloned, and causes issues with multiple elements with the same ID), to put the form into a partial, and load that partial into the facebox.

For non-web-appers, it’s just loading an URL that contains the div. =D