javascript tree control + permalinks and back/forward buttons for navigation - javascript

Here's the task at hand. I need to implement a fully client-side tree that will work finely with permalinks and back/forward buttons for navigation.
E.g. I open a page with such tree control, expand some nodes, then press back and it collapses the last expanded node, then press forward and it expands the subject node. Finally I copy the url of the page and send it to my colleague - she clicks the url and the tree gets its nodes open to reveal the same tree structure that I see on my screen.
I'm looking for a JavaScript tree control that would fit the following list of requirements:
(Mandatory) Support for asynchronous node retrieval.
Possibility to hook into expand/collapse events to invoke custom logic that will serialize tree state into url anchor.
API for programmatic expanding/collapsing of given nodes, so that I don't have to emulate clicks when deserializing tree state upon pageload.
I've already had some experience with jsTree and jQuery treeview.
The problem with jsTree is that it uses <a> tags to render nodes, which messes up url anchors on click. After a couple of hours I've managed to migrate it to <span>'s, though my solution works only in Firefox. Not as good as I'd like.
Another thing happened when I tinkered with jQuery treeView. At first I was embarassed by its "not in active development" status, though upon a second glance it appeared to be a simple yet powerful widget. The async demo looked excellent so I tried to reproduce it at my PC and with my data. But then I faced a weird bug - when my JSON service returned lazy nodes (i.e. ones that had hasChildren set to true), the treeview immediately expanded those and rendered the "loading" gif, though without loading anything. I tried to debug this glitch, but I'm really not that smart to understand how all those callbacks and aspects interact with each other. At least not within the time window I had.

Related

Save DOM node and it's event handlers in the backend

I am trying to make a page which consists of many UI tools and visualizations. The problem is as these visualizations increase in a single page the performance of the browser goes down and becomes slower.
I was thinking that if I can save some UI nodes which user is not looking at and send it to server for saving and when users tries to come to the same node to visualize I can get the node and it's event handlers and initialize it again faster.
I tried jquery clone method but when I stringify the object to save it looses the event handlers. Has anyone tried to do this before?
I am not sure if i get the question right, but i assume that there is one scrollable page with lots of graphs and other visualizations. And problem is that page becomes too slow because of that (scrolling interacting, memory etc.). Have you tried to show user those visualizations only if they are in browser view and remove those which are not visible (including events). IF user scrolls back, it would get re-rendered once again (with initing events for this specific visualization).
Hope this helps if it not possible solution let me know i will remove this answer

drag to destroy an element in ruby on rails

I would like to simulate some sort of drag and drop to delete capability on my site (like the recycle bin/trash on windows/osx)
I have a bunch of objects in the database that are being represented by ruby as div on my site.
I know I can add a drag capability to each of the divs using jquery, but I am not sure what to do afterward.
How do I assigned a specific area (an image) to initiate the destroy command? Since each object has a unique id the destroy should come from the object , but should be triggered by the trash image
Do I need to render my UI after such an action or would rails take care of it, like it does now with the regular destroy that comes in scaffolding ?
I know that it is a bit of an abstract question, but I am still in the design process and haven't written much code.
Since you mention jquery, I'm guessing that you're using the Draggables from jQuery UI. You should also look at the docs for Droppable, which details how to handle drop events. After you catch the drop event you could either do a full page post to your server, which would refresh the page and update the UI, or you could make an AJAX call and update the UI via JS.

jQuery/JavaScript Bind action after event jQuery UI Tabs

Just started a new job, working with the zend framework, the project is essentially complete its all patch work and adding onto the existing. However I came across a problem recently. The people who initially developed this project just seem to have bolted everything on top of everything on top of everything. So its messy, and its a major task in it of itself to find something to alter it in some way shape form or another.
What my current problem is, is the project is using datatables and jQuery UI. In this particular case I am working with a page that is "Tab" based. And I have multiple datatables on the page one under each tab. Problem is the datatable has to be redrawn on the tabs that are initially hidden on the page load as the tables don't conform to the element they reside in.
So the original developers have it somewhere in this system where? I can't find.. where they some how dynamically add $(#element).tabs({}) onto the page on a per page basis. Like I said its rather messy and overtly complicated the way they built this thing. So with that in mind I can't find the particular tabs function originally being called earlier in the page load so I can alter it to redraw the table on load.
So what I am wondering is, is there a way to catch a tabs event, that when it shows the tabs content I can just trigger off that event without having to alter the original call to tabs()?
I think the event you want to bind to is:
$( ".selector" ).bind( "tabsselect", function(event, ui) {
...
// Objects available in the function context:
ui.tab // anchor element of the selected (clicked) tab
ui.panel // element, that contains the selected/clicked tab contents
ui.index // zero-based index of the selected (clicked) tab
});
from JQuery UI

Beatport new interface

Beatports new interface has solved a major problem I was looking for the solution too.
Namely, it keeps a "player" interface at the moment and you can browser to different parts of the site (also changing the url) without reloading or interrupting the player.
I cannot for the life of me understand how they have done this, can any of you guys figure it out?!
Many thanks for any replies I get
Looks like they are just using AJAX to load new content but have taken care to make it work and look pretty seamless. You can get better insight into what events are attached to what elements via the Visual Events bookmarklet. Once you find the code that triggers the event, you can run the obfuscated javascript through JSBeautifier to examine it more closely.
Specifically, it looks like they're adding click handlers to all anchor tags, passing off the event if it was triggered with a middle click or modified with a keyboard key, otherwise passing it to a dynamic loader which handles state and other specific conditions like multiple clicks. The seamlessness of it comes from the way they deal with URLs making every page bookmarkable and the browser history so the back and forward buttons work as you would expect on a "normal" site.

Dealing with Javascript events applicable only for certain content

I'm having trouble understanding conceptually what I should do while trying to make my first large Javascript web application.
Depending on which tab a user has selected, I show different content inside a container. The content is more than just text and uses different Javascript functions and events. I am using the Yahoo! UI Library's "TabView" implementation, but the way that this issue should be handled would probably apply to other Tab approaches.
What I was thinking of doing was basically the following:
Create separate modules for each tab (e.g. MYAPP.modules.tabCalendar and MYAPP.modules.tabJournal). When the user clicks on a different tab (or navigates with browser buttons to a previous tab state), I could call MYAPP.modules[oldModule].disable() and MYAPP.modules[newModules].enable(). These functions would subscribe or unsubscribe their custom events (for example, a general click handler attached to the container).
An alternate approach to dealing with events might be to have a single global click handler. If the click is inside the container, then determine which tab is currently selected and send the click event to MYAPP.modules[currentTab].onClick().
Or, the global click handler could fire a Custom Event to which the modules have subscribed since page load, and each module's onClick events will run and determine whether or not they should do anything.
There seem to be a lot of options, but I've been having trouble finding resources that talk about the best ways to do things like this. Am I on the right path? How should I handle this?
Use the events already built into TabView to queue your JS to do things.
http://developer.yahoo.com/yui/tabview/#handlingevents
For tab changes you'll be told the previous/next tabs selected and such which should be more than enough for your JS to figure out what it should do. If you want to write a translation layer that'll look at the events and do something based on it that's fine but it's not strictly necessary.
I'm a bit fuzzy on the problem.
Yes, you should modularize your code.
Have each module setup event handlers on the elements in their respective container.
That's it. YUI TabView handles the tab switching so you don't need to enable/disable anything.

Categories