标签: unobtrusive-javascript

我搜索了le interwebs,但我没有找到遇到与我相同问题的人,所以我在这里提出我的问题.

我刚开始使用Rails 3.1与Compass,Haml和CoffeeScript并遇到了问题.当我重新命名位于我控制器专用的JavaScript文件app/assets/javascript/index.js到index.js.coffeeJavaScript代码,并转换为CoffeeScript的,一切正常-该文件是由浏览器请求,并在飞行到JavaScript编译.CoffeeScript文件中的更改也会触发重新编译.

然而,当我尝试用不显眼的JavaScript(这样做:remote => true),并重新命名定位于视图文件夹中已经工作的JavaScript文件app/views/index/index.js.haml到index.js.coffee.haml并翻译包含的代码,Rails不承认它是一个CoffeeScript中,需要进行编译.

我究竟做错了什么？我是否必须主动为视图启用CoffeeScript评估？哪里？

我正在使用jQuery Validation Plugin,v1.11.0,2/4/2013和jquery.validate.unobtrusive.js.

我想我面临数字字段范围验证的错误:验证将字符串值与最小字符串和最大字符串进行比较,而不是将字段数与最小数字和最大数字进行比较.

摄制步骤:

您使用以下HTML设置验证范围1-1000:

<input name="Data.MaxConcurrentInstances" class="text-box single-line" id="Data_MaxConcurrentInstances" type="number" value="" data-val-number="The field Max concurrent instances must be a number." data-val="true" data-val-range-min="1" data-val-range-max="1000" data-val-range="The field Max concurrent instances must be between 1 and 1000.">

您设置测试字段值:7.

预期结果:验证成功.没有错误.

实际结果:验证失败.内部原因:它失败,因为字母串字符串"7"在字符串"1"和"1000"之后,而不是在它们之间.

问题:这个错误是否已知？最好的解决方法是什么？

我想创建一个这样的链接:

<a href="http://example.com">text</a>

并替换行为,以便链接在单击时使用Ajax下载内容.

对我来说重要的是不要替换href属性(因此复制链接仍然有效).

一种解决方案是:

$('link').onclick = function() { return false; };

但我想使用.observe方法.但这不起作用:

$('link').observe('click', function() { return false; });

(这很合乎逻辑).

有关如何实现这一目标的任何想法？

谢谢.

我有一个带有数据注释的模型,我是一个使用knockout模板绑定和映射插件的viewmodel动态绑定.我正在尝试对我的模型进行不显眼的客户端验证.在这种情况下我们如何做到这一点.任何帮助/建议？

public class MyUser
    {
        [Required]
        [StringLength(35)]
        public string Username { get; set; }

        [Required]
        [StringLength(35)]
        public string Forename { get; set; }

        [Required]
        [StringLength(35)]
        public string Surname { get; set; }
    }

在我看来,我是使用ajax动态模板绑定MyUser列表.

public JsonResult TestKnockout()
        {
            IList<MyUser> myUserList = new List<MyUser>();
            myUserList.Add(new MyUser { Username = "ajohn", Surname = "surname" });
            myUserList.Add(new MyUser { Username = "ajohn1", Surname = "surname1" });

            return Json(myUserList, JsonRequestBehavior.AllowGet);
        }
    }

视图:

<form id="Userform" action='@Url.Action("Save", "Home")' data-bind="template: {name: 'UserTemplate', foreach:UserList}">
<input type="Submit" name="name" …

我有一个网站的一部分,有多个类别的Widget.每个类别名称都有一个菜单.对于启用了Javascript的任何人,单击类别会显示页面中类别的内容.他们可以随意点击类别,看到DOM根据需要更新.该网址也使用标准哈希/ hashbang进行更新(如果我们对Google友好).因此,对于有人谁的土地上example.com/widgets,他们可以浏览周围example.com/widgets#one,example.com/widgets#two,example.com/widgets#three等.

但是,为了支持用户代理没有启用Javascript,以下分类链接中的一个必须加载新的页面中显示的类别,所以有人没有启用javascript,他们会浏览到example.com/widgets/one,example.com/widgets/two,example.com/widgets/three等.

我的问题是:当启用Javascript的人登陆其中一个URL 时会发生什么？例如,登陆时,应该向具有Javascript功能的人提供什么example.com/widgets/one？他们应该被重定向到example.com/widgets#one吗？

请注意,对于启用了Javascript的任何人,我需要单页网站体验,但我想要一个没有JavaScript的用户代理的多页网站.任何没有解决这个问题的答案都没有回答这个问题.我对hashbangs或单页面网站与多页面网站的优点或问题不感兴趣.

