Q&A
{{ form }}のところに、実際に表示されたHTMLソースをご提示願えますか？
色とJSON情報が合っていなくどう直せば良いのでしょうか？
PythonとDjangoとHTMLとJSでWEBサイトを作っています。{{ form }}のドリルダウンをいじると背景・h１・pの色が変わるしくみになっています。
index.html に
<!DOCTYPE html> <html> <head lang="ja"> <meta charset="UTF-8"> </head> <body> {{ form }}<br> <hr> <h1>h1LETTER</h1> <p>pLETTER</p> {{ form }}<br> <hr> <h1>h1LETTER</h1> <p>pLETTER</p> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> var xhr = new XMLHttpRequest(); xhr.onload = function(){ colors = JSON.parse(xhr.response) console.log(colors) color_array = [] for (var i=0 ; i<=colors.length ; i++){ color_array[i] = { "background-color" : colors[i]["background_color"], "h1" : colors[i]["h1_color"] , "p" : colors[i]["p_color"] , }; } } xhr.open("GET","http://localhost:8000/app/api/get/",false); xhr.send({}) function change_color(){ color_id = $("#id_color").val(); color_object = color_array[color_id]; $("body").css("background-color", color_object["background-color"]); $("h1").css("color", color_object["h1"]); $("p").css("color", color_object["p"]); } $( '#id_color' ).change( function () { change_color(); }); change_color(); </script> </body> </html>
と書きました。{{ form }} のところにモデルにある色の情報が入るようになっています。models.pyには
from django import forms from .models import Color class ColorForm(forms.Form): color = forms.ModelChoiceField( queryset=Color.objects.all(), empty_label=None, required=False, )
と書きました。
今、WEBサイトは
のような状態で、
ドリルダウンで選択した色と背景の色が合っていません。
JSONは
のようにちゃんと取得しているのでなぜこのように背景色とドリルダウンで選択した色が一致していないのかわかりません。
どのように直せば良いのでしょうか？
{{ form }}のところには
<tr><th><label for="id_color">Color:</label></th><td><select name="color" id="id_color"> <option value="1">white</option> <option value="2">green</option> <option value="3">pink</option> </select></td></tr><br>
と表示されていて、
change_color()実行時のcolor_array値は
のようになっています。
念のためchange_color()実行時にcolor_arrayに想定どおりの値が入っているかconsole出力した結果を教えてください。
情報を追加しました。もしわかったらお願いします。
{{ form }}～h1～pがhtmlに2回出てきているのですが、記載ミスですか？
回答1件
0
ベストアンサー
プルダウンが1,2,3に対し、取得したjsonから作った配列は0,1,2となっています。
そのため1つずつずれが発生しているのではないでしょうか。
3つ目が変わっていないのは「3」がcolor_arrayには存在せず、
consoleでは存在しないキーを指定しているエラーが出力されているため、
処理が進まず何も起きていないというところでしょうね。
{{ form }}にどのようにしてselectをアサインしているかは分かりませんが、
キーをjsonかselect生成のどちらかに寄せた方が良いですね。
投稿2017/09/04 07:11
総合スコア80850
ありがとうございます。確かに１つずつずれていそうです。
color_array = []
for (var i=1 ; i<=colors.length ; i++){
color_array[i] = {
"background-color" : colors[i]["background_color"],
"h1" : colors[i]["h1_color"] ,
"p" : colors[i]["p_color"] ,
};
}
}
のように書いたのですがやはりずれたままです。
直すところが違いましたか？
color_arrayの内容は想定通りですか？
キャッシュなど残っていると最新の状態でないかもしれませんので念のためキャッシュクリアをお試しください。
あと、htmlのinputから取得した情報は基本的に文字列のはずなので念のためparseIntで数値化も試してください。
あと気になるとしたら・・・質問修正依頼に書いた内容でしょうか。htmlに2回出てきているところ。
htmlのinputから取得した情報とはどこのことをさしていますか？
ちなみに、ドリルダウンはwhite => green => pink の順になっているのですが、pinkの時にエラーが起きていました。ちゃんとJSONの値は取得できているんですけどね...
>htmlのinputから取得した情報とはどこのことをさしていますか？
すみません。表現が悪かったです。入力コントロール（＝今回の場合はプルダウン）です
> pinkの時にエラーが起きていました
エラー内容は今回jsonから作った配列の3を参照しようとしてということだと思います。
おそらく0,1,2で作られているのではないでしょうか？
手元で作ってみた感じ、1,2,3で作れた場合はきちんと想定通りの動きとなっています。
1つ前のコメントでも書いたようにcolor_arrayの内容が想定通り1,2,3のキーでできているか（console.logで出力）、ソースを組んだはずなのにできていないならキャッシュクリアをお試しください。
jsonで1,2,3で配列を作った時どのように書きました？for (var i=1 ; i<=colors.length ; i++){ でvar i=1から始めればそのようにできると思ったのですがうまくいきませんでした。。。キャッシュクリアはもう試しました
1から始めるとcolorsの[1]から取得することになるので、結果、1,2の2つしかとれないはずです。
forのiはそのままでcolor_arrayに入れるときに+1すると良いです。
for (var i=0 ; i<=colors.length ; i++){
color_array[(i+1)] = { ←ここ
"background-color" : colors[i]["background_color"],
"h1" : colors[i]["h1_color"] ,
"p" : colors[i]["p_color"] ,
};
}
}
目的の挙動になりました！本当にありがとうございます！！
私も説明不足なところがあって何回もやりとりさせて申し訳なかったです。
何はともあれ解決したようで良かったです。
あなたの回答
tips
プレビュー
