标签: unobtrusive-javascript

在以前的生活中,我可能做过这样的事情:

<a href="#" onclick="f(311);return false;">Click</a><br/>
<a href="#" onclick="f(412);return false;">Click</a><br/>
<a href="#" onclick="f(583);return false;">Click</a><br/>
<a href="#" onclick="f(624);return false;">Click</a><br/>

现在使用jQuery,我可能会这样做:

<a class="clicker" alt="311">Click</a><br/>
<a class="clicker" alt="412">Click</a><br/>
<a class="clicker" alt="583">Click</a><br/>
<a class="clicker" alt="624">Click</a><br/>

<script language="javascript" type="text/javascript">
    $(".clicker").bind("click", function(e) {
        e.preventDefault();
        f($(this).attr("alt"));
    });
</script>

除了使用alt属性将数据从DOM传递给jQuery感觉就像一个黑客,因为这不是它的预期目的.这里存储/隐藏DOM中的数据以供jQuery访问的最佳实践是什么？

在Rails 3应用程序中,只要切换某个复选框,我想让浏览器调用远程函数.在Rails 2中,通过传递很容易做到

:onclick => remote_function(...)

到复选框助手.在Rails 3中,不推荐使用remote_*函数,因此我尝试了以下解决方法:

• 使用复选框创建一个表单 form_tag ... :remote => true
• 通过$("dummy_form").submit();从onclick处理程序调用提交表单

与Rails捆绑在一起的rails.js文件是一个侦听submit事件的观察者.但是,这些似乎仅在用户单击提交按钮时触发,而不是在form.submit()调用时触发(到目前为止仅在FF中测试).

这具有不希望的效果,即提交不是通过AJAX在后台完成,而是通常的方式,因此浏览器离开当前站点并显示来自控制器的响应.

有没有人知道解决方法？也许是一种完全不同的方式来获得相同的功能？

我似乎无法使用具有多个desciption项(dd)的定义列表的jQuery Accordions.作者的例子只有单个dd项.

在下面的例子B2中,B3和C2显示onLoad,而不是像我希望的那样隐藏A1,B1和C1.

我怎么做到这一点？

jQuery('dl').accordion({ 
    event: 'click',     
    active: false, 
    animated: "bounceslide", 
    header: "dt" 
});?

<dl>

    <dt>A</dt>
    <dd>A1</dd>

    <dt>B</dt>
    <dd>B1</dd>
    <dd>B2</dd>
    <dd>B3</dd>

    <dt>C</dt>
    <dd>C1</dd>
    <dd>C2</dd>

</dl>

(直播jsFiddle版)

我们有一个局部视图,其中包含一个启用了不显眼的客户端验证的表单.

如果我们使用Html.Action加载局部视图,则验证在客户端工作.

如果用户单击链接时我们使用JQuery使用局部视图填充div,则客户端验证始终返回true.

知道发生了什么事吗？

我正在玩一些基于MvcMusicStore示例的商店,并且在使用MVC3 Ajax.ActionLink/Ajax.RouteLink助手时遇到了一些问题.问题是它根本不生成Ajax请求(Request.IsAjaxRequest()== false).我使用Ajax.BeginForm/Ajax.BeginRouteForm生成的表单虽然很好用.

配置:

<appSettings>
    <add key="ClientValidationEnabled" 
         value="true"/>
    <add key="UnobtrusiveJavaScriptEnabled" 
         value="true"/>
</appSettings>

脚本:

    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

链接:

@Ajax.ActionLink("show cart", "Show", "Cart", new AjaxOptions() { OnSuccess = "handleSuccess", HttpMethod = "Get", OnFailure = "handleFailure" })

生成HTML:

<a data-ajax="true" data-ajax-failure="handleFailure" data-ajax-method="Get" data-ajax-success="handleSuccess" href="/Cart/Show">show cart</a>

如上所述,这很好用:

@using (Ajax.BeginForm(
        "Show",
        new { controller = "Cart" },
        new AjaxOptions
        {
            OnSuccess = "handleSuccess",
            OnFailure = "handleFailure"
        }))
    {
        <input type="submit" class="button" />
    }

该动作如下所示:

[Authorize]     
public …

id="IsRecurring"当 Razor 视图发送到浏览器时，以下标记会生成一个复选框类型的输入。

<div class="editor-label">
    @Html.LabelFor(model => model.IsRecurring)
</div>

<div class="editor-field">
    @{
        @Html.EditorFor(model => model.IsRecurring)
    }
</div>

我需要根据复选框的选中状态显示/隐藏其他标记块。

最MVC3的方式是哪一种？

我的计划是在 div 上方添加以下脚本：

<script type="text/javascript">
    $("#IsRecurring").click(function () {
        do show hide;
    });
</script>

我的视图标记中放置脚本的适当位置在哪里？有没有更好的方法可以引用IsReccuring复选框，而不是提前知道它会有什么 Id？

我有一个昂贵的表单操作，它在服务器上构建一个 zip 文件并将其返回给浏览器。

<form action='/download' method='post'>

<input type='submit' value='download'/>

</form>

我想在单击按钮时阻止页面，以便用户不会重复点击按钮。

但是我想在表单返回后取消阻止页面。

如何在成功完成表单时触发事件？

（我知道我可以通过将表单更改为 ajax 提交来触发此操作，但随后不会出现保存文件对话框...）

有什么建议？

谢谢

我最近正在阅读 Unobtrusive javascript 并决定试一试。我是否决定使用这种风格将在以后确定。这只是为了我自己的好奇心，而不是任何有时间限制的项目。

现在，我正在查看示例代码，很多示例似乎都在使用，这让我永远发现了 jQuery。他们使用像 $('class-name').whatever(...); 这样的函数。

好吧，我更喜欢 $('class').function 的外观，所以我尝试在不使用 jQuery 的情况下模拟它（因为我不知道 jQuery 并且不关心它 atm）。但是，我无法使这个示例工作。

这是我的 jsFiddle：http : //jsfiddle.net/dethnull/K3eAc/3/

<!DOCTYPE html>
<html>
<head>
    <title>Unobtrusive Javascript test</title>
<script>
    function $(id) {
        return document.getElementById(id);
    }

    $('tester').onclick(function () {
        alert('Hello world');
    });
</script>
<style>
    .styled {
        width: 200px;
        margin-left: auto;
        margin-right: auto;
        font-size: 2em;
    }
    a {
        cursor: pointer;
        color: blue;
    }
    a:hover {
        text-decoration: underline;
    }   
</style>
</head>
    <body>
        <div class='styled'>
            <ul>
                <li><a id='tester'>CLICK ME</a></li>
            </ul>

         </div> 
     </body>
</html>

我原以为当您单击链接时会弹出一个警告框，但似乎没有发生。在 …

我有一个输入元素

<select id="test"></select>

在改变我想要调用多个功能

$('#test').change(function1, function2);

现在的功能只是现在的警报

var function1 = function(){alert('a');};
var function2 = function(){alert('b');};

只调用第二个函数.我知道这是因为警报和刹车点.我知道纠正这种方法的一种方法是从另一个函数调用function1和function2,但我想避免这种情况.

我已经安装了Scott的Kirkland DataAnnotationsExtensions.

在我的模型中,我有:

[Numeric]
public double expectedcost { get; set; }

在我看来:

@Html.EditorFor(model => model.expectedcost)

现在,当页面尝试渲染时,我收到以下错误:

不显眼的客户端验证规则中的验证类型名称必须是唯一的.以下验证类型不止一次出现:数字

任何想法为什么我收到错误？