我有一个ASP.NET MVC项目,我想在文章中发布一篇文章然后在页面上显示该文章的片段.当用户注释时,我还想在保存到数据库后显示注释.我在这两种情况下使用AJAX和调用OnFailure和OnSuccess方法.

OnFailure保存帖子而不是注释时,该方法仅会启动(这是因为即使成功保存,页面也不会更新).OnSuccess根本没有调用该方法,因为我的页面没有更新.

我正在使用jquery 2.1.4并在我的项目中加载了jquery.unobtrusive-ajax脚本

这是我的代码.

//查看用于创建帖子

 @using (Ajax.BeginForm("Create", "Post",
new AjaxOptions
{
    HttpMethod = "POST",
    UpdateTargetId = "insertnewpostbelow",
    InsertionMode = InsertionMode.InsertAfter,
    OnSuccess = "postingSucceeded()",
    OnFailure = "postingFailed()"
}))
 {
  //View code left out 
 }

//服务器端用于保存帖子和更新 PartialView

 [HttpPost, ValidateAntiForgeryToken, ValidateInput(false)]
    public async Task<PartialViewResult> Create
        ([Bind(Include = "ID,Title,Message,PostedOn,isAbuse,By")] Post post)
    {
        if (ModelState.IsValid)
        {
            var list = new List<Post>();
            list.Add(post);

            try
            {
                db.Posts.Add(post);
                await db.SaveChangesAsync();

                return PartialView("_Posts", list);
            }
            catch …

我使用MVC DataAnnotations和jQuery不引人注目的javascript库编写了一个自定义验证器.它工作得很好.我现在唯一的问题是,在初始验证之后,如果用户编辑了该字段,则它会在每次击键时触发验证器.由于验证器访问Web服务以验证输入,我宁愿它只是在用户离开字段或提交表单时验证输入.有没有办法改变这种行为？这是我的代码:

<script type="text/javascript">
    $.validator.addMethod("validate_zipcode", function (value, element) {
        if (value == null || value.length == 0) {
            return true;
        }

        var isValid = false;
        $.ajax({
            async: false,
            dataType: "json",
            url: "/api/iszipvalid/" + value,
            success: function (response) {
                isValid = response;
            }
        });

        return isValid;
    });

    $.validator.unobtrusive.adapters.addBool('zipcode', 'validate_zipcode');
</script>

我有一个创建表单来创建一个对象.如果选中了复选框并且标记为必需(通过模型中的属性),则创建模型具有一些仅可见的属性(.hide,.show()).

不幸的是,如果未选中该复选框,则会对隐藏的属性执行所需的验证.

如何禁用此属性所需的验证？

我尝试将input元素的data-val属性设置为false,但这不起作用.

有点想法吗？

在此先感谢Tobias

更新:

这是java脚本代码.data-val属性设置为false.似乎验证不关心这个属性.还有data-val-required属性,但有一个我无法备份的文本.

$(function () {
                $("#MyCheckbox")
                    .change(function () {
                        if (this.checked) {
                            $("#divWithChildProperties [data-val]").attr("data-val", true);
                            $("#divWithChildProperties ").show();
                        }
                        else {
                            $("#divWithChildProperties [data-val]").attr("data-val", false);
                            $("#divWithChildProperties ").hide();
                        }
                    })
            });

我想在我的rails应用程序中的'new'-view上每3秒重新加载一个部分.

我有这个 new.html.erb

<h1>Controller#new</h1>
This is my static content
<%= render partial: 'dynamic' %>
More Static content

如何每隔3秒重新加载一次？我必须使用不引人注目的JavaScript吗？我怎样才能通过ujs实现这一目标？

我在BundleConfig.cs文件中包含以下行:

bundles.Add(new ScriptBundle("~/bundles/jqueryajax").Include(
  "~/Scripts/jquery.unobtrusive-ajax.min.js"));

但是,当我尝试在其他脚本中呈现它时,它被跳过了.

以下是我渲染脚本的方法:

@Scripts.Render(
    "~/bundles/jquery",
    "~/bundles/jqueryui",
    "~/bundles/jqueryajax",
    "~/bundles/jquerytree")

这是输出HTML,省略了jqueryajax包:

<script src="/Scripts/jquery-1.9.1.js"></script>
<script src="/Scripts/jquery-ui-1.10.2.js"></script>
<script src="/Scripts/jquery.jstree.js"></script>