【问题标题】:Two different AJAX forms not working两种不同的 AJAX 表单不起作用
【发布时间】:2017-04-20 13:43:02
【问题描述】:

您好,我正在使用 Rails,并且在为 cmets 提交表单时一直尝试发出 ajax 请求,因此结果将附加到 cmets 列表中。多亏了这个视频:https://www.youtube.com/watch?v=K-sns5tNdTY

后来我决定为我的 cmets 添加答案,我用一个新模型实现了它,并在每个评论上制作了一个咖啡脚本,以向我展示答案和一个表格来回答那个特定的评论。这有点让人头疼,但最终还是让它起作用了。

现在我的答案工作正常,但评论表单无法通过 AJAX 工作,cmets 正在发布,但未附加到评论列表中。

在 chrome 上检查时出现控制台错误:

jquery.self-bd7ddd3….js?body=1:10255 POST http://localhost:3000/comentarios 500(内部服务器错误)

这就是我渲染 cmets 和表单的方式(抱歉它是西班牙语):

<div id="seccion-comentarios" class="border-element-sm-div" style="overflow: hidden">
                    <h3 style="width: 500px">Comentarios</h3>
                        <div id="comentarios">
                            <%= render @comentarios %>
                        </div>
                    <% if @comentarios.count <= 0 %>
                        <p style="font-style: italic; color: grey; margin-left: 10px"> Aún no hay comentarios. Haz uno!</p>
                    <% end %>
                    <% if usuario_signed_in? %>
                    <div style="overflow: auto">
                        <%= render :partial => 'comentarios/form' %>
                    </div>
                    <% end %>
                </div>

这是我的 cmets 的表格(views/commentarios/form):

<%= form_for @comentario , remote: true do |f| %>

    <%= f.hidden_field :favor_id, value: @favor.id%>

            <%= f.label :texto, "Escribe un comentario:" %>
            <br/>
            <%= f.text_area :texto, required: true,class: "form-control", style: "width: 99%; max-width: 99%"%>

        <div style="float: right; padding-top: 10px; margin-right: 1%">
            <%= f.submit "Comentar", :class=>'btn btn-primary'%>
        </div>

<% end %>

这是内部视图/评论的 create.js.erb

$('#comentarios').append($("<%= j render @comentario %>").hide().fadeIn(500));
$('#comentario_texto').val("");

然后对于每条评论,我都会呈现这个:

            <div class="border-gau-sm" style="overflow: auto">
                <table >
                    <tr>
                        <td height="60" style="min-width: 60px; vertical-align: top">
                            <div class="image-container-nav">
                                <% if Usuario.find(comentario.usuario_id).foto.presence %>
                                <%= image_tag Usuario.find(comentario.usuario_id).foto, title:"FotoUsuario", class:"img-sm"%>
                                <% else %>
                                <%= image_tag "foto_stock.png", title:"FotoUsuario", class:"img-sm"%>
                                <% end %>
                            </div>
                        </td>
                        <td>                
                            <div style="margin-left: 5px;">
                                <p style="font-size: 16px"><b><%= link_to Usuario.find(comentario.usuario_id).nombre.capitalize+" "+Usuario.find(comentario.usuario_id).apellido.capitalize, usuario_path(:id => comentario.usuario_id)%></b></p>
                                <p style="font-size: 11px; margin-top: -15px; font-style: italic; color: grey"> <%= comentario.created_at.strftime("%d/%m/%Y %H:%M") %> </p>
                                <p style="margin-top: -10px"><%= comentario.texto%></p>
                            </div>
                        </td>
                    </tr>
                </table>
                <div style="float: right; margin-top: -10px; margin-bottom: -2px;">
                    <% if (current_usuario.id == comentario.usuario_id)%>
                    <%= link_to "Eliminar", comentario, method: :delete, data: {confirm: '¿Esta seguro de eliminar este comentario?'}, class: 'btn btn-danger btn-xs' %>
                    <% end%>

                    <a class= "respuestas-link btn btn-primary btn-xs" data-section-id="respuestas-seccion-<%=comentario.id%>" href="#">
                        Respuestas
                        <span class="caret" style=""></span>
                    </a>
                </div>
                <section id="respuestas-seccion-<%=comentario.id%>" style="display: none">
                    <br/>
                    <div>
                        <div id="seccion-respuestas" style="overflow: auto">
                            <% respuestas = comentario.answers %>
                            <div id="respuestas-<%=comentario.id%>">
                                <%= render respuestas %>
                            </div>
                        </div>
                        <div style="overflow: auto">
                            <%= render :partial => 'answers/form', :locals => {:coment => comentario}  %>
                        </div>
                    </div>
                </section>
            </div>

我为每个评论呈现每个答案和此表单:

<%= form_for @respuesta , remote: true do |f| %>

    <%= f.hidden_field :comentario_id, value: coment.id%>
            <%= f.label :texto, "Escribe una respuesta:" %>
            <br/>
            <textarea required="required" class="form-control" style="width: 99%; max-width: 99%" name="answer[texto]" id="answer_texto_<%=coment.id%>"></textarea>

        <div style="float: right; padding-top: 10px; margin-right: 1%">
            <input type="submit" name="commit" value="Enviar" class="btn btn-primary btn-xs">
        </div>

<% end %>

并通过 /views/answers/create.js.erb 中的这个 create.js.erb 让它通过 ajax 工作

$('#respuestas-' + <%= @respuesta.comentario.id %>).append($("<%= j render @respuesta %>").hide().fadeIn(500));
$('#answer_texto_' + <%= @respuesta.comentario.id %>).val("");

最后我想说我已经尝试删除 &lt;%= render :partial =&gt; 'answers/form', :locals =&gt; {:coment =&gt; comentario} %&gt; views/comentarios/_comentario.html.erb 中的行和评论表单工作得很好。 我觉得这很奇怪,因为页面中有许多形式的答案,并且除了 cmets 形式之外,所有这些形式都在同时工作而不会相互干扰。 感谢您的宝贵时间,希望您能提供帮助!

【问题讨论】:

    标签: javascript ruby-on-rails ajax forms


    【解决方案1】:

    我通过在 Network, XHR 中使用 chrome 检查解决了这个问题,在那里我对错误有更好的解释:

    评论中的ArgumentError#create

    显示 /app/views/answers/_form.html.erb 第 1 行出现的位置:首先 表单中的参数不能包含 nil 或为空

    我用于其他表单的 @respuesta 搞砸了,所以我在控制器的某处为评论员添加了一个 @respuesta.new 并且成功了!

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2013-09-25
      • 2011-11-18
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多