标签: unobtrusive-javascript

我正在测试具有不引人注目的验证的表单，其后面没有运行 MVC 控制器，并且 html 是手写的，仅用于测试（以找出它为什么不起作用）而不用于生产。

当表单提交时，单选按钮不会发生任何事情（没有错误消息，例如不会进行任何验证），而同一表单中的文本字段则可以很好地给出验证错误。

我已经扔掉了我能想到的任何东西，示例只需要验证器单选按钮和错误消息范围，仅此而已，但它仍然不起作用。

我一定在这里遗漏了一些明显的东西，当有人指出我的错误时，我可能会觉得自己像个白痴，但我仍然不能在这上面花更多的时间。

<form>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>
  <script src="https://ajax.aspnetcdn.com/ajax/mvc/5.0/jquery.validate.unobtrusive.min.js"></script>
  <div class="quote-form__question fl--title">
    <div class="split-input--left">
      <input class="tooltip form-control input " data-val="true" data-val-length="Please enter a firstname with no more than 20 characters" data-val-length-max="20" data-val-regex="Please enter First name with letters only" data-val-regex-pattern="^ *?[a-zA-Z]+[ a-zA-Z-_']*$"
      data-val-required="Please enter your first name" id="CustomerFirstname" maxlength="20" name="CustomerFirstname" placeholder="Name" tabindex="" type="text" value="">
      <div class="field-validation-error-container">
        <span class="field-validation-valid field-validation-error" data-valmsg-for="CustomerFirstname" data-valmsg-replace="true"></span>
      </div>
    </div>
  </div>
  <div class="label-row-full-width">
    <label for="q1-1" class="label--un-checked">
      <span>Mr</span>
      <input type="radio" class="js-check-style js-toggle-question js-show-button" …

我一直在我的mvc 3项目中实现新的不引人注目的javascript(使用RC1).我已将3个必需的脚本添加到"主"布局页面.一切都运作良好.

但是我有一个视图,我想使用一些普通的jquery验证来验证文本框.确切地说,我想检查一个条目是否存在,并且它是数字的.

所以在页面上我的js看起来像......

<script language="javascript" type="text/javascript">
$(document).ready(function(){
    $('#SomeForm').validate({
        errorClass: "field-validation-error",
        validClass: "field-validation-none",
        errorElement: "label",
        rules: {
            ItemCount: {
                required: true,
                number: true
            }
        },
        messages: {
            ItemCount: {
                required: "Please specify the number of items available",
                number: "Please specify a valid number"
            }
        }
    });
});

然而,这不起作用.所以在我的主布局页面上,我注释掉了对jquery.validate.unobtrusive.min.js文件的引用,并且嘿presto它工作.

所以我想,必须与不引人注目的零碎相关,所以如果我把它关闭(我会读到你可以),一切都会好起来的.

因此,在视图页面中,我添加了以下行

Html.EnableUnobtrusiveJavaScript(false);

但没有快乐.我能让它工作的唯一方法是删除对不显眼的js文件的引用.

当然不可能是这种情况.我一定是在瞎了吗？

感谢:D

如果你有

<div id="data" onclick="handleData(1)">Datum 1</div>

而你想要晚绑定:

<div id="data">Datum 1</div>
<script>
    $("#data").click(function() {
        handleData(1);
    })
</script>

你如何传递参数1？你必须做这样的事情:

<div id="data" data="1">Datum 1</div>
<script>
    $("#data").click(function() {
        handleData($(this).attr("data"););
    })
</script>

CSS标记侦探建议在存在带有href =＃的链接时改善标记。

拥有href =＃是不良做法还是不良标记？在某些情况下，尤其是。对于不打扰的人，这是唯一的方法，对吗？

这是一个需要改进的示例：

<a href="#">Cancel</a>

我只是通过在html.erb页面中添加以下标记,在我的rails应用程序上添加了一个像facebook一样的按钮:

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=1419...&amp;xfbml=1"></script><fb:like href="" send="" width="100" show_faces="" font="" layout="button_count" action="recommend"></fb:like>

而且......工作正常但我在facebook sdk正在加载时在页面上有一个很大的空白区域.所以,我想我会尝试将它放在我的application.js文件中并在加载页面后运行该函数.唯一的问题是我无法让这个工作:)

到目前为止,我在html中保留了"fb-root"div,并将以下函数放入application.js

