如何使用rails 3.2.6獲取彈出窗體？

我想要在Rails應用程序中獲得表單對話框彈出窗口。在應用程序中有一個表單，用於創建一個稱爲Movement的資源，這個資源必須與另一個稱爲Concept的資源相關聯，這個資源存在一個列表框來選擇一個，但是我想在點擊時有一個按鈕打開一個對話框來創建一個新的概念。該應用程序運行軌3.2.6和安裝jquery-rails，jquery-ui，jquery-ujs寶石。在網站https://github.com/ramblex/modal-form我找到了一個例子，但我不能夠這個例子的作品。有3個主要的代碼，他們是：create.js.erb（視圖），modalform.js，_form.html.erb我不能運行這個例子，因爲耙的版本，但我拿了這個例子，我試圖在我的應用程序。如何使用rails 3.2.6獲取彈出窗體？

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(); 
    }); 
});

我沒有一個resorce第二十然後，我創建了這個支架也只有看的例子的作品，但它不是。 TE支架是文章大標題：字符串後，我在文章的看法改變了文件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 %>

然後。的文章觀點html.erb更改鏈接到新文章線

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

我把Javascript代碼，並把它放在供應商/資產/ JavaScript和添加行

//=require modalform

in application/assets/javascripts中的application.js。

完成所有這些後，我運行應用程序轉到新建文章鏈接上的文章鏈接，並且唯一一個引用者是對話框 - 對於沒有窗體元素的窗體是form_for with：remote =>真的，我改變的form_tag和仍然沒有工作

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

嘗試發現了什麼應用程序正在發生的事情，我玩的代碼，並得到幫助我使用Firefox的螢火，首先在控制檯中的錯誤是顯示：模板丟失，然後我改變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代碼和角色的命運託付是用大量的一種形式字符/ \ n等

然後，我感謝這個問題，我玩的代碼，直到我發現在new.js中刪除scape_javascript。ERB解決多餘的字符，但仍沒有加載的形式進入

$('#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代碼輸出div並獲得正確的形式。嗯，我試圖保存一篇文章，它的工作原理，但請記住，我手動將HTML代碼de響應以手動方式。

但問題繼續（形式沒有加載到形式的對話中格）本身

在文章的部分_form代碼wiew是

<%= 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中的代碼，特別是在動作new中很重要。

# 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

任何想法？

來源

2013-02-05 user2044276

你以爲是什麼？在

$(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');

那麼使用亞歷愚鈍的代碼，並重申我的應用程序是在3.2版本上運行。 8

這些是最終代碼

new.html.erb（myaplication /應用/視圖/物品）

<%= render 'form' %>

注意，被消除幾行，並將其降低到僅一個。

articles_controller.erb（myaplication /應用/控制器）

def new 
    @article = Article.new 

    respond_to do |format| 
    format.js 
    end 
end

最後這個問題的標題當初是如何到達該new.js.erb加載到一個彈出windw？但它改變爲如何獲得彈出窗體的軌道3.2.6

來源

2013-02-18 03:44:25 user2044276

如何使用rails 3.2.6獲取彈出窗體？

回答

相關問題