spectrum2回使い、値をhiddenフィールドに入れたい。

やりたいこと
以下のコードで、
scaleBgColorBlock　とbgcolorBlock　の色変更時、カラーコードをhiddenフィールドに入れたい。

困っていること
以下のコード実行中にscaleBgColorBlockは色変更ができ、カラーコードをhiddenフィールドに入れることができた
しかし、bgcolorBlock　の色変更時、カラーコードがhiddenフィールドに入らなかった。

利用プラグイン

html
1<input id="scaleBgColorBlock" runat="server" class="colorBlock"/>
2<input id="bgcolorBlock" runat="server" class="colorBlock" />
3<asp:HiddenField ID="hdnBgColor" runat="server" />
4<asp:HiddenField ID="hdnScaleBgColor" runat="server" />

javascript
1
2window.onload=function(){
3  colorpicker_event();
4    colorpicker();
5};
6
7var colorpicker_event = function () {
8    $("#bgcolorBlock").each(function () {
9        $('#bgcolorBlock').spectrum({
10            color: $('#hdnBgColor').val(),
11            showPalette: true,
12            showInput: true,
13            preferredFormat: "hex6",
14            chooseText: "OK",
15            cancelText: "キャンセル",
16            palette: ["#ffffff", "#000000", "#d81921", "#f7931e", "#8cc63f", "#009a4e", "#00b9f2", "#003399", "#91278f", "#ef5ba1", "#784231", "#a0a0a0"],
17            change: function (color) {
18                $('#hdnBgColor').val(color);
19            }
20        });
21    });
22};
23
24var colorpicker = function () {
25
26    $("#scaleBgColorBlock").each(function () {
27        $('#scaleBgColorBlock').spectrum({
28            color: $('#hdnScaleBgColor').val(),
29            showPalette: true,
30            showInput: true,
31            preferredFormat: "hex6",
32            chooseText: "OK",
33            cancelText: "キャンセル",
34            palette: ["#ffffff", "#000000", "#d81921", "#f7931e", "#8cc63f", "#009a4e", "#00b9f2", "#003399", "#91278f", "#ef5ba1", "#784231", "#a0a0a0"],
35            change: function (color) {
36                $('#hdnScaleBgColor').val(color);
37            }
38        });
39    });
40
41};
42
43

x_x

2018/05/29 09:00

呼べてますかね？ window.onload=function() { ... あるいは$(function() { ... ではないでしょうか？

退会済みユーザー

2018/05/29 09:10

すみません。コピーミスです。直しておきます

行動規範の内容に同意します

回答2件

質問にあった、

<asp:HiddenField ID="hdnBgColor" runat="server" />
<asp:HiddenField ID="hdnScaleBgColor" runat="server" />

から ASP.NET が生成する html コード（input type="hidden" になるはず）の id はどうなっていますか？ html ソースを見て調べてください。

サーバーコントロール（上の例では HiddenField）がマスターページや名前付きコンテナ内に配置されると、ASP.NET がレンダリングする html ソースでの id と .aspx ページで ID に設定したものとは異なってきます。

投稿2018/05/29 09:03

退会済みユーザー

総合スコア0

退会済みユーザー

2018/05/29 09:13

ＩＤと同じです。また、nameも同じです。

退会済みユーザー

2018/05/29 10:21 編集

Visual Studio なら JavaScript でもデバッガが使えるので、それで調べてみましたか？

退会済みユーザー

2018/05/29 11:05

おっと。開発者ツールで見てました。確認してみます。

退会済みユーザー

2018/05/30 02:44 編集

質問者さんのコードをそのままコピペして試してみましたが、質問に書かれているような問題はなかったです。何か（検証のやり方？）の間違いでは？

退会済みユーザー

2018/05/30 02:41 編集

そのような可能性があるかもしれません。オペレーションミスかもしれないので、引き続き見てみます

行動規範の内容に同意します

ベストアンサー

プラグインのプロパティのchengeをmoveに変更すると発生しなくなった。

投稿2018/05/30 07:18

退会済みユーザー

総合スコア0

退会済みユーザー

2018/05/31 00:00

もとのコードには色々問題はあるものの、HiddenField の Value に選んだ color を設定するという点だけに関しては、上に書いた通り問題はないはず。質問者さんはどのようなことを期待していて、検証にどのような操作をして、何を見て期待通りにならないと思ったのか教えて下さい。何かの勘違い？

行動規範の内容に同意します

あなたの回答