无法调用外部jquery文件

Question

I am unable to call the external jquery file. 我无法调用外部jquery文件。 The code that is in the same aspx page is working but the external js is not working. 同一aspx页面中的代码可以正常工作，但是外部js无法正常工作。 Please help - 请帮忙 -

My aspx Page code: 我的aspx页面代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="loginvalidation.Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js" type="text/javascript"></script>
    <script src="http://jquery.bassistance.de/validate/additional-methods.js" type="text/javascript"></script>
     <script src="JScript1.js" type="text/javascript"></script>

</head>
<body">
    <form id="form1" runat="server">
    <div>
    <table>
        <tr>
            <td>Username:</td>
            <td><asp:TextBox ID="txtUserName" runat="server"></asp:TextBox></td>
        </tr>
        <tr>
            <td>Password:</td>
            <td><asp:TextBox ID="txtPassword" runat="server"></asp:TextBox></td>
        </tr>
        <tr>
            <td>
                <asp:Button ID="Button1" runat="server" Text="Button" />
            </td>
        </tr>
    </table>
    </div>
    </form>
</body>
</html>

My external jquery code: 我的外部jQuery代码：

$(document).ready(function() {
    $("#form1").validate({
        rules: {
            <%=txtUserName.ClientID %>: {
                required: true,
                email: true
            },
            <%=txtPassword.ClientID %>: {
                required: true,
                digits:true,
                minlength:10,
                maxlength:10
            }
        }, 
        messages: {
            <%=txtUserName.ClientID %>:{
                required: "* Required Field *"
            },
            <%=txtPassword.ClientID %>:{
                required:"* Required Field *"
            }
        }
    });
});

Answer 1

You have to replace <%=txtUserName.ClientID %> and <%=txtPassword.ClientID %> with generated client IDs when you move the script to external js file. 将脚本移动到外部js文件时，必须用生成的客户端ID替换<%=txtUserName.ClientID %>和<%=txtPassword.ClientID %> 。

Thanks ! 谢谢！

Answer 2

Server Side code like <%=txtUserName.ClientID %> will not be work in JS file. 服务器端代码（如<%=txtUserName.ClientID %>在JS文件中不起作用。 They will not be parsed and will be rendered as simple text. 它们将不会被解析，并将呈现为简单文本。

You can use the rules add function . 您可以使用规则添加功能。

In ASPX Page, Add a CSS class (Here I have added username ) 在ASPX Page中，添加一个CSS类（在此我添加了username ）

<asp:TextBox ID="txtUserName" runat="server" CssClass="username"></asp:TextBox>

In Your External File 在您的外部文件中

jQuery(function() {

    jQuery('form').validate(); 

    // Use custom class added to input and add rules like this
    jQuery('.username').rules('add', { 
        required: true, 
        email: true,
        messages: { 
            required: "* Required Field *" 
        } 
    });
});

Answer 3

Add the script complete path like 添加脚本完整路径，例如

<script src="~/foldername/foldername/JScript1.js"></script>

you just need to pick the file and drop to the page in visual studio. 您只需要选择文件并拖放到Visual Studio中的页面即可。

And also as comment suggested <%=txtUserName.ClientID %> these are asp.net code that would not work in javascript external file. 另外，正如注释建议的<％= txtUserName.ClientID％>一样，这些都是无法在javascript外部文件中运行的asp.net代码。

In place of it please follow any of the solution 代替它，请遵循任何解决方案

Solution 1 解决方案1

Either use StaticId on controls or page by setting ClientIdMode = "Static". 通过设置ClientIdMode =“ Static”，可以在控件或页面上使用StaticId。 you can find more details on link 您可以在链接上找到更多详细信息

like 喜欢

<asp:TextBox id="txtUserName" runat="server" ClientIdMode ="static" />

After setting it you can aceess your controls like 设置好之后，您就可以像

$('#txtUserName')

Solution 2 解决方案2

Look into your html page that is rendered by Asp.net engine. 查看由Asp.net引擎呈现的html页面。 Asp.net engine convert the controls id depends on Master page used and append it on the control id. Asp.net引擎转换控件ID取决于所使用的母版页，并将其附加在控件ID上。 Now rendered controlId should be look like 'ct100_txtUserName' and you can get your control like 现在呈现的controlId应该看起来像“ ct100_txtUserName”，您可以像

$('#ct100_txtUserName')

Solution 3 解决方案3

Add classes on controls like 在类似的控件上添加类

<asp:TextBox id="someId" CssClass="someClass" runat="server" />

and get the control like 并得到像

$('.someClass')

But the last one is slow compare to other 但是最后一个比较慢

无法调用外部jquery文件

问题描述

3 个解决方案

解决方案1
2 2014-07-07 10:07:38

解决方案2
2 2014-07-07 10:13:45

解决方案3
0 2014-07-07 10:03:21

无法调用外部jquery文件

问题描述

3 个解决方案

解决方案1 2 2014-07-07 10:07:38

解决方案2 2 2014-07-07 10:13:45

解决方案3 0 2014-07-07 10:03:21

解决方案1
2 2014-07-07 10:07:38

解决方案2
2 2014-07-07 10:13:45

解决方案3
0 2014-07-07 10:03:21