[Javascript] 私のjQueryボタンハンドラが起動しないのはなぜですか?


Answers

あなたのコードは私のために働く: http : //codepen.io/danielvaughn/pen/jrNoko

jQueryを正しくインポートしていますか? そうでない場合は、コンソールでいくつかのjquery関数を実行して、動作していることを確認してください。

<button class="btn green smallbutton" id="btnGetData" name="btnGetData">SUBMIT</button>
Question

私はクリックされたボタンに応答してRESTメソッドを呼び出すためにこのjQueryを持っています:

$(document).ready(function() {
    $("#btnGetData").click(function() {
    alert("The button was clicked.");

    var unitval = _unit; 
    var begdateval = _beginDate;
    var enddateval = _endDate; 

    var model = JSON.stringify({ unit: unitval, begdate: begdateval, enddate: enddateval });
    $.ajax({
        type: 'GET',
        url: '@Url.Action("GetQuadrantData", "LandingPage")',
        data: { unit: unitval, begdate: begdateval, enddate: enddateval},
        contentType: 'application/json',
        cache: false,
        success: function (returneddata) {
        },
        error: function () {
            alert('hey, boo-boo!');
        }
        });

    }); // button click
}); // ready

RESTメソッドが呼び出されているだけではありません。このハンドラは、アラートが表示されない(「 ボタンがクリックされた 」、「 やあ、ブー・ブー!

スクリプト追加されています。私はそれを進めることができ、vars(例えば、 "unitval")に適切な値が割り当てられています。

だからなぜボタンをクリックするのですか?これは次のように宣言されています:

<button class="btn green smallbutton" id="btnGetData" name="btnGetData">SUBMIT</button>

...何もしない?

これは(View> Page Sourceから)追加されるスクリプトです:

<script>$(document).ready(function() {$("#btnGetData").click(function() {alert("The button was clicked.");var unitval 
= ABUELOS;var begdateval = 2016-08-21;var enddateval = 2016-08-27;var model = JSON.stringify({ unit: unitval, begdate: 
begdateval, enddate: enddateval });$.ajax({type: 'GET',url: '@Url.Action("GetQuadrantData", "LandingPage")',data: { 
unit: unitval, begdate: begdateval, enddate: enddateval},contentType: 'application/json',cache: false,success: 
function (returneddata) {},error: function () {alert('hey, boo-boo!');}});});});</script>

これは適切ではないかもしれませんが(これはとにかく)、これはそのボタンから呼び出すRESTメソッドです:

public class LandingPageController : ApiController
. . .
    [Route("{unit}/{begdate}/{enddate}")]
    public HttpResponseMessage GetQuadrantData(string unit, string begdate, string enddate)
    {
        _unit = unit;
        _beginDate = begdate;
        _endDate = enddate;
        string beginningHtml = GetBeginningHTML(); // This could be called from any page to reuse the same "header"
        string top10ItemsPurchasedHtml = GetTop10ItemsPurchasedHTML();
        string pricingExceptionsHtml = GetPricingExceptionsHTML();
        string forecastedSpendHtml = GetForecastedSpendHTML();
        string deliveryPerformanceHtml = GetDeliveryPerformanceHTML();
        string endingHtml = GetEndingHTML();
        String HtmlToDisplay = string.Format("{0}{1}{2}{3}{4}{5}",
            beginningHtml,
            top10ItemsPurchasedHtml,
            pricingExceptionsHtml,
            forecastedSpendHtml,
            deliveryPerformanceHtml,
            endingHtml);

        return new HttpResponseMessage()
        {
            Content = new StringContent(
                HtmlToDisplay,
                Encoding.UTF8,
                "text/html"
            )
        };
    }

更新

これはコンソールからのエラーダンプです:

Failed to find a valid digest in the 'integrity' attribute for resource 'https://code.jquery.com/jquery-1.12.4.min.js' with computed SHA-256 integrity 'ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ='. The resource has been blocked.

Uncaught Error: Bootstrap's JavaScript requires jQuery

Failed to load resource: the server responded with a status of 404 (Not Found)

Uncaught Error: Bootstrap's JavaScript requires jQuery

Uncaught ReferenceError: $ is not defined

Failed to load resource: the server responded with a status of 404 (Not Found)

更新2

私はjQueryを追加しています。 私は私の "頭"のセクションにこれを持っています:

<script src='https://code.jquery.com/jquery-1.12.4.min.js' integrity='sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk=' crossorigin='anonymous'></script>
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet' />
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>

更新3

いくつかの提案をここに組み込むと、これは私の実行中のページソースです(ボタンはまだ応答しません):

ABUELOShttpsの利用可能なレポート://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css 'rel =' stylesheet '/>https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/ js / bootstrap.min.js '>ボディ{パディングトップ20px;パディングボトム20px;バックグラウンドカラー:ホワイト;} hr {border:0; height:1px; color:navy; background:#333; margin左辺:-4; margin-right:-4;} table {font-family:arial、sans-serif; font-size:13px; border-collapse:collapse; width:100%;} td、th {border: 1px solid #dddddd; text-align:左;パディング:8px;}ラベル{white-space:pre; {-webkit-box-shadow:-1px 0 5px 0#000000; -webkit-box-shadow:-1px 0 5px 0}}:nth- rgba(0、0、0、.25); box-shadow:-1px 0 5px 0#000000; box-shadow:-1px 0 5px 0 rgba(0、0、0、.5);パディング - 左:1px jumbotronjr {padding:2px; margin-top:-12px; margin-bottom:-24px; font-size:21px; font-weight:200; color:inherit;パディング右:1px;パディングボトム:15px;} ; background-color:white;} titletext {font-size:2.1em; color:darkgreen; font-family:カンダラ、カリブリ、カンブリア、セリフ; margin-left:-32px;} titletextjr {font-size:1.4フォントファミリ:カンダラ、カリブリ、カンブリア、セリフ、マージン左:-32px;} cccsfont {font-size:0.25em!important; font-family:Calibri、Candara、Cambria、serif!フォントサイズ:11px;フォント幅:100; margin-left:16;} addltopmargin {margin-top:8px; } .sectiontext {font-size:1em; font-weight:太字; font-family:カンダラ、カリブリ、カンブリア、セリフ;コロ 4px;重要:余白 - 左:8px!重要;余白 - 下:8px;}:緑;余白 - 上:-4px;}余白 - 下:2px; {font-weight:bold;} rightjustifytext {text-align:right;} topleft {margin-top:{color:red;}} 8px; margin-left:12px; margin-bottom:8px; padding:16px; border:1px solid black;} topright {margin-top:-8px; margin-right:12px; margin-bottom:8px; margin-左:-12px;パディング:16px;境界:1px黒;} bottomleft {margin-left:12px; padding:16px; border:1px solid black;} bottomright {margin-right:12px; margin-left: 12px; padding:16px; border:1px solid black;} topright、.topleft {height:408px; } .bottomright、.bottomleft {height:408px; } .leftmargin12 {margin-left:12px!important;}顧客ダッシュボード
8月21日の週にアベロスがGO

上位10項目PurchasedItem CodeDescriptionQty156100ONIONS、YELLOW JUMBO 50#362226150AVOCADOS、ABUELOS-HASS 70CT 23#358163150PEPPERS、アナハイムGREEN 20#282176000POTATOES、50#266188301TOMATOES RED A、ROMA HOT HOUSE 25#230167150PEPPERS、ポブラノ18から20#202189300TOMATILLOS、30#NO HUSK168170150PEPPERS 、GRN CH 1&1/9 BU(18-26#)163122500LETTUCE、ICEBERG LINER 24 CT133127100LETTUCE、ROMAINE 24 CT 129価格設定例外 - ウィークリーRecapRedは、7/31/2016PROの価格決定週間にWeyandの契約商品オーバーラップを表します。要約例外例外合計の割合%205299.02 Hardies Dallas1,5970100.00%Hardies South612199.84%Go Fresh 4820100.00%Segovias1,360299.85%Potato Spec1,6050100.00%TOTAL5,861599.79%予測消費額 - $ 9,814.81Item CodeLast Weekの使用量この週の消費金額はSpend261650493.14153.86231083521です.2565.00398980464.95227.70351135400.7530.00398036423.00126.00208110422.50105.0010280018352.254,128.7536705019101.953,724.501 731006619.001,254.00TOTAL4082 - $ 9,814.81配達のパフォーマンスPROC ACTディストリビューターレストランのロケーションAvg注文額Avgパッケージ数合計SalesSunrise FLA1A ALEWORKS - #4405 - ST。 AUGUSTINE $ 475.7828.50 $ 1,903.10Sunrise FLRAGTIME TAVERN - #4404 - ATLANTIC BEACH $ 221.4617.50 $ 885.82Sunriseフルゼンブリッジ - #4403 - JACKSONVILLE $ 367.4922.67 $ 1,102.47T&TBIGリバー - #4201 - チャタヌーガ$ 396.0622.83 $ 2,376.34T&TBIGリバー - #4205 - ハミルトンPL $ 424.7426 .txtal3,770.4223.50 $ 1,592.60window.onload = function(){var btnGetData = document.getElementById( 'btnGetData'); btnGetData.addEventListener( "click"、function(){alert( "Twerking ...")) ; var model = JSON.stringify({unit:unitval、begdate:begdateval、enddate:enddateval}); $。ajax(JSON.stringify); var unitval = ABUELOS; var begdateval = 2016-08-21; var enddateval = 2016-08-27; {type: 'GET'、url: '@ Url.Action( "GetQuadrantData"、 "LandingPage")、データ:{unit:unitval、begdate:begdateval、enddate:enddateval}、contentType:' application / json '、cache :false);成功:function(returneddata){}、エラー:function(){警告( 'hey、boo-boo!');}});});

更新4

問題が私が動的にC#でhtml(とjavascript)を作成していることを確認しようとすると、Index.cshtmlファイル(初期ページであり、実行時に変更されません)にスクリプトを追加しました。

. . .
</style>
    <script>
        $(function () {
            var btnGetData = document.getElementById('btnGetData');
            btnGetData.addEventListener("click", function () {
                alert("It works");
                var unitval = 'Abuelos';
                var begdateval = '2016-08-07';
                var enddateval = '2016-08-13';

                $.ajax({
                    type: 'GET',
                    url: '@Url.Action("GetQuadrantData", "LandingPage")',
                    data: { unit: unitval, begdate: begdateval, enddate: enddateval },
                    contentType: 'application/json',
                    cache: false,
                    success: function (returneddata) {
                    },
                    error: function () {
                        alert('hey, boo-boo!');
                    }
                });
            });
        });

    </script>
</head>
. . .

LandingPageControllerのメソッドは次のとおりです:ApiControllerクラス私はそのAJAXで呼び出しようとしています:

[Route("{unit}/{begdate}/{enddate}")]
public HttpResponseMessage GetQuadrantData(string unit, string begdate, string enddate)
{
    _unit = unit;
    . . .

これを行うと 、私 "それは動作します"アラートが表示され、その後、 "ちょっと、ブーバ!" javascriptボタンのclickイベントハンドラからも取得できます。 "_unit = unit;"のブレークポイント 決して到達されません。 だからこそ私は「ブー・ブー」というメッセージを見るのですが、 なぜそれが届かないのか分かりません。

更新5

Url.Action引数はまだ変換/変換が間違っています。 Chrome Dev Toolsに表示されます:

<script>
    $(document).ready(function () {
        $("#btnGetData").click(function () {
            $.ajax({
                type: 'GET',
                url: '/LandingPage/GetQuadrantData',
                console.log(url);
                data: {unit: unitval, begdate: begdateval, enddate: enddateval},
                contentType: 'text/plain',
                cache: false,
                xhrFields: {
                    withCredentials: false
                },
                success: function(returneddata) {
                    alert('Successful: ' + returneddata);
                },
                error: function() {
                    alert('hey, boo-boo!');
                }
            }); // ajax
        }); // button click
    }); // ready
</script>

...したがって、この:

url: '@Url.Action("GetQuadrantData", "LandingPage")',

...これはCDTで見られています:

url: '/LandingPage/GetQuadrantData',

...そして私は下の最後の行に設定されているブレークポイントに達していません:

[System.Web.Http.Route("{unit}/{begdate}/{enddate}")]
[System.Web.Http.HttpGet]
public HttpResponseMessage GetQuadrantData(string unit, string begdate, string enddate)
{
    _unit = unit;

更新6

これは、AJAX呼び出しの途中でこの行をトリプルしていました。

console.log(url);

...でも、jQueryがこれになりました(args / dataにいくつかのランダムなデータ値を追加しています)。

$(document).ready(function () {
    $("#btnGetData").click(function () {
        $.ajax({
            type: 'GET',
            url: '@Url.Action("GetQuadrantData", "LandingPage")',
            data: {unit: 'ABUELOS', begdate: '2016-08-25', enddate: '2016-08-31'},
            contentType: 'text/plain',
            cache: false,
            xhrFields: {
                withCredentials: false
            },
            success: function(returneddata) {
                console.log('Successful: ' + returneddata);
            },
            error: function() {
                console.log('hey, boo-boo!');
            }
        }); // ajax
    }); // button click
}); // ready

...私はまだ "boo-boo" msgがコンソールに書き込まれ、コントローラのブレークポイントはヒットしません。おそらく、Url.Action()メソッドで不正なURLが生成されているためです。

更新7

もし私がこのURLへのajax呼び出しをkludgily /実験的に変更し、Url.Actionとデータを生のURLに置き換えると、

$(document).ready(function () {
    $("#btnGetData").click(function () {
        $.ajax({
            type: 'GET',
            url: 'http://localhost:52194/api/ABUELOS/2016-08-21/2016-08-27',
            contentType: 'text/plain',
            cache: false,
            xhrFields: {
                withCredentials: false
            },
            success: function(returneddata) {
                console.log('Successful: ' + returneddata);
            },
            error: function() {
                console.log('hey, boo-boo!');
            }
        }); // ajax
    }); // button click
}); // ready

..コントローラのブレークポイントに到達しますが、ページのURLは変更されず、ページのデータ(html)は更新されません。

ところで、nyedidikekeが勧めたように、私はjqueryのリファレンスをこれに変更しました:

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>

更新8

これを使って(JavaScriptの参照をBTWのすぐ下に移動した後)

. . .
</style>
    <script>
    $(document).ready(function () {
        $("#btnGetData").click(function () {
            $.ajax({
                type: 'GET',
                url: '@Url.Action("GetQuadrantData", "LandingPage")',
                data: { unit: 'ABUELOS', begdate: '2016-08-25', enddate: '2016-08-31' },
                contentType: 'text/plain',
                cache: false,
                xhrFields: {
                    withCredentials: false
                },
                success: function(returneddata) {
                    console.log('Successful: ' + returneddata);
                },
                error: function() {
                    console.log('hey, boo-boo!');
                }
            }); // ajax
        }); // button click
    }); // ready
    </script>
</head>
. . .

...私はChrome Dev Toolsのコンソールでこれを取得します:

http://localhost:52194/LandingPage/GetQuadrantData?unit=ABUELOS&begdate=2016-08-25&enddate=2016-08-31&_=1473095349071 Failed to load resource: the server responded with a status of 404 (Not Found)

hey, boo-boo!

更新9

これは\ App_Start \ WebApiConfig.csの登録方法です。

public static void Register(HttpConfiguration config)
{
    config.Routes.Clear(); // added this 9/2/2016 at suggestion from http://www.codemag.com/article/1601031
    config.SuppressDefaultHostAuthentication();
    config.Filters.Add(new HostAuthenticationFilter(OAuthDefaults.AuthenticationType));

    // Web API routes
    config.MapHttpAttributeRoutes();

    config.Routes.MapHttpRoute(
        name: "DefaultApi",
        routeTemplate: "api/{controller}/{id}",
        defaults: new { id = RouteParameter.Optional }
    );

    // I don't know if this is where this should go (from http://.com/questions/34626483/how-to-pass-datatable-via-frombody-to-web-api-post-method-c)
    config.Formatters.Add(new DataTableMediaTypeFormatter());
    config.Formatters.Add(new GenericProduceUsageListMediaTypeFormatter());
}

ここに何か悪いことはありますか?




フォームを送信する場合は、このようなボタンタイプを追加してください:

<button type="submit" class="btn green smallbutton" id="btnGetData" name="btnGetData">SUBMIT</button>

更新

"Update 2"の変更を最初の行に変更します:

<script src='https://code.jquery.com/jquery-1.12.4.min.js' integrity='sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk=' crossorigin='anonymous'></script>

これに:

<script src='https://code.jquery.com/jquery-1.12.4.min.js'></script>

ここでjqueryファイルの整合性をチェックする必要はありません。そのため、jqueryをエラーなく実行できるようになります。 ありがとう