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.
Related
I have developed a large "single page application" using jQuery and jQuery UI. As I load various sections in the app it creates jQuery UI widgets like dialogs or date pickers. They tend to hang around and cause some issues when I reload certain sections. I would like the ability to call a function that destroys all jQuery UI widgets that have been loaded and remove them from the DOM. Any solution to catch all of them? Thanks!
In theory, it's easy enough to locate and destroy all widgets of a specific type on a page:
$(":ui-draggable").draggable("destroy");
So, it isn't unthinkable to create a loop around an array of widget types you know you're using, and delete every kind of widget on the list.
Use remove() or detach() to clear the contents of your jquery UI widgets and here is the difference
remove() removes the matched elements from the DOM completely.
detach() is like remove(), but keeps the stored data and events associated with the matched elements.
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
I am having a page that loads content dynamically. Depending on which menu item the user clicks, different tables are dynamically loaded and presented using jquery.
One column of each table is having an update linke used to update the content that specific row is representing. When clicking that link a JQuery UI Modal Dialog is presented with a form loaded from a server in which the user should update the content and post back.
This is how I understand it, please correct me if I am wrong. I need to load the jquery script at the same time as I load the dynamic content in order to bind the events between the javascript functions and the elements that is being loaded.
Assuming my assumption is correct I do load the content and the same JQuery UI Dialog scripts each time the user selects a different table. I load the content and jquery files from different javascript functions loaded together with the main index file.
The consequence is unpredictable behaviour (probably predictable using the same use case). When loading the table more than once and updating something so the modal dialog is presented, the dialog is not presented anymore after the first or second usage, as one example.
Could it be a problem that the jquery script is loaded more than once? If it is, what's the principle or patterna I should use for this kind of application. If all above is false assumption, still, what's the principle or patterns for designing this kind of solution where different kind of dynamic content is loaded at several places (all presented within the same index file) and all need the same jquery files.
Take a look a jQuery $.live() and $.delegate():
http://api.jquery.com/live/
http://api.jquery.com/delegate/
These will allow you to bind events to dynamically loaded content.
If I understand you correctly, you are asking how to bind events on dynamically generated content. You do not, in fact, have to load new script at the same time as new content in order to be able to hook events to said content.
What you want is the jQuery 'live' handler. You can specify the target of the binding using standard jQuery selectors. However, instead of the following syntax:
$('.foo').click(function(){ });
You would use
$('.foo').live('click', (function(){ });
The way this works is through event bubbling, where an event invoked on a child element (such as an input box) 'bubbles' up through all parent nodes. In this case, jQuery just watches the whole document for event bubbles, and then matches it against your specific selector conditions.
If I understand you correctly:
1) Multiple tables with an update link on each rows to update their content.
2) Update button opens a modal box with a form.
3) Form is posted and data is retrieved after being processed by the server to feed the concerned table row.
If the flow described above is correct, I don't see why you should load jQuery or jQuery ui more than once.
You should do something like
1) Load the page with all the scripts required.
2) Set up and ajax call with the jquery .ajax() method (doc)
3) Use the ajax call to submit the form data to the server and retrieve the results
4) Use the success callback of .ajax() to feed the row with the updated data. Within the success method you should be able to retrieve the context (a.k.a. the link you clicked) and identify the actual row you clicked.
I hope I make sense.
If by any chance you need to create new rows then you should consider checking the .live() and .delegate() method of jQuery.
Good luck.
I'm just playing around with backbone.js and some jQuery magic to prepare for some upcoming projects.
One test case contains a table whose rows are rendered by a backbone view. They get perfectly re-rendered on value change. Afterwards the whole table is sorted by an jQuery plugin (Animated Table Sort), rows move to new positions. In fact, this process works once, but the next time, rows appear twice, everything ends up in chaos.
Is it possible, that the link between DOM element and backbone view can't handle such an change? Are there any workarounds?
When you're developing with a Model/View framework like backbone.js or knockout.js, I find that you need to re-arrange your thinking and implementations to make changes to what is diplayed (like sorting) to the Model, and not allow them to happen in the view (like using a jquery plugin).
If you do end up using a view-side script to do something fancy (animations are a good example), then it is up to you to make sure the model is updated correctly, either by disabling or extending the binding.
Also note that according to the documentation, that animated sort plugin removes your table rows from the DOM, adds them to new DIVs, animates them, removes them from the DIVs, and restores them to the table. I'm wondering if after this is all done, backbone has lost track of those TDs, and when it re-renders after the change, it's just adding a new set since the last set is 'gone'.
Thanks for your answers. Indeed, the table sorter does a lot that makes it difficult fpr backbone to maintain bindings. I've switched over to the great Quicksand plugin which uses a hidden list to animate changes in another (visible) list. Fits better to backbone.js.
Your collection maintains an order for your models, and therefor your corresponding views. If an outside force (like a jQuery table sorting plugin) modifies the order of the views, this change is not inherently reflected in the Backbone collection, so things are quickly out of sync.
Also, if the table sorter clones elements and removes the original, Backbone would likely lose track of the views and end up recreating them.
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.