2014-01-30 33 views
0

我想在引导模式窗体显示标志呈现在引导模式部分,当我们点击导航中的bar.Here按钮是我的代码如何使用AJAX

这里是我的new.js.erb

$("#myModal").before("<%= escape_javascript(render "new", :formats => [:html]) %>"); 
$("#myModal").modal('show'); 

这里是我的_top_nav.html.erb

<li><%= link_to 'LOGIN', new_user_session_path, remote: true %></li> 

这里是我的_new.js.erb

<!-- Button trigger modal --> 
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
Launch demo modal 
</button> 

<!-- Modal --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby= "myModalLabel" aria-hidden="true" id="login"> 
<div class="modal-dialog"> 
<div class="modal-content"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">times;</button> 
    <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
    </div> 
    <div class="modal-body"> 
    <div class="container"> 
    <div class="well"> 
<div class="row"> 
     <div class="col-lg-10"> 
     <%= simple_form_for(resource, :as => resource_name, :url => session_path(resource_name), html: { class: 'form-horizontal', role: 'form' }) do |f| %> 
     <h1 id="h1id">Member Login</h1> 
    <legend> 
    <h4>If you are not a member yet please become a member <%= link_to 'here', new_user_registration_path %> to Sign In</h4></legend> 
    <%= f.input :email, :required => false, :autofocus => true, placeholder: ' Email', input_html: {class: 'form-control'}, label_html: {class: 'col-sm-2 control-label' }, wrapper_html: {class: 'form-group'} %> 

    <%= f.input :password, :required => false, placeholder: 'Password', input_html: {class: 'form-control'}, label_html: {class: 'col-sm-2 control-label' }, wrapper_html: {class: 'form-group'} %> 
    <%= f.button :submit, "Sign in", style:"margin-left:17%", class:"btn btn-primary" %> 

<% end %> 
    </div> 
    <div class="col-lg-2"> 
    <%= image_tag('logolatinfoods-01.png', size: '300x70', class: 'logo-style') %> 
    </div> 
    </div> 
</div> 
</div> 

    </div> 
    <div class="modal-footer"> 
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
    <button type="button" class="btn btn-primary">Save changes</button> 
    </div> 
</div><!-- /.modal-content --> 

我无法明白的地方我想提出mistake.Ajax电话是工作,但语气并不displaying.I是新来ajax.Can任何一个解释了什么错在这里。

回答

0

_new.js.erb大概应该是_new.html.erb

+0

我使用AJAX这里 –

+0

我理解,但现在你new.js.erb呼吁在HTML的格式来呈现新的,但HTML模式是_new.js。 ERB。重命名_new.js.erb(模态html)new.html.erb,因为它是html。它应该开始工作。现在它试图渲染一个不存在的部分。 – EricC

+0

另一个问题是,用于渲染模态内容的jQuery选择器在页面上还不存在。您的application.html.erb中至少需要一个ID为“myModal”的div。否则,电话正在工作,但它优雅地只是不创建他的模式。 – EricC