Tag: ruby on rails
Rails 3：如何从js.erb文件中调用javascript函数
现在我已经升级到Rails 3，我正在试图找出分离和重用javascript片段的正确方法。 这是我正在处理的场景： 我有一个包含两个区域的页面：一个包含应该可拖动的元素，另一个包含droppables。 当页面加载时，我使用jQuery来设置draggables和droppables。 目前我在application.html.erb的头部有脚本，我确信这不是正确的解决方案，但至少可行。 当我按下页面上的按钮时，会向我的控制器发出一个ajax调用，用一组新的元素替换draggables，这些元素也应该是可拖动的。 我有一个js.erb文件，在正确的位置呈现部分。 渲染后我需要使新元素可拖动，所以我想重用当前存在于application.html.erb中的代码，但我还没有找到正确的方法来执行它。 我只能通过将代码直接粘贴到我的js.erb文件（yuck）中来使新元素可拖动。 我想要的是： – 包含函数prepdraggables（）和prepdroppables（）的javascript文件 – 从application.html.erb或js.erb文件调用函数的方法 我已经尝试使用：content_for来存储和重用代码，但似乎无法让它正常工作。 我目前在application.html.erb的head部分有什么 $(document).ready(function () { // declare all DOM elements with class draggable to be draggable $( “.draggable” ).draggable( { revert : ‘invalid’ }); // declare all DOM elements with class legal to be droppable $(“.legal”).droppable({ hoverClass : ‘legal_hover’, drop […]
Rails 3 / jquery – 使用ajax渲染部分的制表符
使用Rails 3和jquery，我正在尝试为我的post#show页面设置一个简单的3选项卡导航，单击时将_post _comments和_related partials渲染到视图中。 目前，这些部分没有自己的控制器动作。 什么是最干净的Rails处理这些ajax调用的方法？ 我试过这个，但它不起作用： 邮政控制人： def tab respond_to do |format| format.js end end 展后视图： ‘tab’}, :remote => true %> /views/posts/tab.js.erb $(‘#postshow’).html(“”); 但是，如果我这样做，当我尝试打开我的Track Show页面时，我会遇到这个错误“没有路由匹配{：action =>”tab“，：controller =>”posts“}” 我认为我为tab定义了一个应该渲染tab.js.erb的动作…但更重要的是，这似乎有点笨拙，只需在三个部分之间切换。 任何帮助深表感谢。 谢谢。
使用jQuery和Ajax提交Rails表单
编辑：想出来，所以问一个相关的问题。 这是我的Javascript jQuery.ajaxSetup({ ‘beforeSend’: function(xhr) { xhr.setRequestHeader(“Accept”, “text/javascript”) } }) jQuery.fn.submitWithAjax = function() { this.submit(function() { $.post(this.action, $(this).serialize(), null, “script”); return false; }) return this; }; $(‘.error’).hide(); $(“#business_submit”).click(function() { // validate and process form here $(‘.error’).hide(); var name = $(“input#business_name”).val(); if (name == “” || name == “Required Field”) { $(‘#namelabel’).show() $(“#business_name”).focus(); return false; } […]
使用Javascript / JQuery / Rails 3动态添加新行
我正在构建一个时间表表单，其中包含一个日历，使用户可以选择指定的日期，并搜索项目。 我有这个function。 我基本上有这个： 一旦用户搜索他们的项目并按下加号按钮，那个指定的项目。 在这个实例中，Asda用户将点击加号图标，该图标将创建一个新行并将其放入表格的项目任务中。 你怎么能在Javascript / JQuery中做到这一点。 很抱歉询问可能被视为这样一个基本问题，但我还在学习Javascript / JQuery。 我目前有一个与project_project_tasks_path( project.id )相关联的加号图标。 这只是暂时的。 这是我到目前为止： Number   Name true %> Recently Viewed Project No. Project names Project Leader 123 Test 1 Hours for Week commencing: Tasks for project Leave TOIL Sick Total 编辑： 我创建了一个task_list.js.erb ，如下所示： $(‘#task_list’).html(”); $(‘#task_list’).append(”); 项目总监 def index # check if we’ve […]
在Ajax div刷新后，Jquery Masonry相互加载
我正在使用ajax刷新包含图像的div。 我最初使用砌体来添加布局。 然后ajax调用返回一个使用html（）方法刷新div的js。 现在它完成后我正在调用masonry(‘reloadItems’) 。 但是砌筑将所有图像加载到另一个上。 页面resize后，它的工作原理。 我尝试手动触发页面resize，但它不会使砌体进行调整。 JS： $(‘#timerange-select, #category_select’).bind(‘change’, function() { form=$(‘#images-filter-form’); $.get(form.action, form.serialize(),function(){ var $container = $(‘#images_container’); $container.imagesLoaded(function(){$container.masonry(‘reloadItems’);}); $(window).trigger(‘resize’); }, ‘script’); }); 好的，这个ajax请求的响应是： $(‘#images_container’).html(”); 所以我没有附加图片。 我正在更换容器。 这实际上是相互加载的10个图像。 编辑：请参阅http://stackoverflow.com/questions/17697223/masonry-images-overlapping-above-each-other/17697495?noredirect=1#17697495获取css和html。
在Rails 3应用程序中使用jQuery-UJS进行远程link_to时出现分析错误：我该如何调试？
我在使用Rails 3， remote_link :remote => true和jQuery点击链接后尝试替换div的内容。 到目前为止，我已经能够在使用200 HTTP代码响应时让控制器呈现正确的部分。 我设置了一些回调来找到问题的根源： jQuery(function($) { $(“#follow-link”).bind(“ajax:before”, function() { console.log(“ajax:before”); }); $(“#follow-link”).bind(“ajax:success”, function(data, status, xhr) { console.log(“ajax:success”); }); $(“#follow-link”).bind(“ajax:complete”, function() { console.log(“ajax:complete”); }); $(“#follow-link”).bind(“ajax:error”, function(xhr, status, error) { console.log(“ajax:error”); console.log(error); }); }); 触发before和complete ， success不是， error输出“parsererror”。 我在Safari的开发人员工具中检查响应时得到的内容是一个简单的字符串。 为什么会引发一个parsererror？ 如何获得有关导致此错误的更多信息？
CORS问题：获取错误“No’Access-Control-Allow-Origin’标题存在”实际存在时
我怀疑为我的应用程序提供服务的后端非常重要，但是如果你关心，我会使用带有Rails 4.0应用程序的机架 。 使用jQuery，我向我的应用程序发送一个PATCH请求，如下所示： $.ajax({ url: “http://example.com/whatever”, type: “PATCH”, data: { something: “something else” } }) 当我从Chrome触发此调用时，我看到一个成功的OPTIONS请求输出，它从我的服务器返回这些标头： Access-Control-Allow-Credentials:true Access-Control-Allow-Headers:accept, content-type Access-Control-Allow-Methods:GET, PUT, PATCH, OPTIONS Access-Control-Allow-Origin: http://sending-app.localhost:3000 Access-Control-Expose-Headers: Access-Control-Max-Age:15 然后我看到一个PATCH请求出去，这引发了这个错误： XMLHttpRequest无法加载http://example.com/whatever 。 请求的资源上不存在“Access-Control-Allow-Origin”标头。 因此不允许Origin’http：//sending-app.localhost：3000 ‘访问。 我尝试从PATCH切换到PUT ，结果相同。 这对我没有任何意义。 这是怎么回事？ 更新：我的config / application.rb 我认为标题告诉了整个故事，但由于人们感到困惑，这是我的config/application.rb文件，这是Rails的rack-cors插件的配置方式： config.middleware.use Rack::Cors do allow do origins ‘*’ resource ‘*’, :headers => :any, :methods […]
将WYSIWYG编辑器集成到最佳原位textarea
我正在使用best_in_place gem来就地编辑客户端的信息。 我的问题是，如何整合WYSIWYG编辑器以将此内容编辑为HTML？ 我目前正在使用这个编辑器： https ： //github.com/Nerian/bootstrap-wysihtml5-rails/ 我不擅长javascript和cofeescript，所以我可能做错了。 我的代码在视图中： :textarea, :nil => “Click here to add content!”, :html_attrs => { class: “wysihtml5” }, :sanitize => false %> 和clients.js.cofee $(document).ready -> # Activating Best In Place jQuery(“.best_in_place”).best_in_place() # Loading editor $(“.wysihtml5”).each (i, elem) -> $(elem).wysihtml5() 有谁知道该怎么办？ 谢谢
使用Rails和jQuery动态呈现部分视图
在我的应用程序中，我有一个用户配置文件页面，其中有三个选项卡，下面有一个空白div。 有一个默认选项卡是白色，另外两个选项卡更暗，“未选中”。 我想这样做，以便下面div中的内容根据选择的选项卡呈现部分内容。 我已经让它工作到jQuery允许我点击不同的选项卡，它更改选项卡的颜色而不刷新页面。 但是，我坚持如何让部分正确渲染。 有什么想法吗？ 我坚持如何动态调用部分基于jQuery中选择的选项卡，实际上我不确定是否需要另一个文件与此交互以使其工作。 我在rails应用程序中对jQuery相对较新，所以我不确定我是否已经完成了我需要做的一切。 用户个人资料页面：app> views> show.html.erb <%= link_to "Tab 1″.html_safe, userprofile_users_path, remote: true %> <%= link_to "Tab 2″.html_safe, userprofile_users_path, remote: true %> <%= link_to "Tab 3″.html_safe, userprofile_users_path, remote: true %> jQuery：app> assets> javascripts> userprofile.js $(function() { $(“li.tab”).click(function(e) { e.preventDefault(); $(“li.tab”).removeClass(“selected”); $(this).addClass(“selected”); $(“#profile-content”).html(“”); }); }); 用户控制器：app> controllers> users_controller.rb class UsersController < […]
Ruby on Rails CarrierWave gem是否可以与Ajax一起使用？
出于某些原因，使用带有Ajax的CarrierWave gem似乎并不适合我。 难道我做错了什么？ 我很好地遵循了253 CarrierWave Railscast，它没有AJAX，但在我的应用程序中我需要使用AJAX。 这是我的代码： 在图像文件字段中选择jpeg后的参数列表： Parameters: {“item”=>{“remote_image_url”=>””}} new.html.erb： create_item_path, :html => {:id => “create_item_form”, :multipart => true}) do |f| %> “save_button” %> 的application.js $(“#create_item_form”).submit(function() { $.ajax({ type: “POST”, url: $(this).attr(“action”), dataType: “script”, data: $(“#destination_item”).sortable(‘serialize’) + “&” + $(this).serialize() }); return false; }); item.rb的 class Item < ActiveRecord::Base attr_accessible :description, :image, :remote_image_url belongs_to […]
