0

Railsアプリケーションでフォームダイアログのポップアップを取得しようとしています。アプリケーションには、Movementというリソースを作成するフォームがあります。このリソースには、Conceptという別のリソースを関連付ける必要があります。これには、1つを選択するためのリストボックスがありますが、クリックするとボタンが表示され、ダイアログフォームを開いて新しいコンセプトを作成できます。 。アプリケーションはrails3.2.6で実行されており、jquery-rails、jquery-ui、jquery-ujsgemsがインストールされています。サイトhttps://github.com/ramblex/modal-formで例を見つけましたが、この例は機能しません。3つのメインコードがあり、それらは次のとおりです。create.js.erb（view）、modalform.js、_form.html.erb rakeのバージョンが原因でこの例を実行できませんが、例を使用してアプリケーションに実装しようとしました。

create.js.erb

    <%-if @article.errors.any? %>
         console.log('Error');
         $('#dialog-form').html('<%= escape_javascript(render('form')) %>');
        <%- else %>
         console.log('Created');
         $('#dialog-form').dialog('close');
        $('#dialog-form').remove();
       $('table').append('<%= escape_javascript(render(@article)) %>');
    <%- end %>

modalform.js

$(document).ready(function() {
    $('#create_article').click(function(e) {
    var url = $(this).attr('href');
    var dialog_form = $('<div id="dialog-form">Loading form...</div>').dialog({
    autoOpen: false,
        width: 520,
        modal: true,
        open: function() {
            return $(this).load(url + ' #content');
        },
        close: function() {
            $('#dialog-form').remove();
        }
    });
    dialog_form.dialog('open');
    e.preventDefault();
   });
});

私はリソース記事を持っていなかったので、このための足場を作成しましたが、例が機能するかどうかを確認するだけでしたが、機能しませんでした。足場はArticletitle：stringでした。その後、記事ビューのファイルnew.html.erbを変更し、次のコードを置き換えました。

new.js.erb

<%-if @article.errors.any? %>
    console.log('Error');
    $('#dialog-form').html('<%= escape_javascript render 'form'%>');
<%-else %>
    console.log('Created');
    $('#dialog-form').dialog('close');
    $('#dialog-form').remove();
    $('table').append('<%= escape_javascript(render(@article)) %>');
<%-end %>

次に、記事ビューのビューindex.html.erbで、その行の新しい記事へのリンクを変更します。

<%= link_to 'New Article', new_article_path, :id => "create_article"%>

Javascriptコードを取得し、vendor / Assets / javascriptsに配置して、次の行を追加します

//=require modalform

app / Assets/javascriptsのapplication.jsにあります。

これがすべて完了したら、アプリケーションを実行して、[新しい記事]リンクの記事クリックに移動します。apperarsが表示するのは要素ダイアログだけです。フォームの要素がない場合は、フォームがform_for with：remote=>trueに変更されます。 form_tagで、まだ機能していません

http://i46.tinypic.com/11sp4j5.png

コードで遊んでいるアプリケーションで何が起こっているのかを見つけて、FirefoxのFirebugを使用するためのヘルプを得るには、最初にコンソールでエラーが表示されました：テンプレートがありません、次にnew.js.erbを変更してライン

$('#dialog-form').html('<%= escape_javascript(render('form')) %>');

もう一度確認してください。コンソールの応答では、これが出力でした。

    $('#dialog-form').html('<form accept-charset=\"UTF-8\" action=\"/articles\"    class=\"new_article\" id=\"new_article\" method=\"post\">
<div style=\"margin:0;padding:0;  display:inline\"><input name=\"utf8\" type=\"hidden\" value=\"&#x2713;\" />
<input name=\"authenticity_token\" type=\"hidden\" value=\"Vw6+xyfR/hnJutu/8Q2yLIqkau/s2xebEygKGZF07O8=\" />
<\/div>\n\n  <div class=\"field\">\n    <label for=\"article_title\">Title<\/label><br />\n    
<input id=\"article_title\" name=\"article[title]\" size=\"30\" type=\"text\" />\n  <\/div>\n  <div class=\"actions\">\n   
<input    name=\"commit\" type=\"submit\" value=\"Create Article\" />\n  <\/div>\n<\/form>');

コードを切り取り、htmlコードを編集し、form-dialog divの間に配置すると、結果は文字が豊富なフォームになりました/\nなど。

次に、これが問題であったことに感謝し、new.js.erbでscape_javascriptを削除すると余分な文字が解決されるが、フォームをform-dialog divにロードしないことがわかるまで、コードを試してみます。

$('#dialog-form').html('<%= render 'form'%>');

応答をもう一度確認してください。これが応答でした。

$('#dialog-form').html('<form accept-charset="UTF-8" action="/articles" class="new_article" id="new_article" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="Vw8+xyfR/hnJutu/8Q2yNIqvau/x2xebPqgKGZF0728=" /></div>

 <div class="field">
   <label for="article_title">Title</label><br />
   <input id="article_title" name="article[title]" size="30" type="text" />
   </div>
  <div class="actions">
   <input name="commit" type="submit" value="Create Article" />
 </div>
</form>');

ここでも、この出力をhtmlコード出力のform-dialog divにカットして、正しいフォームを取得します。記事を保存しようとしましたが、機能しますが、手動でhtml codederesponseを手動で配置したことを思い出してください。

しかし、問題はそれ自体で継続します（フォームがform-dialog divにロードされていません）

記事の部分的な_formのコードは次のとおりです。

<%= form_for(@article)  do |f|  %>
    <% if @article.errors.any? %>
        <div id="error_explanation">
          <h2><%= pluralize(@article.errors.count, "error") %> prohibited this article     from being saved:</h2>

         <ul>
           <% @article.errors.full_messages.each do |msg| %>
             <li><%= msg %></li>
           <% end %>
          </ul>
      </div>
<% end %>

<div class="field">
  <%= f.label :title %><br />
  <%= f.text_field :title %>
</div>
<div class="actions">
  <%= f.submit %>
</div>

そして、ArticlesControllerのコードを特に新しいアクションで表示することが重要だと思います。

# GET /articles/new
# GET /articles/new.json
def new
    @article = Article.new

    respond_to do |format|
    format.js
    #format.html # new.js.erb
    #format.json { render json: @article }
end
end

何か案は？

4

1 に答える 1

0

なに、そうだったと思いますか？のシンプルなスペース

 $(document).ready(function() {
  $('#create_article').click(function(e) {
    var url = $(this).attr('href');
    var dialog_form = $('<div id="dialog-form">Loading form...</div>').dialog({
    autoOpen: false,
    width: 520,
    modal: true,
    open: function() {
    return $(this).load(url + ' #content');
   },
   close: function() {
    $('#dialog-form').remove();
   }
 });
 dialog_form.dialog('open');
 e.preventDefault();
 });
 });

まさにその列に

return $(this).load(url + ' #content');

それは違いない

return $(this).load(url + '#content');

Alex Dullerのコードをうまく使用し、私のアプリケーションがバージョン3.2.8で実行されていることを繰り返します

これらは最終的なコードです

new.html.erb（myaplication / app / views / articles）

 <%= render 'form' %>

いくつかの行が削除され、1行に減ったことに注意してください。

articles_controller.erb（myaplication / app / controllers）

def new
  @article = Article.new

  respond_to do |format|   
   format.js
  end
end

最後に、この質問のタイトルは当初、new.js.erbがポップアップウィンドウに読み込まれるようにする方法でした。ただし、Rails3.2.6でポップアップフォームを取得する方法に変更されます。

于 2013-02-18T03:44:25.507 に答える