After I upgraded my XFS script from 2.2 to 2.3, and after trying to make the page ( myfiles.html ) in XFS 2.2 to look like the one in XFS 2.3, which means creating 2 pages ( files.html and folders.html ) then putting the code links in myfiles.html to allow user to view his folders/files lists separately and without needing to reload the full window every time he clicks on Next/Previous on the paging bar, just like XFS 2.3.
Well after that everything was ok except " paging " which appeared ( after replacing <TMPL_VAR paging> with <div class="paging bottom"></div> ) but in deactivated way ...
Here is myfiles.html page if you want to check :
Code: Select all
<script src="<TMPL_VAR site_url>/jquery-ui.js"></script>
<Form style="margin:0;" method="POST" action="<TMPL_VAR site_url>/" name="F1">
<input type="hidden" name="op" value="my_files">
<input type="hidden" name="token" value="<TMPL_VAR token>">
<input type="hidden" name="fld_id" value="<TMPL_VAR folder_id>">
<div class="folders">
<Table id="folders_list">
<TMPL_INCLUDE folders.html>
</Table>
<div class="paging bottom"></div>
</div>
<div class="files">
<Table id="files_list">
<TMPL_INCLUDE files.html>
</Table>
<div class="paging bottom"></div>
</div>
</Form>
<script>
setPagination('.files .paging',
{
op: 'my_files',
total: '<TMPL_VAR files_total>',
load: 'files',
target: '#files_list',
perpage: '<TMPL_VAR per_page>',
fld_id: '<TMPL_VAR folder_id>',
});
setPagination('.folders .paging',
{
op: 'my_files',
total: '<TMPL_VAR folders_total>',
load: 'folders',
target: '#folders_list',
perpage: '<TMPL_VAR per_page>',
fld_id: '<TMPL_VAR folder_id>',
});
</script>
<link href="//code.jquery.com/ui/1.11.2/themes/cupertino/jquery-ui.css" type="text/css" rel="stylesheet" />
<style type="text/css">
.hasmenu, .hasmenu2 {
border: 1px solid #008;
margin: 3px;
padding: 5px;
width: 30px;
}
/* Optionally define a fixed width for menus */
.ui-menu {
width: 220px;
}
/* Allow to use <kbd> elements inside the title to define shortcut hints. */
.ui-menu kbd {
padding-left: 1em;
float: right;
}
/* Define a custom icon */
.ui-icon.custom-icon-firefox {
background-image: url(application_firefox.gif);
background-position: 0 0;
}
</style>
<script>
$('#key').autocomplete({
source: "<TMPL_VAR site_url>?op=my_files&json=1",
select: function() { this.form.submit() }
});
</script>
<script src="<TMPL_VAR site_url>/selectable.js"></script>
<script src="<TMPL_VAR site_url>/js/dialog.js"></script>
<script>
$('#key').autocomplete({
source: "<TMPL_VAR site_url>?op=my_files&json=1",
select: function() { this.form.submit() }
});
</script>
<script language="JavaScript" type="text/javascript" CHARSET="UTF-8" src="<TMPL_VAR site_url>/export_files.js"></script>
</script>
<script type="text/javascript" language="JavaScript">
$(document).ready(function(){
$("#xfiles input[name=file_id]").change( function(){ $(this).parent().parent().toggleClass('hi2'); } );
$("#selall").change(function(){
var sel=this.checked;
$("#xfiles input[name=file_id]:enabled").each(function(){
this.checked = sel;
if(sel){$(this).parent().parent().addClass('hi2');} else {$(this).parent().parent().removeClass('hi2');}
});
});
});
function setFileFlag(file_ids, name, value) {
$.ajax({
type: 'POST',
url: '?',
data: {
op: 'my_files',
set_flag: name,
value: value,
file_id: file_ids,
},
success: function() {
$(document.F1).find('input[name=file_id]').each(function(i, e) {
if($.inArray(parseInt(this.value), file_ids) > -1) {
var element = $(this).closest('tr').find("[name=" + name + "]");
element[0].checked = value > 0 ? true : false;
element.closest('td')[0].className = value > 0 ? name : '';
}
});
},
});
}
$('.flag').click(function() {
var name = this.name.replace(/(un)?set_/,'');
var value = this.name.match(/^set_/) ? 1 : 0;
var file_ids = $('[name=F1] [name=file_id]')
.filter(function() { return this.checked; })
.map(function() { return(parseInt(this.value)) })
.toArray();
setFileFlag(file_ids, name, value);
});
</script>
<script>
function setPagination(element, opts)
{
$(element).paging(opts.total,
{
format: '< ncnn (- p) >',
perpage: opts.perpage,
onSelect: function (page)
{
if(document.readyState !== 'complete') return;
$.ajax({
url: opts.url,
type: 'POST',
data:
{
op: opts.op,
load: opts.load,
page: page.toString(),
fld_id: opts.fld_id,
usr_login: opts.usr_login
},
success: function(result)
{
$(opts.target).html(result);
}
});
},
onFormat: function (type)
{
var show_right = this.pages > 4;
var show_block = !show_right || this.value != this.pages;
if(this.pages <= 1) return ' ';
/* TODO: looks ugly, needs refactoring */
switch (type)
{
case 'right':
if(!show_right) return '';
return show_right
? '<a>' + this.value + '</a>'
: '';
case 'block':
if(!show_block) return '';
return this.value == this.page
? '<span>' + this.value + '</span>'
: '<a>' + this.value + '</a>';
case 'next': // >
return '<a href="#" class="next">Next <div id="triangle-right"></div></a>';
case 'prev': // <
return '<a href="#" class="prev"><div id="triangle-left"></div> Prev</a>'
case 'fill':
return show_right ? ".." : '';
}
}
});
$(element).css('cursor', 'pointer');
}
</script>
Facebook
Twitter