1
bumciach
jqueryFileTree plugin with XoopsForm
  • 2009/8/25 11:03

  • bumciach

  • Not too shy to talk

  • Posts: 153

  • Since: 2007/6/25


Hello!
I did for my own purposes form element to set the directory (and path). But if somebody is interested in it any suggestions welcome. This is a very preliminary version (some things are hardcoded). Maybe it will be useful for someone.

I used jqueryFileTree plugin to display directories (it points uploads dir). After opening the folder the path is copied to the text box (can also be edited manually). The form sends the value of this textbox for further processing.

For demo download and install this module pfxfp.zip

/modules/pfxfp/class/formelement/formtextdirpath.php
class pf_XoopsFormDirPath extends XoopsFormText
{
    function 
pf_XoopsFormDirPath($caption$name$size 15$value0)
    {
        
//$value = !is_numeric($value) ? time() : intval($value);
        
$this->XoopsFormText($caption$name$size255$value);
        
$this->addScript();
    }
    
    function 
addScript()
    {
      global 
$xoTheme$xoopsModule;
      
$ele_name $this->getName();
      
$dirname XOOPS_URL.'/modules/'.$xoopsModule->getVar("dirname");
      
$xoTheme->addScript($dirname '/js/jqueryFileTree/jqueryFileTree.js');
    
$xoTheme->addStylesheet($dirname '/js/jqueryFileTree/jqueryFileTree.css');
      
$xoTheme->addScript(null, array( 'type' => 'application/x-javascript' ), '
        $(document).ready( function() {
            $('
#uploadsdir_'.$ele_name.'').fileTree({ 
              
root''.XOOPS_ROOT_PATH.'/uploads/',
              
script''.$dirname.'/js/jqueryFileTree/connectors/jqueryFileTree.php',
              
folderclicked: function(node) { $('#'.$ele_name.'').val(node);
     }
               },
              
              function(
file) {
                
alert(file);
            });
        });
    
');
  }

    function render()
    { 
        $ele_name = $this->getName();
        $ele_value = $this->getValue();
        return '
<div id="uploadsdir_'.$ele_name.'" style="height:200px;width:50%;border:1px solid #ccc;overflow:auto;">div><input type="text" name="'.$ele_name.'" id="'.$ele_name.'" size="'.$this->getSize().'" value="'.$ele_value.'"'.$this->getExtra().' />';
    }
}


usage:
/modules/pfxfp/index.php
include_once(XOOPS_ROOT_PATH."/class/xoopsformloader.php");
include_once(
PFXFP_ROOT_PATH."/class/formelement/formtextdirpath.php");
$form = new XoopsThemeForm('test''frmCategory''category.php');
        [...]

        
//DIRECTORY BROWSER
          
$form->addElement(new pf_XoopsFormDirPath('Destination''dbf_dir'50''), false); 

        [...]
        
$form->display();

2
kaotik
Re: jqueryFileTree plugin with XoopsForm
  • 2009/8/25 13:11

  • kaotik

  • Just can't stay away

  • Posts: 861

  • Since: 2004/2/19


Very nice job bumciach! That's a great plugin, I could actually use it for myself
I'm going to place it on my "recommended plugins" list :)

3
trabis
Re: jqueryFileTree plugin with XoopsForm
  • 2009/8/25 16:43

  • trabis

  • Core Developer

  • Posts: 2269

  • Since: 2006/9/1 1


Thanks, this is very useful.

4
bumciach
Re: jqueryFileTree plugin with XoopsForm
  • 2009/8/27 14:27

  • bumciach

  • Not too shy to talk

  • Posts: 153

  • Since: 2007/6/25


A curious detail: my code doesn't work on Internet Explorer, because of declarations in addScript
'type' => 'application/x-javascript'


There should be 'text/javascript' not 'application/x-javascript'.

Login

Who's Online

123 user(s) are online (111 user(s) are browsing Support Forums)


Members: 0


Guests: 123


more...

Donat-O-Meter

Stats
Goal: $100.00
Due Date: Dec 31
Gross Amount: $0.00
Net Balance: $0.00
Left to go: $100.00
Make donations with PayPal!

Latest GitHub Commits