正文 

当前位置： 首页 > 源码 >

带有 JQuery 的 Rails 5：带有显示和隐藏 JQuery 切换的表单最初会显示，但在我刷新页面后会隐藏起来

     2023-05-09     233

关键词：

【中文标题】带有 JQuery 的 Rails 5：带有显示和隐藏 JQuery 切换的表单最初会显示，但在我刷新页面后会隐藏起来【英文标题】：Rails 5 with JQuery: Form with show and hide JQuery toggle will show initially, but hide like it should after I refresh the page 【发布时间】：2017-03-18 20:50:29 【问题描述】：

我有一个帖子链接，它将向您显示 cmets，并允许您单击 div 以显示评论表单，同样，如果您单击取消，则隐藏表单。

当您点击帖子中的链接时，评论表单从打开位置开始，这是我不想要的。

但是，如果我只是刷新页面，它会重新加载视图，评论表单处于隐藏位置。我的 JQuery 技能很弱，我似乎无法弄清楚为什么它会在页面重新加载时起作用，但在来自另一个链接时不起作用。

这是我的评论表单：

# shared/_comment_form
<div id="comment-form" class="form-group">
  <%= form_for @comment, remote: true, url: post_comments_path(@post) do |f| %>
    <%= f.text_area :body, required: true, rows: 5, class: "form-control" %>
    <%= f.hidden_field :commentable_id, :value => @post.id %>
    <%= f.hidden_field :commentable_type, :value => @post.class.name %>
    <br>
    <%= f.submit class: "btn btn-primary" %>
  <% end %>
</div>
<span id="add-comment">Add a comment</span>

这是我的评论表单的 js.erb 文件

# comment_form.js.erb
$('#comment-form').hide().after('<%= j render("comment_form") %>');

我的 JQuery 将打开和关闭表单。

# app/assets/application.js
$( document ).ready(function() 
  $("#comment-form").hide();
  $('#add-comment').click( function() 
    $("#comment-form").fadeToggle("fast");
    ($("#add-comment").text() === "Cancel") ? $("#add-comment").text("Add comment") : $("#add-comment").text("Cancel");
  );
);

【问题讨论】：

【参考方案1】：

你也尝试过使用 css 吗？

#comment-form 
  display: hidden;

【讨论】：

你的意思是display: none;？我可以试试。我试图看看它是否可以用 JQuery 修复。 我尝试使用display:none 并将其设置为.hidden 类。然后我在点击时在.hidden 上使用了.removeClass。现在即使我点击它也不会在来自另一个页面时显示。但是，如果我刷新页面，它就会正常运行。所以那个解决方案并没有完全让我到达那里。

带有 mmenu/sidr 和 Jquery 和 Turbolinks 问题的 Rails

】带有mmenu/sidr和Jquery和Turbolinks问题的Rails【英文标题】：Railswithmmenu/sidrwithJqueryandTurbolinksissue【发布时间】：2015-03-0602:46:45【问题描述】：我无法查明这一点，但有人怀疑turbolinks是罪魁祸首。更改菜单只是为了确保它不是一些... 查看详情

Rails、REST 架构和 HTML 5：带有飞行前请求的跨域请求

】Rails、REST架构和HTML5：带有飞行前请求的跨域请求【英文标题】：Rails,RESTArchitectureandHTML5:Crossdomainrequestswithpre-flightrequests【发布时间】：2011-02-2023:19:47【问题描述】：在致力于使我们的网站对HTML5友好的项目时，我们渴望接受... 查看详情

带有 Vue 和 webpacker 3 的 Rails 5.1 应用程序，未编译 css

】带有Vue和webpacker3的Rails5.1应用程序，未编译css【英文标题】：Rails5.1appwithVueandwebpacker3,cssnotcompiled【发布时间】：2018-04-2316:23:26【问题描述】：我正在尝试将ElementUI添加到我的Vue应用程序中。我按照快速入门教程进行操作，我... 查看详情

带有嵌套属性的 Rails Jquery-ui 自动完成

】带有嵌套属性的RailsJquery-ui自动完成【英文标题】：RailsJquery-uiautocompletewithnestedattribute【发布时间】：2018-04-3008:33:12【问题描述】：当用户尝试将车牌号输入到相应的导轨表单中时，我正在尝试使用自动完成功能。我一直在经... 查看详情

带有 select2 的 Rails 5 ask_as_taggable

】带有select2的Rails5ask_as_taggable【英文标题】：Rails5ask_as_taggablewithselect2【发布时间】：2017-10-0804:55:51【问题描述】：无论是text_field还是select，我都无法在rails5表单中看到select2的效果。有谁知道为什么tag_list没有被填充。我可以... 查看详情

带有 JQuery Uploader 的 Rails Carrier Wave

】带有JQueryUploader的RailsCarrierWave【英文标题】：RailsCarrierWavewithJQueryUploader【发布时间】：2012-01-1122:01:08【问题描述】：我在railstutorial上使用带有JQueryUpload的RailsCarrierWave，但是当我点击上传按钮时出现错误：Error:SyntaxError:JSON.pars... 查看详情