$(function() {
    $('#fb-root').after('<script src="http://connect.facebook.net/en_US/all.js#appId=1419...&amp;xfbml=1"></script><fb:like href="" send="" width="100" show_faces="" font="" layout="button_count" action="recommend"></fb:like>');
});

但是,这对我不起作用,我无法弄清楚为什么(我是js newb).任何帮助将不胜感激.谢谢!

我想将HTML5 文件API与不引人注目的JavaScript一起使用.但我只能通过从HTML调用JavaScript函数来实现它.有没有办法使用不引人注目的JavaScript的文件API？

并非所有浏览器都支持File API,但我已在Google Chrome和Firefox中尝试过此操作.

从文档中可以看出:

<input type="file" id="input" onchange="handleFiles(this.files)">

我尝试过这种不起作用的JavaScript不起作用:

window.onload = function() {
    var input2 = document.getElementById('input2');
    input2.addEventListener('onchange', handleFiles);
}

下面是一个完整的例子,可以在jsFiddle上测试.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script>
window.onload = function() {
    var input2 = document.getElementById('input2');
    input2.addEventListener('onchange', handleFiles);
}

function handleFiles(e) {
    alert('got files');
}
</script>
</head>
<body>
<h1>Test</h1>
<input type="file" id="input1" onchange="handleFiles(this.files)"/>
<input type="file" id="input2"/>
</body>
</html>

我想开始使用Ajax事件ajax:success,ajax:failure,ajax:complete和ajax:beforeSend,建议用于以下帖子中的不显眼的Javascript:

• http://www.simonecarletti.com/blog/2010/06/unobtrusive-javascript-in-rails-3/
• http://www.alfajango.com/blog/rails-3-remote-links-and-forms/

但由于某种原因,它不适合我.我错过了一些东西(小东西),因为我无法让事件触发我的Javascript.我希望有人能在我的代码中发现"明显的"错误/遗漏.

关于我的环境的一些细节:

• Rails 3.1
• jQuery(jquery-rails gem)
• 用于服务器端js处理的therubyracer(不是说它对我的例子来说很重要)

为了尝试找出我所缺少的东西,我创建了一个简单的测试应用程序,它只有一个远程按钮.单击按钮时,我想要触发警报框.这个应用程序的代码可以在github上看到:

http://github.com/jpmcgrath/rbtest

我已将应用程序部署到heroku:

http://rbtest.heroku.com/projects/

如果你查看应用程序,你可以单击按钮,按钮成功创建一个新项目(看它手动刷新),但ajax:成功事件似乎不会发生？

代码的内容如下:

在projects_controller.rb中

def remote_test
  @project = Project.new(:name => "remote test")

  respond_to do |format|
    if @project.save
      puts "project saved!\n\n\n"
      format.html { redirect_to @project, notice: 'Project was successfully created.' }
      format.json { render json: @project, status: :created, location: @project }
    else
      format.html { render action: "new" }
      format.json { render json: @project.errors, status: :unprocessable_entity }
    end
  end
end

在application.js中

jQuery(document).ready(function() {

  jQuery(".remote_button").click(function() {
    alert('Handler for .click() called.'); …

__PRE__

Potentially dangerous code below, line 2
Repeat: POTENTIALLY DANGEROUS CODE BELOW

好的,这是我第四次将JavaScript代码放入冻结的浏览器中.这让我的电脑震惊了.这些惊恐发作是否会摧毁她的心脏？在我继续学习和练习JavaScript时,我在哪里可以了解可能会破坏我的计算机的所有废话？我正在寻找一份详尽的清单.

我在jquery 1.7中使用它.我一直在 - jQval is undefined错误.

这是我加载脚本的方式.

$.ajax({
    url: "http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.js",
    dataType: "script",
    cache: true,
    success: callback
});

我也尝试将它直接加载到头部 - 同样的错误

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.js" type="text/javascript"></script>

我正在开发一个网页,其中包含复选框,这些复选框在单击或更改时会执行某些操作.HTML本身没有明确的事件绑定.我完全不知道事件绑定是如何完成的,当复选框被更改时,无法找到正在运行的JavaScript(除了页面在其他地方使用jQuery).

JavaScript本身分布在HTML本身的几个位置,还有一大堆额外的JavaScript文件.这将使得在JavaScript中无处不在的断点处变得困难.

有没有办法,例如,使用一些调试环境,找出更改这些复选框的值时运行的JavaScript？