Here is the initial code:
<div class="fs-table-table">
<div class="fs-table-row header">
<div class="fs-table-cell">
Course Name
</div>
<div class="fs-table-cell">
Lessons
</div>
</div>
<div id="fs-table-content">
</div>
</div>
Now the pager file calls:
$('#' + options.contentHolder).html(template(pager, options.template, options.currentData, options.startPage, options.perPage, options.alwaysShowPager, options.informationToShow, options.errorTemplate));
where contentHolder is 'fs-table-content', and it points to a template:
<script type="text/template" id="weeklyLessonTemplate">
<div class="fs-table-row">
<div class="fs-table-cell" data-title="Course Name">
##courseName##
</div>
<div class="fs-table-cell" data-title="Lesson">
<input type="radio" class="radio" name="weekly_lesson" value="##lessons##" />
<label for="##lessons##">##lessons##
</label>
</div>
</div>
</script>
and it yields:
<div class="fs-table-table">
<div class="fs-table-row header">
<div class="fs-table-cell">
Course Name
</div>
<div class="fs-table-cell">
Lessons
</div>
</div>
<div class="fs-table-row">
<div class="fs-table-cell" data-title="Course Name">
Art/Music/Social Media
</div>
<div class="fs-table-cell" data-title="Lesson">
<input type="radio" class="radio" name="weekly_lesson" value="What is art?">
<label for="What is art?">What is art?
</label>
</div>
</div>
</div>
So you see, calling the function "template" simply returns html code. Now, when I click on the next page number, I expect the html to change but it doesn't change, it stays the same because
<div id="fs-table-content">
</div>
has been replaced. How do I inject fs-table-content back into the code. It should be put in the page onclick code:
$('#' + pager).on('click', '.page, .last-page, .first-page, .next-pages, .prev-pages', function(e) {
var newPage = parseInt($(this).data('value'));
var perPage = parseInt($('#' + pager + ' .perPage').val());
$('#' + pager + ' .page.current').removeClass('current');
$('#' + pager + ' .page[data-value="' + newPage + '"]').addClass('current');
showProperPaging(pager, newPage, options.totalPages, options.pagesToShow);
$('#' + options.contentHolder).html(template(pager, options.template, options.currentData, newPage, perPage, options.alwaysShowPager, options.informationToShow, options.errorTemplate));
options.currentPage = newPage;
$('#' + pager).trigger("pagingChange");
});
I noticed that in the demo for the pager, they use the following line to change the html:
var showing = $('#' + templateToShow).html().format(data);
html += showing;
But my data is structured differently, I don't think I can use .format
The way this script has been designed is that you need to provide two separate divs (not nested within one another). One for your content and one of its content (where it places pagination, search .. etc).
So you can change your code to this for it work:
!function(a){function e(e,t,r,n,o,s,g){var p="",l=Math.ceil(t/r);p+='<div class="showing"></div>',p+='<div class="pager"><span class="first-page btn" data-value="1">First</span><span class="prev-page btn">Previous</span><span class="prev-pages btn" data-value="1">...</span><span class="page btn current" data-value="1">1</span>';for(var i=1;i<l;i++)p+='<span class="page btn" data-value="'+(i+1)+'">'+(i+1)+"</span>";p+='\t<span class="next-pages btn" data-value="6">...</span><span class="next-page btn">Next</span><span class="last-page btn" data-value="'+l+'">Last</span></div>',p+='<div class="options" style="text-align: center; margin-bottom: 10px;"><span>Show </span><select class="perPage">';for(i=0;i<n.length;i++)n[i]==r?p+='<option selected="selected">'+n[i]+"</option>":p+="<option>"+n[i]+"</option>";p+="\t</select><span> per page</span></div>",s&&(p+='<div class="searchBox"><input type="text" class="search" placeholder="Search" value="'+g+'" /></div>'),a("#"+e).html(p)}function t(e,t,r,n){1==t?a("#"+e).find(".prev-page").hide():a("#"+e).find(".prev-page").show(),t==r?a("#"+e).find(".next-page").hide():a("#"+e).find(".next-page").show();var o,s,g=n,p=Math.ceil(g/2),l=Math.floor(g/2);r<g?(o=0,s=r):t>=1&&t<=p?(o=0,s=g):t+l>=r?(o=r-g,s=r):(o=t-p,s=t+l),a("#"+e+" .pager").children().each(function(){a(this).hasClass("page")&&a(this).hide()});for(var i=o;i<s;i++)o>0?(a("#"+e+" .prev-pages").show(),a("#"+e+" .prev-pages").data("value",o)):a("#"+e+" .prev-pages").hide(),a("#"+e+" .page[data-value='"+(i+1)+"']").show(),s<r?(a("#"+e+" .next-pages").show(),a("#"+e+" .next-pages").data("value",s+1)):a("#"+e+" .next-pages").hide();1==r?a("#"+e+" .last-page, #"+e+" .first-page").hide():0==r?a("#"+e+" .pager, #"+e+" .showing, #"+e+" .options").hide():(a("#"+e+" .pager, #"+e+" .showing, #"+e+" .options").show(),a("#"+e+" .last-page, #"+e+" .first-page").show())}function r(e,t,r,n,o,s,g,p){var l="",i=n*o-(o-1),h=n*o>r.length?r.length:n*o;if(r.length<=0){if(""==p)l+='<div class="dataError">There is nothing to show here.</div>';else l+=a("#"+p).html().format(["There are no Messages to display."]);return s||a("#"+e).hide(),l}a("#"+e).show(),a("#"+e+" .showing").html("Showing "+i+" to "+h+" of "+r.length+" total.");for(var c=n*o-o;c<n*o&&c!=r.length;c++){var u=[];a.each(g,function(a,e){u.push(r[c][e])}),l+=a("#"+t).html().format(u)}return l}a.fn.extend({paging:function(n){var o={data:{},contentHolder:"",template:"",errorTemplate:"",informationToShow:[],informationToRefineBy:[],perPage:10,pageLengths:[5,10,20,30,40,50],startPage:1,pagesToShow:5,showOptions:!0,showSearch:!0,alwaysShowPager:!0},s={currentPage:o.startPage,totalPages:0,currentData:n.data,refine:""};n=a.extend(o,n),(n=a.extend(s,n)).totalPages=Math.ceil(n.currentData.length/n.perPage),function(n,o){o.totalPages;e(n,o.currentData.length,o.perPage,o.pageLengths,o.showOptions,o.showSearch,o.refine),t(n,o.startPage,o.totalPages,o.pagesToShow),a("#"+o.contentHolder).html(r(n,o.template,o.currentData,o.startPage,o.perPage,o.alwaysShowPager,o.informationToShow,o.errorTemplate)),a("#"+n).on("click",".page, .last-page, .first-page, .next-pages, .prev-pages",function(e){var s=parseInt(a(this).data("value")),g=parseInt(a("#"+n+" .perPage").val());a("#"+n+" .page.current").removeClass("current"),a("#"+n+' .page[data-value="'+s+'"]').addClass("current"),t(n,s,o.totalPages,o.pagesToShow),a("#"+o.contentHolder).html(r(n,o.template,o.currentData,s,g,o.alwaysShowPager,o.informationToShow,o.errorTemplate)),o.currentPage=s,a("#"+n).trigger("pagingChange")}),a("#"+n).on("click",".next-page",function(e){var s=o.currentPage+1,g=parseInt(a("#"+n+" .perPage").val());a("#"+n+" .page.current").removeClass("current"),a("#"+n+' .page[data-value="'+s+'"]').addClass("current"),t(n,s,o.totalPages,o.pagesToShow),a("#"+o.contentHolder).html(r(n,o.template,o.currentData,s,g,o.alwaysShowPager,o.informationToShow,o.errorTemplate)),o.currentPage=s,a("#"+n).trigger("pagingChange")}),a("#"+n).on("click",".prev-page",function(e){var s=o.currentPage-1,g=parseInt(a("#"+n+" .perPage").val());a("#"+n+" .page.current").removeClass("current"),a("#"+n+' .page[data-value="'+s+'"]').addClass("current"),t(n,s,o.totalPages,o.pagesToShow),a("#"+o.contentHolder).html(r(n,o.template,o.currentData,s,g,o.alwaysShowPager,o.informationToShow,o.errorTemplate)),o.currentPage=s,a("#"+n).trigger("pagingChange")}),a("#"+n).on("change",".perPage",function(s){var g=parseInt(a(this).val());e(n,o.data.length,g,o.pageLengths,o.showOptions,o.showSearch,o.refine),o.totalPages=Math.ceil(o.currentData.length/g),t(n,o.startPage,o.totalPages,o.pagesToShow),a("#"+o.contentHolder).html(r(n,o.template,o.currentData,o.startPage,g,o.alwaysShowPager,o.informationToShow,o.errorTemplate)),o.currentPage=o.startPage,a("#"+n).trigger("pagingChange")}),a("#"+n).on("keyup",".search",function(e){var s=parseInt(a("#"+n+" .perPage").val()),g=a(this).val();o.refine=g;var p=function(e,t,r){if(""==t)return;var n=t.toLowerCase();dataToKeep=[];for(var o=0;o<e.length;o++)a.each(r,function(a,t){if(null!=e[o][t]&&e[o][t].toLowerCase().indexOf(n)>=0)return dataToKeep.push(e[o]),!1});return dataToKeep}(o.data,g,o.informationToRefineBy);p||(p=o.data),o.currentData=p;var l=Math.ceil(o.currentData.length/s);o.totalPages=l,t(n,o.startPage,o.totalPages,o.pagesToShow),a("#"+o.contentHolder).html(r(n,o.template,o.currentData,o.startPage,s,o.alwaysShowPager,o.informationToShow,o.errorTemplate)),a("#"+n).trigger("pagingChange")}),a("#"+n).on("focusin",".search",function(){o.refineFocus=!0}),a("#"+n).on("focusout",".search",function(){o.refineFocus=!1})}(a(this).attr("id"),n)}})}(jQuery),String.prototype.format=function(){var a=arguments;return this.replace(/{(\d+)}/g,function(e,t){return void 0!==a[0][t]?a[0][t]:e})};
$(document).ready(function() {
var data = [{
"firstname": "John",
"lastname": "Smith"
}, {
"firstname": "Jane",
"lastname": "Doe"
}, {
"firstname": "James",
"lastname": "Smith"
}, {
"firstname": "Amanda",
"lastname": "Doe"
}, {
"firstname": "Billy",
"lastname": "Joe"
}];
$('#fs-table-table').paging({
data: data, //This is the data that is being used. It is using JSON data so you can pull from any source if you want.
contentHolder: 'fs-table-content', //The id for the area where you want the data to be displayed.
template: 'weeklyLessonTemplate', //The template that is being used to display the data.
errorTemplate: 'contentErrorTemplate', //The error template that is being used (optional)
informationToShow: ['firstname', 'lastname'], //The information that you want to show from the given data
informationToRefineBy: ['firstname', 'lastname'], //The information that you want to search on from the given data
perPage: 1, //Default number to show per page. (Since we have a small amount of data only show 1.)
pageLengths: [1, 2, 3, 4], //Options for number of items per page.
startPage: 1, //The default start page. (Better to leave as 1 but can be changed if desired).
pagesToShow: 4, //Number of pages to show at the top. If you have 10 pages it will show [...] when going above or below the this number.
showOptions: true, //Show the per page options.
showSearch: true, //Show the search bar.
alwaysShowPager: true //Show the pager even if there isn't any data. Should be true if showSearch is true otherwise there will be problems.
});
});
.pager span.current {
border: red;
border-radius: 5px;
font-weight: bold;
color: red;
}
.dataError {
width: 100%;
font-size: 20px;
text-align: center;
padding: 10px;
}
.searchBox {
width: 300px;
margin: 0 auto;
}
.searchBox .search {
width: 100%;
height: 30px;
}
.showing {
width: 100%;
text-align: center;
}
.dropdown:hover .dropdown-menu { display: block; }
.pager span {
border-radius: 5px;
border: #a6a6a8 1px solid;
padding: 5px 14px;
margin: 0 3px;
cursor: pointer;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.pager span:hover { background-color: #ddd; }
.pager span.current:hover {
background-color: #fff;
cursor: default;
}
.pager {
padding-left: 0;
margin: 20px 0;
text-align: center;
list-style: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="fs-table-content"></div>
<div id="fs-table-table"></div>
<script type="text/template" id="weeklyLessonTemplate">
<div class="fs-table-row header">
<div class="fs-table-cell">
Course Name
</div>
<div class="fs-table-cell">
Lessons
</div>
</div>
<div id="fs-table-content">
<div class="fs-table-row">
<div class="fs-table-cell" data-title="Course Name">
{0}
</div>
<div class="fs-table-cell" data-title="Lesson">
<input type="radio" class="radio" name="weekly_lesson" value="{1}" />
<label for="{1}">{1}</label>
</div>
</div>
</div>
</script>
I am a Bit new on this ..I am Replicating this Demo Example on my Local Server
http://www.bibeault.org/jqia2/chapter4/dvds/dvds.html
In Live Example Resulting data gets properly loaded ..But Not on My Machine ..My Code and css are exactly same ,
Update : Recently Tracked error :
>POST http://localhost:1701/applyFilters 405 Method Not Allowed<br/>
The HTTP verb POST used to access path '/applyFilters' is not allowed.
it is on .Net Server.... resulting data comes from this Page http://www.bibeault.org/jqia2/chapter4/dvds/applyFilters ... Do I need to completely recreate this page on My server also ?..Need some guidence
My Code:
<!DOCTYPE html>
<html>
<head>
<title>DVD Ambassador — Disc Locator</title>
<link rel="stylesheet" type="text/css" href="Styles/dvds.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.js"></script>
<script type="text/javascript">
var filterCount = 0;
$(function () {
$('#addFilterButton').click(function () {
var filterItem = $('<div>')
.addClass('filterItem')
.appendTo('#filterPane')
.data('suffix', '.' + (filterCount++));
$('div.template.filterChooser')
.children().clone().appendTo(filterItem)
.trigger('adjustName');
});
$('select.filterChooser').live('change', function () {
var filterType = $(':selected', this).attr('data-filter-type');
var filterItem = $(this).closest('.filterItem');
$('.qualifier', filterItem).remove();
$('div.template.' + filterType)
.children().clone().addClass('qualifier')
.appendTo(filterItem)
.trigger('adjustName');
$('option[value=""]', this).remove();
});
$('button.filterRemover').live('click', function () {
$(this).closest('div.filterItem').remove();
});
$('.filterItem [name]').live('adjustName', function () {
var suffix = $(this).closest('.filterItem').data('suffix');
if (/(\w)+\.(\d)+$/.test($(this).attr('name'))) return;
$(this).attr('name', $(this).attr('name') + suffix);
});
$('#addFilterButton').click();
$('#filtersForm').submit(function () {
$('#resultsPane').load('applyFilters', $('#filtersForm').serializeArray());
return false;
});
/* bonus exercise code -- uncomment to enable
$('input.numeric').live('keypress',function(event){
if (event.which < 48 || event.which > 57) return false;
});
*/
});
</script>
</head>
<body>
<div id="pageContent">
<h1>DVD Ambassador</h1>
<h2>Disc Locator</h2>
<form id="filtersForm" action="/fetchFilteredResults" method="post">
<fieldset id="filtersPane">
<legend>Filters</legend>
<div id="filterPane"></div>
<div class="buttonBar">
<button type="button" id="addFilterButton">Add Filter</button>
<button type="submit" id="applyFilterButton">Apply Filters</button>
</div>
</fieldset>
<div id="resultsPane"><span class="none">No results displayed</span></div>
</form>
</div>
<!-- hidden templates -->
<div id="templates">
<div class="template filterChooser">
<button type="button" class="filterRemover" title="Remove this filter">X</button>
<select name="filter" class="filterChooser" title="Select a property to filter">
<option value="" data-filter-type="" selected="selected">-- choose a filter --</option>
<option value="title" data-filter-type="stringMatch">DVD Title</option>
<option value="category" data-filter-type="stringMatch">Category</option>
<option value="binder" data-filter-type="numberRange">Binder</option>
<option value="release" data-filter-type="dateRange">Release Date</option>
<option value="viewed" data-filter-type="boolean">Viewed?</option>
</select>
</div>
<div class="template stringMatch">
<select name="stringMatchType">
<option value="*">contains</option>
<option value="^">starts with</option>
<option value="$">ends with</option>
<option value="=">is exactly</option>
</select>
<input type="text" name="term"/>
</div>
<div class="template numberRange">
<input type="text" name="numberRange1" class="numeric"/> <span>through</span>
<input type="text" name="numberRange2" class="numeric"/>
</div>
<div class="template dateRange">
<input type="text" name="dateRange1" class="dateValue"/> <span>through</span>
<input type="text" name="dateRange2" class="dateValue"/>
</div>
<div class="template boolean">
<input type="radio" name="booleanFilter" value="true" checked="checked"/> <span>Yes</span>
<input type="radio" name="booleanFilter" value="false"/> <span>No</span>
</div>
</div>
</body>
</html>
My Css:
body {
background-image: url(backg.jpg);
}
body,td,th {
font-family: Verdana,sans-serif;
font-size: 10pt;
}
#templates {
display:none;
}
#pageContent {
width: 720px;
background-color: white;
color: #444444;
border: 2px ridge #888888;
margin: 32px auto;
padding: 8px 32px;
}
h1,h2 {
text-align: center;
}
h1,h2,h3 {
margin: 0;
}
fieldset,legend {
border: 2px ridge silver;
}
fieldset {
padding-top: 12px;
}
legend {
padding: 3px 12px;
background-color: silver;
font-weight: bold;
}
#filterPane {
margin-bottom: 16px;
}
.filterItem * {
margin-right: 4px;
margin-bottom: 4px;
}
#resultsPane {
margin-top: 14px;
}
#resultsPane span.none{
color: silver;
font-style: italic;
}
#resultsPane table {
background-color: #444444;
width: 100%;
margin-top: 12px;
}
#resultsPane th {
background-color: silver;
border: 2px outset silver;
font-size: 0.9em;
}
#resultsPane td {
background-color: white;
padding: 1px 12px;
font-size: 0.8em;
text-align: center;
}
#resultsPane td:first-child {
text-align: left;
}
input.numeric {
width: 48px;
}
input.dateValue {
width: 64px;
}
Solved
This was just needed to add in web.config for IIS7
<?xml version="1.0"?>
<configuration>
<system.webServer>
<handlers>
<add name="htm" path="*.htm" verb="*" modules="IsapiModule" scriptProcessor="%windir%\system32\inetsrv\asp.dll" resourceType="Either" />
</handlers>
</system.webServer>
</configuration>
Everybody suggestion and this post helped:
http://zhongchenzhou.wordpress.com/2011/12/05/iis-7-7-5-allow-post-requests-to-html-files/
Basically that demo is running on an Apache server, not under IIS. The dvd list at http://www.bibeault.org/jqia2/chapter4/dvds/applyFilters is only a file with no extension.
if you browser one level above http://www.bibeault.org/jqia2/chapter4/dvds/ you can see the file list.
The quick fix is to rename it to a applyFilters.html on your local version and change the load reference.
The alternative is to allow files without extensions to be loaded under IIS (which is off by default for security reasons).
Assuming you are running some kind of development server: The server does not allow POST requests. Try to deploy your code on a real server and it should work.
Someone had similar problems and it was the VisualStudio Development server which caused the problem (http://www.mojoportal.com/Forums/Thread.aspx?pageid=5&t=6383~-1).
At the moment applyFilters is accessed on your local server. You could try:
$('#resultsPane').load('http://url.to.other.server/applyFilters', $('#filtersForm').serializeArray());
But then you have cross-site scripting. You should use a local version of applyFilters (and allow POST requests).
It seems like IIS does not allow POST requests on HTML files: https://serverfault.com/a/349193/133535
We have an instant-messaging chat system of sort on our site. It's just basically an embedded box that lists the text with a bar at the bottom to submit new text that gets written to a file.
Currently when you submit a new message you have to refresh the page in order for it and others to show up. How do I make it so when there's a new message it automatically refreshes or displays the message?
<!-- BEGIN CHAT -->
<div id='categories' class='ipsLayout_content clearfix'>
<div id='' class='brown_box_forum brown_box_stack'>
<table class="forum_group">
<tbody>
<tr>
<td style="background: -webkit-gradient(linear, left top, left bottom, from(#412E0E), to(#513A13));
background: -moz-linear-gradient(top, #412E0E, #513A13);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#412E0E', endColorstr='#513A13');
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#412E0E', endColorstr='#513A13');padding-top: 1px;
font-size: 14px; font-weight:bold;" align="center">
<div id="toggleBoardStats" class="groupname" style="text-align:center;cursor:pointer;">RuneMechanics Chat</div>
</td>
</tr>
</tbody>
</table>
<table class="forum_group" id="">
<tbody>
<tr class="spacer"><td colspan="5"></td></tr>
<tr>
<td>
<div style="height: 165px; width: 100%;">
<div id="" style="height:11px; overflow-y: auto; word-wrap: break-word; text-align: left; padding: 0px; font-style:none; font-size:12px; padding-bottom:7px; padding-left: 6px;">[00:00:00] GLOBAL: <i>There is a slight delay when sending messages, please be patient. | Chatbox Feedback: Here</i></div>
<div id="ChatStream" style="height: 110px; overflow-y: auto; word-wrap: break-word; text-align: left; padding: 5px; scrollbar-face-color: #3B3B3B;"></div>
<div style="bottom: 5px; width: 100%; margin-top: 5px; padding-bottom: 5px;">
<form id="Messenger" method="POST">
<span style="padding: 5px; padding-left: 3px;">
<input id="messageText" type="text" style="width: 99%; background:#4D3F27; border: none; color: #D6C6AB;" name="message" placeholder="Message..." autocomplete="off" />
</span>
<button id="sendMessage" style="height:0; width:0; background: #392c14; border:none;">Send</button>
</form>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
var chatFrozen = false;
var chatOpen = true;
jQuery(function($) {
$('#ChatStream').load('../libs/Chat/chatContent.file', function(){
$('#ChatStream').animate({ scrollTop: $('#ChatStream')[0].scrollHeight }, 500);
});
window.setInterval(function(){
if ( !chatFrozen && chatOpen )
{
if ( $('#ChatStream').scrollTop() >= ( $('#ChatStream')[0].scrollHeight ) )
{
$('#ChatStream').animate({ scrollTop: $('#ChatStream')[0].scrollHeight }, 500);
}
}
}, 200);
$('#sendMessage').click(function(e) {
e.preventDefault();
$.post('../libs/Chat/Message.php', $('#Messenger').serialize(), function( data ) {
$('#ChatStream').animate({ scrollTop: $('#ChatStream')[0].scrollHeight }, 500);
});
$('#messageText').val('');
if ( $('#ChatStream').scrollTop() >= ( $('#ChatStream')[0].scrollHeight - 200 ) )
{
$('#ChatStream').animate({ scrollTop: $('#ChatStream')[0].scrollHeight}, 500);
}
});
});
</script>
<!-- END CHAT -->
You want to push information to a client instead of the client requesting it. If the client is going to request the information, he should do a request every X seconds just to check if there is some new message. That is not very scalable and gives a delay of at least a couple of seconds.
The problem is, PHP is a language that is very much intended to be used for serving data when a request is made. If you have no other languages available I would strongly advise to use an external service like Pusher.com or Pubnub.com to create real-time applications.
These services provide you with a client-side Javascript library and a server-side PHP library. You send a push message in your PHP script and it is instantly received by the clients subscribed to a channel. Great for chat applications like yours.
You can also consider using Websocket in PHP such as http://socketo.me/ to create real time, bi-directional applications between clients and servers. I believe Pusher uses the same techology.