Paperclip 不显示图像，而是在 rails 中显示带有 amazon s3 的标题？

】Paperclip不显示图像，而是在rails中显示带有amazons3的标题？【英文标题】：Paperclipdoesnotshowimagebutinsteadshowstitlewithamazons3inrails?【发布时间】：2020-01-1022:40:11【问题描述】：我正在使用回形针和amazons3为我的网站存储图像。在开发... 查看详情

Rails 5，带有 Select2-rails 的简单表单

】Rails5，带有Select2-rails的简单表单【英文标题】：Rails5,SimpleFormwithSelect2-rails【发布时间】：2017-07-2517:26:41【问题描述】：我试图弄清楚如何在我的rails5应用程序中使用带有简单表单的select2。我在应用程序中使用作为可标记的行... 查看详情

带有 jquery datepicker 的 Ruby on rails

】带有jquerydatepicker的Rubyonrails【英文标题】：Rubyonrailswithjquerydatepicker【发布时间】：2015-01-2423:43:55【问题描述】：我对Rails的经验很少，我正在尝试在我的Rails应用程序中使用jQuerydatepicker。我的应用程序有多个子任务，它们有与... 查看详情

使用带有 rails-jquery-autocomplete 的额外搜索字段

】使用带有rails-jquery-autocomplete的额外搜索字段【英文标题】：Usingextrasearchfieldwithrails-jquery-autocomplete【发布时间】：2015-08-1721:57:09【问题描述】：我已经用这个gem成功创建了表单：https://github.com/bigtunacan/rails-jquery-autocomplete问题... 查看详情

带有 master.key 的 Rails 5.2 - Heroku 部署

】带有master.key的Rails5.2-Heroku部署【英文标题】：Rails5.2withmaster.key-Herokudeployment【发布时间】：2018-09-1415:36:09【问题描述】：Rails5.2通过使用了不起的credentials.yml引入了加密机密功能。但我正在努力让它与Heroku一起工作。现在是否... 查看详情

带有 puma 的 Rails 5 ActionCable 的 NGINX 配置

】带有puma的Rails5ActionCable的NGINX配置【英文标题】：NGINXconfigurationforRails5ActionCablewithpuma【发布时间】：2016-04-1308:37:51【问题描述】：我将Jelastic用于我的开发环境（尚未投入生产）。我的应用程序使用Unicorn运行，但我发现了带有... 查看详情

Rails 6. 浏览器打开后显示一个带有过期数据的页面

】Rails6.浏览器打开后显示一个带有过期数据的页面【英文标题】：Rails6.Apagewithoutdateddataisshownafterthebrowseropening【发布时间】：2021-05-1413:54:41【问题描述】：有一个Rails网络应用程序。每次我打开带有“启动时恢复上一个会话”选... 查看详情

在带有 turbolink 的 Rails 中使用 jQuery 进行长轮询

】在带有turbolink的Rails中使用jQuery进行长轮询【英文标题】：LongpollingusingjQueryinRailswithturbolink【发布时间】：2013-03-0207:37:14【问题描述】：我正在按照说明使用jQueryAJAX请求here创建长轮询。以下是我的代码：:javascript(functionpoll()$.a... 查看详情

使用带有 VueJS2 的 Rails 5.1 API

】使用带有VueJS2的Rails5.1API【英文标题】：UseRails5.1APIwithVueJS2【发布时间】：2018-06-0507:30:36【问题描述】：我有一个现有的Rails应用程序，它有一个呈现为json的资源。我用Postman检查了json，一切正常。我已经使用webpackergem安装了vu... 查看详情

带有 Rails 4.2.0 的 Fotorama jQuery Gallery（Turbolinks 问题）

】带有Rails4.2.0的FotoramajQueryGallery（Turbolinks问题）【英文标题】：FotoramajQueryGallerywithRails4.2.0(Turbolinksissue)【发布时间】：2015-07-1407:13:29【问题描述】：FotoramajQuerySlider工作正常；但是，它不适用于Turbolinks（我宁愿不禁用Turbolinks... 查看详情

Jquery令牌输入自动完成不适用于带有rails 3的facebook朋友数组

】Jquery令牌输入自动完成不适用于带有rails3的facebook朋友数组【英文标题】：Jquerytokeninputautocompletenotworkingonfacebookfriendsarraywithrails3【发布时间】：2011-10-1619:22:09【问题描述】：我正在使用本教程处理您的Facebook朋友自动完成的文... 查看详情

Rails 无法正确解码来自 jQuery 的 JSON（数组变成带有整数键的散列）

】Rails无法正确解码来自jQuery的JSON（数组变成带有整数键的散列）【英文标题】：RailsnotdecodingJSONfromjQuerycorrectly(arraybecomingahashwithintegerkeys)【发布时间】：2011-09-1815:25:39【问题描述】：每次我想用jQuery将一组JSON对象发布到Rails时... 查看详情