试图在jQuery对话框模态表单中创建表单.我想念什么? [英] Trying to make a form in a jQuery dialog modal-form work. What am I missing?

问题描述

我希望在对话框中打开我的视图/博客/新内容.试图使其按照以下SO答案工作: https://stackoverflow.com/a/5318155/732200

I want my views/blogs/new to open in a dialog. Tried to make it work per this SO answer: https://stackoverflow.com/a/5318155/732200

这是我的代码(博客称为寓言"):

Here is my code (the blogs are called "fables"):

这是我的部分内容-views/fables/fablemaker.html.erb

This is my partial - views/fables/fablemaker.html.erb

<div id="fableMaker" title="Fable Maker" style="display:none">

<div id="countdownTimer">
    <span id="countdown_timer" class="timer">4:20</span><br />
    <button id="play_btn">Play Timer</button>
    <button id="pause_btn">Pause Timer</button>
    <button id="reset_btn">Reset Timer</button>

</div>

<%= form_for @fable do |f| %>

  <p>
    <%= f.label :content, "Fable Portal:" %><br />
    <%= f.text_area :content, :style => "" %>
  </p>
  <p>
    <%= f.label :title, "What would you like to title your creation?" %><br />
    <%= f.text_field :title %>
  </p>
      <p><%= f.submit "Create Fable", remote: true %></p>
    <% end %>

    </div>

这是views/fables/create.js.erb:

Here is the views/fables/create.js.erb:

$("#fableMaker").dialog({
    autoOpen: false,
    height: 900,
    width: 550,
    modal: true,
    title: 'Fable Maker',
    buttons: {
       "Create": function() { $("#fable_form").submit() },
      },
      open: function() {
        $("#fable_form").html("<%= escape_javascript(render('fablemaker')) %>")
    },
});

这是寓言控制器，创建动作:

Here is the fables_controller, create action:

class FablesController < ApplicationController
  respond_to :html, :js

  def create
    @user  = current_user
    @fable = @user.fables.build(params[:fable])
    @fable.save
    respond_with @fable, :location => @fable
  end

以下是与之相关的路线通话:

Here are the related routes calls:

  root :to => "pages#home"

  resources :fables

  match '/views/fables/fablemaker', :to => 'fables#create'
  get "fables/create"

这是应该启动页面的链接:

This is the link that is supposed to launch the page:

  <li><%= link_to image_tag("makeyourfable.png", :size => "130x102", 
                                                 :alt => "freewriting portal", 
                                                 :class => "typewriter", 
                                                 :mouseover => "makeyourfableH.png"),
                                                 new_fable_path %>
  </li>

当我检查页面源代码时，所有元素和字段都正在加载，但是它们不可见-当然也不在对话框中.显示的只是我的application.html内容.

When I check the page source, all of the elements and fields are loading, but they are not visible - and not, of course, in a dialog box. All that shows is my application.html content.

推荐答案

在jQuery对话框的打开功能中，您试图将新的HTML插入#fable_form元素中.

In the open function of the dialog jQuery, you're trying to insert new HTML into a #fable_form element.

我相信您打算将HTML插入#fableMaker元素中.

I believe you meant to insert that HTML into #fableMaker element.

该js响应将呈现将构成表单的html，并将其插入到您在调用视图中已经具有的div中.

That js response is rendering the html that will make up the form and inserting into a div you already had in the calling view.

$("#fableMaker").dialog({
    autoOpen: false,
    height: 900,
    width: 550,
    modal: true,
    title: 'Fable Maker',
    buttons: {
       "Create": function() { $("#fable_form").submit() },
      },
      open: function() {
        $("#fableMaker").html("<%= escape_javascript(render('fablemaker')) %>")
    },
});

这篇关于试图在jQuery对话框模态表单中创建表单.我想念什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！