jquery - Jquery/ASP.NET プロジェクトが正しく動作しません。ほぼ同じ jsfiddle が期待どおりに動作します

Question

期待どおりに動作しない JQuery/ASP.NET プロジェクトがありますが、JSFiddle の実質的に同一のコードは期待どおりに動作します。フォームで [Click Me] をクリックするとポップアップするはずの alert() に変数としてテキストを渡すだけです。最終的には AJAX 呼び出しを使用してコードビハインドに戻す予定ですが、まず最初に、AJAX 呼び出しと関数を無視します。まだ使用していません。

これが JS です (以下の ASP では「OnlineRMA.js」として参照されます)。

$("#button").on('click', function () {
var test = $("#SBE_Services").val();
alert(test);
//asyncServerCall(test);
}); 

function asyncServerCall(userid) {
$.ajax
(
    {
        url: 'WebForm1.aspx/GetData',
        type: "POST",
        data: "{'userid':" + userid + "}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            alert(data.d);
        }
    }
);
}
$(document).ready(function () {
$("#SBE_Services").dropdownchecklist();
});

ASPX は次のとおりです。

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

<!DOCTYPE html>
<script src="Scripts/jquery-1.9.1-vsdoc.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.10.3.custom.js" type="text/javascript"></script>
<script src="Scripts/ui.dropdownchecklist-1.4-min.js" type="text/javascript"></script>
<script src="Scripts/onlinerma.js" type="text/javascript"></script>

<html>
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
    <div>
        <label for="SBE_services">Requested Services</label>
        <select id="SBE_Services" multiple="multiple">
            <optgroup label="Calibration">
                <option>Temperature</option>
                <option>Conductivity</option>
                <option>Pressure</option>
                <option>Dissolved Oxygen</option>
                <option>pH</option>
            </optgroup>
            <optgroup label="Repairs">
                <option>O-Ring Replacement &amp; Inspection</option>
                <option>Hydrostatic Test</option>
                <option>Diagnose &amp; Repair Problems</option>
                <option>Replace Anti-Foulant Devices</option>
                <option>Download Data From Instrument</option>
            </optgroup>
            <optgroup label="Third Party Sensors">
                <option>Fluorometer</option>
                <option>Transmissometer</option>
                <option>Turbidity</option>
                <option>SUNA</option>
                <option>PAR</option>
            </optgroup>
        </select>
        <input type="button" id="button" value="Click me" />
    </div>
</form>
</body>
</html>

そして最後に、ここに作業フィドルがあります

フィドルで、[要求されたサービス] の右側をクリックして、いくつか選択します (少なくとも 1 つを選択していれば、いくつでもかまいません。選択していない場合は、まだエラー処理が行われません)。次に「Click Me」をクリックします。選択した内容が一覧表示された JS アラートが表示されます。ASP プロジェクトでは、これは機能しません。その理由がわかりません。唯一の違いは、わずかにカスタマイズされた JQuery-UI ですが、これは問題ではないと思います。dropdownchecklist が機能しているため、外部ファイルに JS が表示されていることがわかります。JS アラートが表示されない理由がわかりません。

健全性チェックとして、同じものをすべて含む HTML のみのページを作成し (基本的に最初の行を引き出し、「runat」ステートメントをすべて削除しました)、代わりに JQuery および JQuery-UI の CDN バージョンも指摘しました。私のローカルのものを指しているのですが、同じ動作をしていますが、アラートはありません。これは、ASP の問題ではなく、おそらく JQuery の問題でもないことを示しています。アラートを次のように変更しまし alert("test");た。無駄に。私は何が欠けていますか？たぶん、パスの構成が間違っていますか？これは私を夢中にさせています！

編集: 今朝、JQuery からの CDN 参照を使用して HTML ファイルを再構築しましたが、期待どおりに動作するようになりました。HTMLは次のとおりです。

<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>
<script src="Scripts/ui.dropdownchecklist-1.4-min.js" type="text/javascript"></script>
<script src="Scripts/onlinerma.js" type="text/javascript"></script>

</head>
<body>
<form id="form1">
    <div>
        <label for="SBE_services">Requested Services</label>
        <select id="SBE_Services" multiple="multiple">
            <optgroup label="Calibration">
                <option>Temperature</option>
                <option>Conductivity</option>
                <option>Pressure</option>
                <option>Dissolved Oxygen</option>
                <option>pH</option>
            </optgroup>
            <optgroup label="Repairs">
                <option>O-Ring Replacement &amp; Inspection</option>
                <option>Hydrostatic Test</option>
                <option>Diagnose &amp; Repair Problems</option>
                <option>Replace Anti-Foulant Devices</option>
                <option>Download Data From Instrument</option>
            </optgroup>
            <optgroup label="Third Party Sensors">
                <option>Fluorometer</option>
                <option>Transmissometer</option>
                <option>Turbidity</option>
                <option>SUNA</option>
                <option>PAR</option>
            </optgroup>
        </select>
        <input type="button" id="button" value="Click me" />
    </div>
</form>
</body>
</html>

また、JQuery の代わりに純粋な JS を使用するボタンだけを含む別のページを作成しました。ASP.NET ページ内で完全に機能したため、JQuery や JQuery-UI、またはドロップダウンチェックリストと関係があります。関数呼び出しの代わりに JQuery セレクターを追加すると、機能しなくなりました。JQのどれが原因かを突き止めようと思います。

編集2：

onclickシンプルな入力ボタンと対応する JQuery セレクターを使用してイベントに応答する必要最小限の ASP.NET プロジェクトを構築します。新しい ASP.NET プロジェクトを開始し、既定の名前を受け入れ、Web ページをプロジェクトに追加し (既定の名前も受け入れます)、それを開始ページにします。ページのコードは次のとおりです。他のファイルは変更していません。

答えにジョンの提案を組み込んだ編集3、そしてそれは今動作します：

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

<!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">
<script src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1-vsdoc.js' type='text/javascript'></script>
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>
<script src="http://dropdown-check-list.googlecode.com/svn/trunk/doc/ui.dropdownchecklist-1.4-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#button").on('click', function() {
        alert("You clicked the button");
    });
});
</script>
<head id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input type="button" id="button" value="Click Me"/>
    </div>
    </form>
</body>
</html>

JQuery 関連の<script>呼び出しはすべてさまざまな CDN リソースに対するものであるため、これを機能させるために何かをダウンロードする必要はありません。他の誰かが以前にこれに遭遇したに違いありませんが、この特定の問題について話しているものを Web 上で見つけるのは驚くほど困難です。

score 1 · Accepted Answer

このコード:

$("#button").on('click', function () {
var test = $("#SBE_Services").val();
alert(test);
//asyncServerCall(test);
});

$(document).ready(function(){}); 内にある必要があります。

そのようです：。

$(document).ready(function(){

    $("#button").on('click', function () {
    var test = $("#SBE_Services").val();
    alert(test);
    //asyncServerCall(test);
    }); 


    $("#SBE_Services").dropdownchecklist();
});

jquery - Jquery/ASP.NET プロジェクトが正しく動作しません。ほぼ同じ jsfiddle が期待どおりに動作します

1 に答える 1

Related

Reference