标签: unobtrusive-javascript

我的Javascript不是很划清楚,我正在努力覆盖提供的功能rails.js.

我想a[data-confirm]使用jQuery UI模式对话而不是vanilla javascript 来修改处理方式confirm().

相关功能rails.js是allowAction(element).如果我在另一个文件中定义它,我可以成功地从firebug控制台调用它,但rails.js仍然从具有data-confirm属性的锚点调用该版本.

我认为这是因为整个rails.js文件包含在:

(function($) {
...
})( jQuery );

是否有一种合理的方法来覆盖此功能,而无需修改提供的功能rails.js？

编辑:

在呼叫rails.js到allowAction被包裹在一个.live呼叫:

  $('a[data-confirm], a[data-method], a[data-remote]').live('click.rails', function(e) {
  var link = $(this);
  if (!allowAction(link)) return false;

  if (link.attr('data-remote')) {
    handleRemote(link);
    return false;
  } else if (link.attr('data-method')) {
    handleMethod(link);
    return false;
  }   
});

我也尝试过包括我之前和之后的javascript rails.js,但无济于事.

编辑:

所以,如果我打电话,.die('click.rails')我可以重新定义整个click.rails事件,但不会调用原始 …

这是我的问题......

我有一个页面,最初呈现并显示使用Ajax.BeginForm创建的AJAX表单.输入一些标准并发布AJAX表单.返回部分视图,其中包含使用Html.BeginForm创建的HTML表单.

到目前为止一切都那么好......到目前为止一切都运行良好.我不引人注目的客户端验证对从局部视图创建的元素非常有用.当我现在尝试创建一些动态输入元素(通过jQuery)并将它们插入/附加到由局部视图创建的表单时,我的问题就出现了.我无法在动态创建的元素上进行任何不显眼的客户端验证.

我尝试过: - 克隆现有元素,修改它们的ID /名称并将它们附加到DOM中. - 创建html字符串并将其插入DOM中.

每次插入动态元素后,我都尝试调用: - $ .validator.unobtrusive.parseElement()[new element] - $ .validator.unobtrusive.parse()[new container,document,etc] - $ .validator.unobtrusive .parseDynamicContent()[插件]

这是jQuery代码的详细信息......

$("#insert").live("click", function () {
    var html = "<input type='text' value='' name='CustomerNominationVolume' id='CustomerNominationVolume' data-val-required='The Nomination (Dth) field is required.' data-val-number='The field Nomination (Dth) must be a number.' data-val='true' /><br />"
    html += "<span class='field-validation-valid' data-valmsg-replace='true' data-valmsg-for='CustomerNominationVolume'></span>";
    $("#new").html(html);
});

$("#parse").live("click", function () {
    $.validator.unobtrusive.parse(document);
});

$("#validate").live("click", function () {
    var element = $("#CustomerNominationVolume");
    var form = $(element).first().closest('form');
    form.validate().element(element);
}); …

我在RequireJS中有一个主模块:

require([
    'jquery',
    'jquery.validate',
    'jquery.validate.unobtrusive'
], function ($) {
    $(document).ready(function () {
        var validator = $("form").validate();
        if ($("#txtFirstName").val() !== "")
            validator.element("#txtFirstName");
    });
});

当我加载此页面时,出现JavaScript错误:

TypeError:$(...).validate不是函数var validator = $("form").validate();**

我现在不知道为什么？加载所有脚本:

我试图遵循不引人注目的JavaScript /优雅降级的技术.我想在启用JavaScript时以及关闭JavaScript时使用不同的链接提供页面.

例如,当JavaScript关闭时,链接就是

<a href="script.cgi?a=action">

并且当JavaScript打开时

<a href="script.cgi?a=action;js=1">

(或类似的东西).

链接的两个版本(使用JavaScript和不使用JavaScript)都会导致服务器端脚本,但具有不同的参数.在JavaScript关闭时要调用的版本在服务器上执行的操作更多,因此在那里检测JavaScript是非生产性的(例如,从非JavaScript的服务器脚本重定向到另一个版本window.location).

注意:我更喜欢不使用jQuery等JavaScript库/框架的解决方案.

嗨,我正在使用谷歌ajax api在momemt,并按照文档中的示例我在我的html文件中有两个脚本标记:

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script language="Javascript" type="text/javascript">google.load('search', '1');</script>

