Ian
Site Administrator
Registered: 28th Aug 99
Location: Liverpool
User status: Offline
|
Working on the new file manager, got a basic drag and drop script to start with.
Wanted to add a few features, namely new folder, hide/unhide. Drawn a bit of a blank with both.
Currently working on new folder, right click where you want it and it does a little AJAX call to a PHP script which makes the folder in the DB, sound that works. If you reload the page its there.
Want to make it appear at the time it's made though without a page reload, can't at all get my head around GetElementsById / GetElementByTag etc.
That is how the tree is initialised and I was hoping to re-initialise just that portion. Gets a little more complicated because if you make a new folder inside a folder which doesn't currently have any in then you also need make the plus/minus icon visible
Init function is called initTree
I've opened it up so it thinks anyone who goes there is me - http://www.weekendracer.co.uk/files.php
(EDIT - NEED TO BE LOGGED IN NOW)
Code is here - http://www.weekendracer.co.uk/js/drag-drop-folder-tree.js
The bit between the lines where it says 'crap' in the comments it the bit that doesn't work, that section can be removed.
[Edited on 02-01-2012 by Ian]
[Edited on 03-01-2012 by Ian]
|
Ian
Site Administrator
Registered: 28th Aug 99
Location: Liverpool
User status: Offline
|
Or if you don't fancy getting familiar with all that code, recommend me a DOM inspector that updates in real time as the page changes. I've got one but it closes if you come out of inspect mode.
|
ed
Member
Registered: 10th Sep 03
User status: Offline
|
jQuery?
You can Post to your server, have it update the database, return some data and then use an onSuccess callback to update the tree. You can set beforeSend, onFailure, onComplete callbacks too with the fill AJAX request method.
|
Ian
Site Administrator
Registered: 28th Aug 99
Location: Liverpool
User status: Offline
|
That's all done, it's the redrawing the tree once the DB is updated I'm strugging with.
AJAX calls returns the insert id of the new record so I can name the node, just don't know how to create the tags.
|
ed
Member
Registered: 10th Sep 03
User status: Offline
|
You also access the DOM using CSS3 selectors because it uses Sizzle - so you can use #ids, .classes and html tag names as selectors as well as some of the pseudo selectors.
|
Paul_J
Member
Registered: 6th Jun 02
Location: London
User status: Offline
|
quote:
Originally posted by ed
jQuery
This.
You can use Jquery / CSS to just update the elements without a page reload
|
Ian
Site Administrator
Registered: 28th Aug 99
Location: Liverpool
User status: Offline
|
I know its possible, I need some code to do it!
|
ed
Member
Registered: 10th Sep 03
User status: Offline
|
To add an element using jQuery to an existing folder I'd do:
$('#node20:has(ul) ul').append('<li id="node74"><a href="#">New Folder</a></li>');
$('#node20:not(ul)').append('<ul><li id="node74"><a href="#">New Folder</a></li></ul>');
I wouldn't really know where to start doing it 'by hand' :redface:
|
ed
Member
Registered: 10th Sep 03
User status: Offline
|
Obviously by adding that to the on complete method of my AJAX request.
|
ed
Member
Registered: 10th Sep 03
User status: Offline
|
Actually, my code isn't that great. To check if your li already has a child ul or not, you should probably do something in this example:
http://stackoverflow.com/questions/3214664/jquery-rule-for-does-not-contain-element
|
Ian
Site Administrator
Registered: 28th Aug 99
Location: Liverpool
User status: Offline
|
Can I get raw JS functions?
Not currently using JQuery and don't really want to if I can avoid it.
Thinking something to do with GetElementById to find that portion then some tests to find out whether it has a UL, if not make one then populate it with the insert id from the DB.
Sounds bloody easy but its had most of my week thus far.
|
Dom
Member
Registered: 13th Sep 03
User status: Offline
|
Why can't you reload the complete directory structure on callbacks? ie: parse back the complete LI/UL structure (generated server-side) on AJAX requests and do an innerHTML on the 'dhtmlgoodies_tree2' UL (and then you'll probably have to re-init the treelist). Just need to modify the callback functions - '__newComplete' etc.
Bit bodgy but do a simple string replace on the innerHTML. So on the AJAX callback functions, grab the parentID's innerHTML, replace the text '<UL>' with '<UL><li id="node(number)"><a href="#">New Folder</a></li>'. As said this is bodgy as and will obviously place folders at the top.
Edit - scrap that. Use the createElement (create the new list tag) and append it as a new childnode to the parentID (list tag). You'll probably need to use the nextSibling/firstChild DOM property to select the unordered list tag though.
[Edited on 02-01-2012 by Dom]
|
Ian
Site Administrator
Registered: 28th Aug 99
Location: Liverpool
User status: Offline
|
Could redraw the tree but thought that was a bit overkill on the data transfer while its not necessary.
Just given me something else to think about - the position of the new item. Plan is also to call the rename function after its made so straight away you need to call it something but it should still sit in the correct order alphabetically.
In fact - rename probably needs altering to do the same.
|
Ian
Site Administrator
Registered: 28th Aug 99
Location: Liverpool
User status: Offline
|
quote:
Originally posted by Dom
Bit bodgy but do a simple string replace on the innerHTML.
No reason why I couldn't read in the structure, sort the array based on the text in there and re-create in the right order?
Definitely a solution in there, just can't get the syntax under control to do it.
[Edited on 02-01-2012 by Ian]
|
Dom
Member
Registered: 13th Sep 03
User status: Offline
|
Read edit.... it should work, been a while since i've had to use straight JS though.
On the AJAX callback functions -
code:
var rootNode = document.getElementById(parentId);
var newLIChild = document.createElement("LI");
newLIChild.id = "node83838";
newLIChild.innerHTML = "<a href="#">New Folder</a>";
rootNode.appendChild(newLIChild);
//OR (possibly could one liner this)
rootNode.nextSibling;
rootNode.appendChild(newLIChild);
//OR
rootNode.firstChild;
rootNode.appendChild(newLIChild);
Something like that. Tbf, JQuery is a lot lot easier and isn't much of a overhead.
Edit - If you wanted some order then loop through the child nodes and do as you said; store text and ID's in the array, order and replace/re-add them.
Although if you were parsing the whole structure from PHP, i'd use parse it back as JSON and recreate the HTML tag structure for 'dhtmlgoodies_tree2' client-side. Would keep it minimal.
[Edited on 02-01-2012 by Dom]
|
Ian
Site Administrator
Registered: 28th Aug 99
Location: Liverpool
User status: Offline
|
Doing the whole tree would probably also mess up the scroll position on a big tree?
I'll have a go with your code and see if I can get stuff appearing. I couldn't get anything new at all written from the code.
|
Dom
Member
Registered: 13th Sep 03
User status: Offline
|
quote:
Originally posted by Ian
Doing the whole tree would probably also mess up the scroll position on a big tree?
I'll have a go with your code and see if I can get stuff appearing. I couldn't get anything new at all written from the code.
Could just use the scrollTop and feed it the UL/LI element ID offsetTop position code:
document.body.scrollTop = document.getElementById(parentId).offsetTop;
.
|
Ian
Site Administrator
Registered: 28th Aug 99
Location: Liverpool
User status: Offline
|
Nice, cheers.
|
Ian
Site Administrator
Registered: 28th Aug 99
Location: Liverpool
User status: Offline
|
Did it using createElement to make up the list of new tags and appendChild to place them.
No sorting, still might fix that but fairly happy to have cracked that one.
Also calls rename, so might bodge the alpha sort in to that, works then for new and existing folders.
[Edited on 03-01-2012 by Ian]
|
