I have this script that is working but it return only 1 post from DB table.
我有这个脚本工作,但它只从DB表中返回1个帖子。
I need that all posts of the table is displayed on the page:
我需要在页面上显示表格的所有帖子:
$(document).ready(function(){
(function update() {
$.ajax({
url:"getposts",
type: "get",
data: "{}",
success: function(data){
var res = data;
$.each(res[0], function(index, value) {
$('#prova').html($('<div class="col-xs-12 col-md-6 col-lg-4 item">\
<div class="timeline-block">\
<div class="panel panel-default">\
<div class="panel-heading">\
<div class="media">\
<div class="media-left">\
<a href="">\
<img src="http://bookstar.me/uploads/users/paolo.jpg" width="50px" class="media-object">\
</a>\
</div>\
<div class="media-body">\
<a href="#" class="pull-right text-muted"><i class="icon-reply-all-fill fa fa-2x "></i></a>\
<a href="">Paolo</a>\
<span>1/08/2016</span>\
</div>\
</div>\
</div>\
<div class="panel-body">\
<p>'+ value.post +'</p>\
</div>\
<div class="view-all-comments">\
<a href="#">\
<i class="fa fa-comments-o"></i> View all</a>\
<span>10 comments</span>\
</div>\
<ul class="comments">\
<li class="media">\
<div class="media-left">\
<a href="">\
<img src="http://bookstar.me/backend/bookstar/images/people/50/guy-5.jpg" class="media-object"></a>\
</div>\
<div class="media-body">\
<div class="pull-right dropdown" data-show-hover="li">\
<a href="#" data-toggle="dropdown" class="toggle-button">\
<i class="fa fa-pencil"></i>\
</a>\
<ul class="dropdown-menu" role="menu">\
<li><a href="#">Edit</a></li>\
<li><a href="#">Delete</a></li>\
</ul>\
</div>\
<a href="" class="comment-author pull-left">Bill D.</a>\
<span>Hi Mary, Nice Party</span>\
<div class="comment-date">21st September</div>\
</div>\
</li>\
<li class="media">\
<div class="media-left">\
<a href="">\
<img src="http://bookstar.me/backend/bookstar/images/people/50/woman-5.jpg" class="media-object">\
</a>\
</div>\
<div class="media-body">\
<div class="pull-right dropdown" data-show-hover="li">\
<a href="#" data-toggle="dropdown" class="toggle-button">\
<i class="fa fa-pencil"></i>\
</a>\
<ul class="dropdown-menu" role="menu">\
<li><a href="#">Edit</a></li>\
<li><a href="#">Delete</a></li>\
</ul>\
</div>\
<a href="" class="comment-author pull-left">Mary</a>\
<span>Thanks Bill</span>\
<div class="comment-date">2 days</div>\
</div>\
</li>\
<li class="media">\
<div class="media-left">\
<a href="">\
<img src="http://bookstar.me/backend/bookstar/images/people/50/guy-5.jpg" class="media-object"></a>\
</div>\
<div class="media-body">\
<div class="pull-right dropdown" data-show-hover="li">\
<a href="#" data-toggle="dropdown" class="toggle-button">\
<i class="fa fa-pencil"></i>\
</a>\
<ul class="dropdown-menu" role="menu">\
<li><a href="#">Edit</a></li>\
<li><a href="#">Delete</a></li>\
</ul>\
</div>\
<a href="" class="comment-author pull-left">Bill D.</a>\
<span>What time did it finish?</span>\
<div class="comment-date">14 min</div>\
</div>\
</li>\
<li class="comment-form">\
<div class="input-group">\
<span class="input-group-btn">\
<a href="" class="btn btn-default"><i class="fa fa-photo"></i></a>\
</span>\
<input type="text" class="form-control" />\
</div>\
</li>\
</ul>\
</div>\
</div>\
</div>'));
});
}
}).then(function() { // on completion, restart
setTimeout(update, 1000); // function refers to itself
});
})();
Any help is apprecited.
任何帮助都很赞赏。
2 个解决方案
#1
0
The reason because you have only one post, is because you put each posts in the same html element #prova.
之所以因为你只有一个帖子,是因为你把每个帖子放在同一个html元素#prova中。
In that way, you are going to have only the last one, as the jQuery method html() replace all the code.
这样,你将只有最后一个,因为jQuery方法html()替换所有代码。
You should use the append() method instead.
您应该使用append()方法。
To check, this, just put a debug in the loop, and you will see that there are more posts processed.
要检查,这只是在循环中调试,你会看到有更多的帖子被处理。
And more, an advice, please avoids to put all this html code, it is complicated to read the code.
而且,一个建议,请避免把所有这些HTML代码,阅读代码很复杂。
You should place html in the html page, and use javascript to implement the logic.
你应该在html页面中放置html,并使用javascript来实现逻辑。
Try to use some template engine, like handlebars.
尝试使用一些模板引擎,如把手。
UPDATE:
You're updating the content by your function update() every second through a setTimeout() call.
您通过setTimeout()调用每秒通过函数update()更新内容。
If you want to refresh all the content, and not to add it again (this depends on the details of your ajax call), you should reset the html content of your element on return of the ajax call, just before the loop.
如果你想刷新所有内容,而不是再次添加(这取决于你的ajax调用的细节),你应该在循环之前的ajax调用返回时重置元素的html内容。
For example:
$.ajax({
success: function(data) {
var $prova = $('#prova');
$prova.html(''); // reset the current content.
$.each(data, function(index, value) {
$prova.append('[... your html code here ...]');
});
}
});
#2
0
1.Simly change res[0] to res inside the $.each function.
1.在$ .each函数中将res [0]更改为res。
2.Change $('#prova').html() to $('#prova').append()
2.Change $('#prova')。html()to $('#prova')。append()
#1
0
The reason because you have only one post, is because you put each posts in the same html element #prova.
之所以因为你只有一个帖子,是因为你把每个帖子放在同一个html元素#prova中。
In that way, you are going to have only the last one, as the jQuery method html() replace all the code.
这样,你将只有最后一个,因为jQuery方法html()替换所有代码。
You should use the append() method instead.
您应该使用append()方法。
To check, this, just put a debug in the loop, and you will see that there are more posts processed.
要检查,这只是在循环中调试,你会看到有更多的帖子被处理。
And more, an advice, please avoids to put all this html code, it is complicated to read the code.
而且,一个建议,请避免把所有这些HTML代码,阅读代码很复杂。
You should place html in the html page, and use javascript to implement the logic.
你应该在html页面中放置html,并使用javascript来实现逻辑。
Try to use some template engine, like handlebars.
尝试使用一些模板引擎,如把手。
UPDATE:
You're updating the content by your function update() every second through a setTimeout() call.
您通过setTimeout()调用每秒通过函数update()更新内容。
If you want to refresh all the content, and not to add it again (this depends on the details of your ajax call), you should reset the html content of your element on return of the ajax call, just before the loop.
如果你想刷新所有内容,而不是再次添加(这取决于你的ajax调用的细节),你应该在循环之前的ajax调用返回时重置元素的html内容。
For example:
$.ajax({
success: function(data) {
var $prova = $('#prova');
$prova.html(''); // reset the current content.
$.each(data, function(index, value) {
$prova.append('[... your html code here ...]');
});
}
});
#2
0
1.Simly change res[0] to res inside the $.each function.
1.在$ .each函数中将res [0]更改为res。
2.Change $('#prova').html() to $('#prova').append()
2.Change $('#prova')。html()to $('#prova')。append()