###前提・実現したいこと
Amazon の Product Advertising API を利用したCD情報サイト C LIFE MUSIC STORE(http://c-lifemusic.com/)を運営しています。Product Advertising API は取り込める商品情報の件数に制限があるため、あるアーティストについて欠けた商品があった場合は手動で商品情報を登録する仕組みになっています。具体的な手順は以下の通りです。
- アルバムを追加したいアーティストの「編集」ボタンをクリックし、編集画面を開く
(以降の作業はユーザー登録が必要になります)
2. 「リストにないアルバムを追加する」ボタンをクリックし、アルバムの追加画面を開く
3. 追加したいアルバムがAmazon.co.jpで扱われているかどうか調べるため、アルバムタイトルを入力し、「Amazon.co.jpで検索」ボタンをクリックする
4. 扱われていれば、検索結果の中から該当する商品すべてを選択
5. オリジナル原盤発売日等の情報を入力し、登録する
ところが、この3のところの検索が機能しません。以下、検索ボタンをクリックしたとき、Chromeのデベロッパーツールに表示されるエラーメッセージを引用します。
###発生している問題・エラーメッセージ
Failed to load resource: the server responded with a status of 404 (Not Found) Uncaught TypeError: Cannot read property 'value' of null at throwAmazonsearchReq (http://c-lifemusic.com/js/addalbum.js:9:129) at HTMLInputElement.onclick (http://c-lifemusic.com/edit/addalbum/?id=6100:50:174) throwAmazonsearchReq @ addalbum.js:9 onclick @ ?id=6100:50
###該当のソースコード
http://c-lifemusic.com/js/addalbum.js より var asin_list = []; var bgc_selected = 'orange'; var bgc_notselected = '#eee'; function throwAmazonsearchReq(id){ var errorText = 'エラーが発生しました。しばらくしてから再度お試しください。'; $('amazon_container').innerHTML = '' asin_list = []; parms = 'type=amazonsearch' + '&id=' + id + '&title=' + $('id_name').value + '&csrfmiddlewaretoken=' + $('csrfmiddlewaretoken').value; new Ajax.Request('/ajax/', { method: 'get', asynchronous: true, parameters: parms, onSuccess:function(httpObj) { $('amazon_container').innerHTML = httpObj.responseText; }, onFailure:function(){ alert(errorText); }}); } (以下略) http://c-lifemusic.com/edit/addalbum/?id=6100 より (以下、44行目から) <form action="/edit/addalbum/?id=6100" method="post" id="albumform" onsubmit="return false;"><input type='hidden' name='csrfmiddlewaretoken' value='9MhtT9fwUAPqvxP2qDFPHzqY2Olgga9S' /> <table cellspacing="0" summary="アルバム情報"> <tr> <td rowspan="6"><img id="album_img" src="/img/no_image_75.gif" alt="" width="75" height="75" /> <input type="hidden" name="image_url" id="image_url"></input></td> <th>アルバムタイトル</th> <td colspan="3"><input class="long" id="id_name" name="name" type="text" /><input type="button" onclick="throwAmazonsearchReq(6100);return false;" value="Amazon.co.jpで検索" /></td> </tr> (以下略) Djangoテンプレートより上記該当部分を抜粋 <form action="/edit/addalbum/?id={{ artist.id }}" method="post" id="albumform" onsubmit="return false;">{% csrf_token %} <table cellspacing="0" summary="アルバム情報"> <tr> <td rowspan="6"><img id="album_img" src="/img/no_image_75.gif" alt="" width="75" height="75" /> <input type="hidden" name="image_url" id="image_url"></input></td> <th>アルバムタイトル{{ album.name.errors }}</th> <td colspan="3">{{ album.name }}<input type="button" onclick="throwAmazonsearchReq({{ artist.id }});return false;" value="Amazon.co.jpで検索" /></td> </tr>
###試したこと
エラーが起きる前と後の Djangoテンプレートを比較すると、違いは formタグの後の {% csrf_token %} の有無のようなので、「csrf_token」でGoogle検索したところ、下記ページを発見。
http://docs.djangoproject.jp/en/latest/ref/contrib/csrf.html
この中に、{% csrf_token %} は「外部のサイトに対してリクエストを送るフォームについては使用すべきではありません」とあったのですが、Django、Pythonの知識に乏しいため、これ以上で手が出せないでいます。
それとも、それは無関係で Javascriptの問題でしょうか。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/11/10 06:16
2016/11/14 01:04
2016/11/14 07:42
2016/11/15 07:59