php - Creating a comments page selection using AJAX data -
i decided go ajax route heck of it, learn it, , see how worked. want add page selection comments exceed, say, 10 posts.
i using codeigniter, , post have far:
controller:
public function updatefilters() { $this->blurb_model->create_session_filter($_post['filters']); $this->blurb_model->get_threads($_post['pagenum']); }
model:
public function get_threads($page = 0) { $needpagehere = $page [fetch threads] [return threads / count / etc] }
so goal display number of pages user. part done. have submit button displayed each page based on total count of items returned in "get_threads" model (code omitted relevance sake).
here ajax/javascript
focus lies on updatefilter function. use returned thread list construct html , post within div. works fine.
the problem want reuse updatefilters() function when user clicks on page button...but not working. want pass value of submit button updatefilter(pagenum) goes controller -> method, , can math, not work.
javascript:
function updatefilters(pagenum){ // selected filters var html; var = 0; if (!pagenum) { pagenum = 0 } var $selected = $('#selectable').children('.ui-selected'); // create string has each filter separated 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'>" (i=1 ; < 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; (i=0 ; < 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 = 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(',') (i=0 ; < strfilterarray.length ; i++) { strfilter = strfilterarray[i] strfilter = strfilter.replace(/[\[\]'"]+/g,''); var strfilterdash = strfilter.replace(/\s+/g, '-') actfilter = '#'+ strfilterdash $(actfilter).addclass('ui-selected') } updatefilters(); } }); } });
this incredible learning experience myself, , huge if can spot problem , explain in understood manner. extremely new javascript , programming in general (which might explain ugliness of code).
thanks!
modify selected
event callback.
$("#selectable").selectable({ // here event callback signature reference selected: function(event, ui) { updatefilters(); } });
you passing unexpected first parameter updatefilters
function.
Comments
Post a Comment