一切正常,但是当我使用jquery并尝试调用google.load('search','1')时,它将无法正常工作; 在$(document).ready(function()之后的外部javascript文件中

我收到以下错误:null为null或不是对象.

我显然缺少一些基本的东西,因为我只是在学习javascript,但我的印象是最好不要不引人注意地使用javascript.实际包含一些js代码的第二个脚本标记不是不引人注目的.请问有人可以提供任何帮助吗？

鉴于我有以下代码块

(function(){    
    var mb = {
        abc:function(){
            //do something
        },
        xyz:function(width, height, site){
            //do something
        }
    };
})();

如何mb.abc从页面访问该方法,但不是mb.xyz？

我计划使用JSONP调用外部Web服务来解决这个事实,即我不想创建一个可能与调用页面冲突的全局函数.我认为创建一个随机函数名称并将其传递起来会起作用.像这样的东西:

<script src="www.foo.com/b?cb=d357534">

其中cb是回调函数名称,服务器将返回

d357534({my json data});

我想知道的是如何创建随机函数名称,我确定我可以使用,eval但这是最好的方法吗？

基本上,我想要做的是这样的:

var d + Math.floor(Math.random()*1000001) = function(){...   

如何在javascript for rails中嵌入ruby代码？我知道你可以在javascript响应器中轻松地执行此操作方法(例如在create.erb.js中).但有没有办法使用javascript_include_tag为应用程序中包含的其他自定义JavaScript文件执行此操作？

例如,在create.erb.js中,我可以编写代码,例如<%= if current_user_name ="xyz"%>

有没有办法在自定义的js文件中使用这种类型的嵌入,例如在整个应用程序中使用的custom.js,而不仅仅是为format.js生成响应.

谢谢,

Tabrez

我无法理解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();

我已经看到多个与此问题类似的问题，即不被提及的问题被引用了两次，并消除了一个问题，但是我检查了一下，看来只被引用了一次。当我删除单个引用时，我的表单将按应有的方式提交一次，但我却无法利用我试图通过不显眼的方式使用的“内联”功能。

当我查看html时，其中包括.js文件，不确定是否与另一个库有冲突吗？我尝试一次将其删除，但似乎并不能解决我的问题，仅当我删除jquery.unobtrusive-ajax.min.js该表单后才提交一次，但是我需要它！

<script src="/assets/js/jquery-1.10.2.js">
<script src="/assets/js/jquery.mask.min.js">
<script src="/assets/js/jquery-ui-1.10.3.custom.min.js">
<script src="/assets/js/jquery.validate.js">
<script src="/assets/js/jquery.validate.unobtrusive.js">
<script src="/assets/js/jquery.unobtrusive-ajax.min.js">
<script src="/assets/js/zCustomAttributeValidation.js">
<script src="/assets/js/nojs.js">
<script src="/assets/js/bootstrap.js">
<script src="/assets/js/respond.js">
<script src="/assets/js/global.js">
<script src="/assets/js/spinner.js">
<script src="/assets/js/toastr.js">
<script src="/assets/js/systemx.js">
<script src="/assets/js/systemx.widgets.js">

这可能是我们的其他事情，这是我的形式：

@using (noJs ? Html.BeginForm("MyAction", "MyController", new MyModel() { ItemID = myVal, AsyncUpdateID = string.Empty, RawReturnUrl = Request.RawUrl }.GetRouteValues(), FormMethod.Post) : Ajax.BeginForm("MyAction", "MyController", new MyModel() { ItemID = myVal, AsyncUpdateID = string.Empty, RawReturnUrl = Request.RawUrl }.GetRouteValues(), new AjaxOptions() { HttpMethod = "POST", UpdateTargetId = "item-" + …

我要在这样的jQuery上创建一个函数:

$(document).ready(function() {
    $('#header_rules').click(function() {
      // here i define myFunction()
    });
});

<a id="header_rules" href="#">RULES</a>

代替

 <a id="header_rules" href="#" onClick="myFunction();return false">RULES</a>

但我不知道在有人点击链接后如何使用jQuery阻止滚动到页面顶部.

事实上,我将完全摆脱本机JS,这可能会产生一些麻烦(这就是为什么我使用像jQuery这样的JS框架).

有帮助吗？干杯

我是JavaScript纯开发人员我设计自己的框架,当我测试我的选择器模块时,我发现了一个非常大的问题,即性能

在选择器模块中我不做一个非常复杂的选择器,如jquery我做一个简单的选择我的主要原因在这里我运行我的选择器在某些情况下我必须获取页面主体上的所有元素,并且必须循环它们例如,获取特定类型的元素,如TD元素,注意>>>>不要告诉我使用getElementsByTagName('TD')因为在我的选择器中我可以让开发人员选择多于1个tagName像

getElementsByTagNames('td,tr')

所以在这种情况下,我必须得到所有然后循环并仅拍摄所需的项目

我发现这种方式非常有性能,另一方面jquery有一个热闹的速度选择项目不jquery做循环也或者我的主要问题是什么

如何使用JavaScript执行高性能选择器:)

谢谢