###前提・発生している問題
jqueryのajaxメソッドで、DBのデータをJSON形式で取得し、
jqueryでhtmlを動的に書きかえてダイアログを表示するプログラムを書いています。
これが、IEでは想定通りの動作をしますが、ChromeやSafariだと、
jqueryの一部メソッド(.html と .attr)がうまく動作しておらず、ダイアログは空欄のまま表示されます。
###該当のソースコード(抜粋)
○表示するダイアログ部分
html
1<template id="dialog" hidden> 2<article> 3<header> 4<p id="name">投稿者:<span></span></p> 5<p id="date">投稿日時:<time datetime=""></time></p> 6</header> 7<p id="text"><span></span></p> 8</article> 9</template>
○取得されるJSONデータ(例)
json
1{ "article" : [ 2 { 3 "id" : "777", 4 "name" : "john", 5 "date" : "2016-09-16T10:30:00.000", 6 "dateString" : "2016年9月16日10:30", 7 "text" : "hogehoge" 8 }] 9}
○htmlを書きかえてダイアログ表示している部分(ajaxメソッドのsuccess関数)
javascript
1function(json){ 2 $("#dialog").dialog("option", { title : json.article[0].id }); 3 $("#name span").html(json.article[0].name); 4 $("#date time").attr("datetime", json.article[0].date); 5 $("#date time").html(json.article[0].dateString); 6 $("#text span").html(json.article[0].text); 7 8 $("#dialog").dialog("open"); 9}
###試したこと
・span要素やtime要素にid属性を付与して、jqueryのセレクタを変更しても、動作は変わりませんでした。
・firefoxでも同様に動作しませんでした。
・success関数の先頭に、以下を追記すると、どのブラウザでも「john」のアラートが表示できます。
(jsonの取得には成功している)
javascript
1alert(json.article[0].name);
・success関数の先頭に、以下を追記すると、
IEでは空欄のアラートが表示され、その他は「undefined」のアラートが表示されます。
(やはりhtmlメソッドの挙動が怪しい)
javascript
1alert($("#name span").html());
###補足情報(言語/FW/ツール等のバージョンなど)
回答4件
あなたの回答
tips
プレビュー