ajaxを使用して動的コンテンツを作成しました。
$(function(){
$('#loadFeed').bind('click',function(){
$.getJSON('getData.php', function(json) {
var output="<ul id='feedsList'>";
for(var i=json.posts.length-1;i>=json.posts.length-31;i--){
output+="<li class='post'>";
output+="<div class='text' id='"+json.posts[i].id+"'>"+json.posts[i].shortmsg+"</div>";
output+="</li>";
}
output+="</ul>"
$(output).appendTo('.posts');
});
});
});
htmlコード:
<div class="posts">
<!--dynamic content here-->
</div>
短いテキストをクリックすると、テキストが展開されてテキスト全体が表示されます。それを実装するコードは次のとおりです。
<script>
$(".posts").on("click", ".text",function(){
var thisID = this.id;
$.getJSON('getData.php', function(json) {
alert(thisID);
$(this).replaceWith("<div class='long_text'>"+json.posts[thisID-1].msg+"<div>");
});
});
</script>
エラーは
Uncaught TypeError: Cannot read property 'msg' of undefined .
なぜmsgが未定義として認識されるのかわかりません。id、shortmsgに対して行ったのと同じように、getData.phpでmsgを定義しました。これが私のgetData.phpです:
<?php
// Connecting, selecting database
$link = mysql_connect('localhost', 'root')
or die('Could not connect: ' . mysql_error());
mysql_select_db('my_db') or die('Could not select database');
// Get Data
$query = 'SELECT * FROM feed ORDER BY feed.userID ASC';
$result = mysql_query($query) or die('Query failed: ' . mysql_error());
//create json format text from posts
$json=array();
while($row=mysql_fetch_array($result)){
$post=array('id'=>$row['userID'],'avatar'=>$row['avatar'],'postType'=>$row['postType'],'msg'=>$row['msg'],'shortmsg'=>$row['shortmsg'],'title'=>$row['title'],'type'=>$row['type'],'pic'=>$row['pic'],'link'=>$row['link']);
array_push($json,$post);
}
//display it to the user
header('Content-type: application/json');
echo "{\"posts\":".json_encode($json)."}";
// Closing connection
mysql_close($link);
return $row;
?>
ありがとう!