XFileSharing Pro - After upgrading to XFS 2.3 I had a " paging " prob

Message
Author
Steve9e8
Posts: 81
Joined: Jun 19, 2014 11:27 am

After upgrading to XFS 2.3 I had a " paging " prob

#1 Postby Steve9e8 » Jan 26, 2016 10:04 pm

Hello everyone

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>
So would you please help me to make paging bar work.[/url]