使用 AJAX 数据创建注释页选择
Creating a comments page selection using AJAX data
我决定走AJAX路线,主要是学习它,看看它是如何工作的。 我想为超过 10 个帖子的评论添加一个页面选择。
我正在使用Codeigniter,并将发布到目前为止我所拥有的内容:
控制器:
public function updatefilters()
{
$this->blurb_model->create_session_filter($_POST['filters']);
$this->blurb_model->get_threads($_POST['pagenum']);
}
型:
public function get_threads($page = 0)
{
$NEEDPAGEHERE = $page
[fetch threads]
[return threads / count / etc]
}
所以我的目标是向用户显示页数。 这部分已经完成。 我根据"get_threads"模型中返回的项目总数为每个页面显示了一个提交按钮(出于相关性考虑,省略了代码)。
这是我的 AJAX/javascript
重点在于更新过滤器功能。 我使用返回的线程列表来构造 HTML 并将其发布在div 中。 这工作正常。
问题是我想在用户单击页面按钮时重用 updatefilters() 函数......但它不起作用。我想将提交按钮的值传递到 updatefilter(pagenum) 中,以便它随后转到控制器 -> 方法,我可以做数学运算,但它不起作用。
Javascript:
function updatefilters(pagenum){
// get the selected filters
var html;
var i = 0;
if (!pagenum)
{
pagenum = 0
}
var $selected = $('#selectable').children('.ui-selected');
// create a string that has each filter separated by a pipe ("|")
var filters = $selected.map(function(){return this.id;}).get().join("'|");
$.ajax({
type: "POST",
async: false,
url: 'welcome/updatefilters',
dataType: 'json',
data: { filters: filters, pagenum: pagenum },
success: function(data){
var html = "";
html += "<div id=board>"
html += "<div class='board' id='table'>"
html += "<div id='row'>header here</div>"
var pages = Math.ceil(data['num_threads']/10);
var htmlpage = "<div class='pages'>"
for (i=1 ; i < pages+1 ; i++)
{
htmlpage += "<li><input type='submit' id='page"+i+"' value='"+i+"' onclick='updatefilters(this.value);' /></li>"
}
htmlpage += "<div>"
htmlpage += "</ul>";
htmlpage += "</br></br></br>";
html += htmlpage;
for (i=0 ; i < data['threads'].length ; i++)
{
html += "<div id=row>";
html += " <div id='author' style='background: url("+data['threads'][i].location + ") no-repeat; background-position: center;'><p>"+data['threads'][i].username + "</p></div>";
html += " <div id='arrow'></div>";
html += " <div id='subject' title='"+ data['threads'][i].body +"'>";
html += " <a href=thread/" + data['threads'][i].slug + ">"+ data['threads'][i].subject +"</a><p>Created: "+data['threads'][i].posttime+"</p></div>";
html += " <div id='info'>";
html += " <div id='replies'>" + data['threads'][i].replies_num + "</div>";
html += " <div id='lastpost'>"+ data['threads'][i].lastreply+"</div>";
html += " </div>";
html += "</div>";
}
html += "</div></div>";
$('#board').html(html);
}
});
}
$(function() {
$( "#selectable" ).selectable({
selected: updatefilters
});
getactivesession();
function getactivesession(ev, ui){
var i = 0;
var actfilter, strfilter;
var strfilterarray = new Array();
$.ajaxSetup({cache: false})
$.ajax({
type: "POST",
async: false,
url: 'welcome/getactivesession',
dataType: 'json',
success: function (data){
strfilter = JSON.stringify(data)
strfilterarray = strfilter.split(',')
for (i=0 ; i < strfilterarray.length ; i++) {
strfilter = strfilterarray[i]
strfilter = strfilter.replace(/['[']'"]+/g,'');
var strfilterdash = strfilter.replace(/'s+/g, '-')
actfilter = '#'+ strfilterdash
$(actfilter).addClass('ui-selected')
}
updatefilters();
}
});
}
});
这对我自己来说将是一次令人难以置信的学习经历,如果有人能发现问题并以易于理解的方式解释它,这将带来巨大的帮助。 我对javascript和编程非常陌生(这可能解释了代码的丑陋)。
谢谢!
修改selected
事件回调。
$("#selectable").selectable({
// Here is the event callback signature for reference
selected: function(event, ui) {
updatefilters();
}
});
您正在向函数传递意外的第一个参数updatefilters
。
相关文章:
- 下拉选择可自动更改第二个下拉选择
- 如何使用jQuery选择下拉列表的值
- jquery点击函数select&取消选择
- Windows8应用程序(html&Javascript):从图片库(除了文件选择器)显示图像的另一种方式
- 按照选项卡索引的顺序循环一个jQuery选择
- 在动态创建的元素上获取对特定选择器的引用
- AngularJS-在JSON选择器中使用变量名
- 每当您在选择器内移动鼠标时,悬停功能就会重复
- 获取选择框的状态
- d3基于用户选择动态更新节点
- 提交后保留下拉选择的值
- JQuery对动态创建的对象进行选择
- 使用 AJAX 数据创建注释页选择
- XPath 表达式,用于按源顺序选择 *所有* 元素、文本节点和注释节点
- 选择除注释之外的所有内容
- 使用jQuery选择包含在注释中的元素
- 如何在没有唯一标识属性但有HTML注释的情况下使用jQuery选择HTML
- Vim Javascript自动完成选择注释作为建议
- 高亮选择与注释,显示在悬停和可编辑
- 如果表单元格的注释节点包含字符串,请选择该单元格