質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

807閲覧

DjangoでJquery ratyの値を反映したい

courage23

総合スコア8

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2020/03/09 15:48

初めてWebアプリケーションを制作しているのですが上手くいきません。
DjangoでフォームからJquery ratyの値をデータベースに保存できたのですが、
その後に、値に応じた星の表示がうまくいきません。
調べたのですが、Rubyでの情報が多く試してみたものの上手く行かず、またJavaScriptの知識もあまりありません。
template2とJavascriptの記述が正しいのかわかりません。

models

1class Shop(models.Model): 2 title = models.CharField(verbose_name='店舗名', max_length=100) 3 4class Comment(models.Model): 5 title = models.CharField(verbose_name='タイトル', max_length=255) 6 star = models.FloatField(verbose_name='評価', blank=True, null=True) 7 body = models.TextField(verbose_name='本文') 8 posted_at = models.DateField(auto_now_add=True) 9 user = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE)

forms

1class Commentform(forms.ModelForm): 2 3 class Meta: 4 model = Comment 5 fields = ['title', 'star', 'body']

template1

1{% extends 'base.html' %} 2 3{% block content %} 4<div class="comment-form"> 5 <div class="container"> 6 <form method="post"> 7 {% csrf_token %} 8 <table> 9 <label>{{ form.title.label }}</label> 10 {{ form.title }} 11 <label>{{ form.star.label }}</label> 12 <div id="stars"></div> 13 <label>{{ form.body.label }}</label> 14 {{ form.body }} 15 </table> 16 <button class="submitbutton" type="submit">送信</button> 17 </form> 18 </div> 19 </div> 20</div> 21{% endblock %}

template2

1{% for comment in shop.comment_set.all %} 2 <div class="review-body"> 3 <p class="review-name">{{ comment.user.username }}</p> 4 <p class="review-title">{{ comment.title }}</p> 5 <p class="review-comment">{{ comment.body }}</p> 6 <p class="review-date">{{ comment.posted_at }}</p> 7 8 **データベースの値がJquery Ratyの星に反映されない** 9 <p id="user_rating">{{ comment.star }}</p> 10 </div> 11{% endear %}

JavaScript

1$(function() { 2 $('#stars').raty({ 3 path: '/static/raty-image/', 4 scoreName: 'star', 5 }); 6 $('#user_rating').raty({ 7 path: '/static/raty-image/', 8 readOnly: true, 9 10 **色々試しましたがscoreに値が入らない** 11 score: 'comment.star', 12 }); 13});

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mistn

2020/03/10 01:18

JavaScriptはテンプレートとは別のファイルに書いていますか?
courage23

2020/03/10 01:41

はいそうです! ダメなんでしょうか⁇
mistn

2020/03/10 05:03

ダメではないですよ。 別のファイルなのか同じなのかで回答が変わりそうだったので質問しただけです。 結果として回答に影響はなさそうでしたが。
guest

回答1

0

ベストアンサー

今回の質問とは直接の関係はありませんが注意点として1点、テンプレートの中forを使って要素を作る際にはidが重複しないように気をつけてください。

jQueryのeachメソッドを使うのが楽そうなので、今回はidではなくclassをつけたほうがよさそうです。
それと、jquery.ratyではdata-score属性をつけることでscoreの初期値を設定できるようなのでこれもつけておきます。
data-score属性には{{ comment.star }}を設定します。

html

1<p class="user_rating" data-score={{ comment.star }}>{{ comment.star }}</p>

JavaScriptのほうはこんな感じです。
classにuser_ratingがついてる要素に対して処理を行っているだけです。

js

1$(function () { 2 $('.user_rating').each(function(){ 3 $(this).raty({ 4 path: '/static/raty-image/', 5 readOnly: true, 6 7 // data-score属性があればなくても動く 8 score: parseFloat($(this).attr('data-score')) 9 }); 10 }); 11});

投稿2020/03/10 05:02

編集2020/03/10 05:07
mistn

総合スコア1191

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

courage23

2020/03/10 05:47

ご指摘していただいた通りに動きました! for文のところのIdの重複にも気付いていませんでした。 質問したところ以外も教えていただきありがとうございました。 Javascriptの知識も浅かったのでさらに勉強しようと思います。ご丁寧にありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問