Tag: unobtrusive javascript

没有Rails内置帮助程序使用AJAX的最佳实践？

在我的博客应用程序中，一些post显示为摘录 – 即，用户看到第一个（比如说）500个字符，并且可以单击链接查看整个post。 以下是相关部分： post) %> wrote this ago length, :omission => “…Click here for more!”) %> 但是，而不是“点击此处了解更多！” 将用户带到一个单独的页面，我希望它能够填充内联的其余部分。 目前，我已经通过将上面的代码片段放在以下div中来实现这一点： <div class="post" id="post_”> ‘post_content’, :locals => { :post => post, :length => 500 } %> 然后我在我的application.js中使用这个div的id来做AJAX： $(document).ready(function() { $(“a.more”).click(function() { var url = $(this).attr(‘href’); var id = url.split(“/”)[2] $.get(url, null, function(data) { $(“#post_” + id).html(data); […]

：remote => true / data-remote在通过ajax加载的表单上

在我的Rails应用程序中，我有一个使用jQuery加载方法通过Ajax加载的表单。 function load_sales_form(product_id) { $(“#sales_form”).load(” :show_sales_form) %>”/ + product_id); } 加载的表单有一个form_for标记，其中包含：remote => true选项，它会将data-remote =“true”属性添加到表单中。 但是，当用户单击“提交标记”按钮时，不会使用Ajax提交表单。 如果表单以标准的非ajax方式加载，它可以正常工作，但是在文档准备好之后通过ajax加载表单，不使用ajax提交，它提交为标准表单。 从我到目前为止所研究的情况来看，这是因为rails.js文件（其中包含允许通过ajax提交数据远程表单的内容）不会将其function应用于通过ajax加载的html内容。 是否可以强制rails.js文件将其function应用于通过Ajax加载的内容？

我无法理解jQuery链如何工作

我无法理解jQuery链是如何工作的。 jQuery(“div”).attr(“id”, “_id”) .hide() .show(); 我做了类似链接的事情，但我不确定它是否与jQuery使用的逻辑相同。 var fun = (function (parma) { return function () { return { start: function () { console.log(“start”); return this; }, mid: function () { console.log(“mid”); return this; }, last: function () { console.log(“last”); return this; } } } }）（）; // Working fun().start() .mid() .last();

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 […]

如果不显眼的validation无效则显示div，如果在MVC 3中有效则隐藏它

这是我的编辑视图的一部分： @Html.LabelFor(model => model.MainModel.StartDate) @Html.TextBoxFor(model => model.MainModel.StartDate) @Html.ValidationMessageFor(model => model.MainModel.StartDate) My content 因此，众所周知，当我的模型中的StartDate字段无效时，显示错误消息并且如果有效则隐藏它。 现在我想为此过程添加另一个操作。 我需要如果StartDate值为Invalid show “targetDiv” div ，如果StartDate值为Valid则隐藏它。 你的建议是什么？

如何使用asp.net mvc 3 jqueryvalidation与jjery对话框进行ajax提交？

我在用 asp.net mvc 3 jqueryvalidation无阻碍的javascript。 我试图通过注释在服务器端编写所有validation，然后使用mvc 3的新function来处理客户端。 我有一个对话框，上面有一个按钮（只是一个按钮而不是提交按钮），我想通过ajax将数据发布到服务器。 因此，当用户点击按钮时，我会执行表单提交并返回false以取消回发。 我认为这会触发validation但似乎并非如此。 如何进行客户端validation触发器？ 编辑 var $dialog = $(”).dialog( { width: 580, height: 410, resizable: false, modal: true, autoOpen: false, title: ‘Basic Dialog’, buttons: { Cancel: function () { $(this).dialog(‘close’); }, ‘Create Task’: function () { var createSubmitFrmHandler = $(my.selectors.createFrm).live(‘submit’, function () { alert(‘hi’); return false; }); createSubmitFrmHandler […]

使用javascript提交rails远程表单

在我的rails应用程序中，我有一个看起来像这样的远程表单： :get, :id => ‘my-form’, :remote => true do %> ‘search-field’ %> 现在我想通过javascript提交此表单并触发所有rails远程表单回调。 到目前为止，我已经尝试了一些东西，但似乎没有任何工作。 我尝试过的事情： $(‘#my-form’).trigger(‘onsubmit’) $.rails.callFormSubmitBindings( $(‘#search-form’) ) 但到目前为止没有运气。 有任何想法吗？

JQuery：为什么不引人注目的JavaScript /文档就绪function而不是OnClick事件？

我刚刚开始关注JQuery。 我目前在我的网络应用程序中没有任何AJAX。 我在HTML中的现有JavaScript看起来像： Find what? ADD FIND 这将显示[添加]和[查找]的按钮。 对于Find，有必要提交表单，我使用MyFormSubmit（）validation数据，为页面添加视觉效果，然后POST数据。 我可以为Find按钮添加一个CLASS或ID，在JQuery中我可以编写如下内容： $(function() { $(“.MySearchButtonClass”).click(function() { // validate and process form here }); }); 在我与JQuery理解的“新手”阶段，我不明白为什么我会这样做 我的旧方法识别对象附近的方法。 在用户按下按钮之前，JS可能存在未加载的风险（是否存在？JS的LOAD位于页面顶部）。 在加载文档之前，JQuery Document Ready方法不会被激活（我假设JS已经存在并准备好运行了吗？），但它将代码移动到我的HTML文件的一个单独部分 – 所以当我在HTML源代码中看到了MyButtonArray DIV，对我而言哪些对象有方法，哪些对象没有方法。 能否帮助我了解我的选择以及我应该注意的好处/问题？ 编辑 ：我觉得DOM操作 – 比如点击任何带有类“LightBoxThumb”的缩略图时可以出现的LightBox – 会使用Unobtrusive Javascript。 但是，我正在努力说服自己，具有特定操作的按钮应该以这种方式应用其方法。 （我当然不会在按钮上放任何代码而不是单个函数调用“其他地方”的东西，但在我看来，这是我最好的线索，关于该按钮的作用，以及不显眼的Javascript图层可能会更难确定。） Edit2 – 接受的答案 我采取了Russ Cams的回答。 它以一种有助于我理解更多关于如何以及何时应该使用它的方式来描述Unobtrusive Javascript。 目前（当我有更多经验时可能会改变！）我会坚持使用OnClick事件对一个对象进行单一的，不变的动作，因为我觉得我更容易调试 – 并诊断出现问题。 对于允许单击标题列进行排序（以及该类型的情况）的表上的ZebraStripes，我可以看到Unobtrusive Javascript方法的好处 Russ的最终评论特别有用，在此重复： “@Kristen […]

用于Rails 3数据确认属性的jQuery UI Dialog而不是alert（）

在Rails 3中，将：confirm参数传递给link_to将填充链接的data-confirm属性。 这将在单击链接时引发JS alert（）。 我正在使用rails jQuery UJS适配器（ https://github.com/rails/jquery-ujs ）。 rails.js的相关代码是： $(‘body’).delegate(‘a[data-confirm], button[data-confirm], input[data-confirm]’, ‘click.rails’, function () { var el = $(this); if (el.triggerAndReturn(‘confirm’)) { if (!confirm(el.attr(‘data-confirm’))) { return false; } } }); 和 triggerAndReturn: function (name, data) { var event = new $.Event(name); this.trigger(event, data); return event.result !== false; } 我想知道如何修改它以产生一个jQuery对话框（例如jQuery UI对话框 ），允许用户确认或取消。 我对JavaScript的了解不足以实现这一目标。 我目前的方法是简单地重写$（’body’）。delegate（）函数来实例化灯箱。 […]

使用jQuery / JS（没有谷歌地理定位API）查找用户位置？

有没有办法只使用jQuery在网站上找到客户位置。 例如，如果用户访问我的网站，我怎么能找到他们的大概位置只是使用jQuery。 例如，如果用户来自旧金山CA，则会有一些类型标识符让我知道该用户来自旧金山CA. 我真的不需要他们的确切位置只是县或一般的原产地。 编辑：如何生成http://flourishworks-webutils.appspot.com/req上的信息？ 谢谢