Question

I have a form which I’m putting in a IFrame within a page. The IFrame displays a rails form with a button to save and a cancel link.

I add the iFrame with this code:

 $('#saveAreaForm').contents().find('#cancel_save').click(function() {
                $('#saveAreaForm').remove();
            });

             $('#saveAreaForm').contents().find('#create_area_form').bind("ajax:failure", function(xhr, status, error) {alert("failure!");});
            $('#saveAreaForm').contents().find('#create_area_form').bind('ajax:success', function(xhr, status, error) {alert("failure!");});

The link to remove the form works fine but the callbacks are never triggered.

I see in the console that the controller code is triggered but I’m unable to receive either success or failure.

This is the form code (HAML):

= simple_form_for(@area, :remote => true, :html => { :'data-type' => 'html', :id => 'create_area_form' }) do |f|
  - if @area.errors.any?
    #errorExplanation
      %h2= "#{pluralize(@area.errors.count, 'error')} prohibited this user from being saved:"
      %ul
      - @area.errors.full_messages.each do |msg|
        %li= msg

  .field
    = f.label :name
    %br
    = f.text_field :name
  .field
    %br
    = f.association :area_group

    %br
  .actions
    = f.submit
    = link_to 'Cancel', '#', {:id => 'cancel_save'}

And this is the controller function:

  # POST /areas
  # POST /areas.xml
  def create
    @area = Area.new(params[:area])

    respond_to do |format|
      if @area.save
        format.html { redirect_to(@area, :notice => 'Area was successfully created.') }
        format.xml  { render :xml => @area, :status => :created, :location => @area }
      else
        format.html { render :action => "new" }
        format.xml  { render :xml => @area.errors, :status => :unprocessable_entity }
        format.json { render :json => @area.errors, :status => :unprocessable_entity }
      end
    end
  end

Is there something obvious which I’m overlooking?

Answer 1

The problem was that the bind statement was probably called before the DOM objects were created. I solved the problem by using live instead of bind.