I have two lists that appear adjacent to each other on my page. List items can be dragged from one list into the other, and vice-versa (using jquery.sortable). The list item is a template, within which is a button. The click event for the button is defined using the Template.my-button.events method.
When the page is rendered, if I click this button in a list item, the events fire ok. If, however, I drag this list item into the adjacent list, the events no longer fire.
Does anyone know why this is and/or can suggest a way to circumvent this issue?
It is possible jquery.sortable messes with Meteor events tracker. Maybe not the most elegant way but a possible work-around would be to add an eventListener through classic JS in your Template.page.onRendered().
Something like:
Template.yourPage.onRendered(function() {
document.getElementById("yourButtonId").addEventListener("click", function() {
#your code
});
})
Related
I've worked thru the various jquery UI demos of drag and drop and sortable. These show how to get items from one list to another. One example even shows a shopping cart demo.
Am I missing something in that a item won't be part of a post to the server right? so what use is this other than reorganizing a display on a page?
Is it possible to adapt this to some sort of input field?
TIA
J
item won't be part of a post to the server right? so what use is this
other than reorganizing a display on a page?
Allowing users to reorganize the elements in the page is a nice feature, even if you aren't notified on the server. For example, by allowing users to drag and drop elements, you may store his current page layout in localStorage so that the next time the user visits your page, the layout is restored automatically. You don't need to be notified on the server side what the user preferences are.
All of these jQuery plugins (sortable, draggable, etc.) have functions that you can hook into and trigger some server side processing as well. For example, when a user drags and drops an element from one section of the screen to another, you can perfectly make an ajax request and do some processing on your end. This would provide a very nice user experience to the user.
For example:
$( ".selector" ).droppable({
drop: function( event, ui ) {
$.post('http://server/somection',data{...});//do something on the server-side
};
});
Absolutely! jsfiddle with demo here.
I'm having a little trouble controlling the visual display of my filtering tabs and pagination links using Isotope. I want to fix two issues:
1 How do I class one of my filtering tabs so it looks already selected on page load?
2 When I click on a pagination link in the container, the currently selected tab is declassed, meaning it no longer looks selected?
Please see the demo here andym.ca/designs/isotope/tester4.html and you will understand what I mean.
Regarding the first question; before the code of your Isotope logic proper, you could have this anonymous self-executing function to preset certain things
(function(){
var selector = $('.classtobefilteredoutonload');
$container.isotope({ filter: selector });
// other things that shall happen too go here, like assigning the right class to you PMTV tab div
return false;
})();
Or failing that, leverage hash history to preset your site.
Regarding the second question, it looks like you're using this CngClass function to toggle the focus for all your clickable "a" elements, so naturally Archive Videos will lose focus when you click on a pagination "a" element. You can see it well in Google Chrome's developer tools while clicking on your tabs and paginators.
Well, you should toggle a "highlighting class" on your pagination separately, with a different function from the one that toggles your tabs. An anonymous self-executing function executes as soon as it is encountered, so it looks like the rest of your DOM is not ready. Try the same function but with on document ready.
You can do it like this.
You can pre-mark your tab or whatever item on screen like this
Can anyone think of a (preferably quick) way to move the data() attached to a DOM element to a new instance of itself?
The lightbox plugin I'm using deletes and re-appends and element to the page in order to display it in the lightbox (to aviod the multiple-ids issue that ASP.net has), and obviously the .data() that is attached to the element is lost when this happens.
There's a relatively new overload for .clone() you can use to do this.
.clone(true) will copy the element with events and data intact.
Alternatively, change your plugin to use .detach() rather than .remove() which keeps data intact. From the docs:
The .detach() method is the same as .remove(), except that .detach() keeps all jQuery data associated with the removed elements. This method is useful when removed elements are to be reinserted into the DOM at a later time.
I'm using Views dropdown filter (with tags) and it works great. However I would like to customize it in this way:
1 - remove button "Apply" and automatically update Views (at the moment I'm updating it with Ajax)
2- allow my customer to change the order of the dropdown items (specifying top items)
3- select multiple items without having to press the SHIFT button on keyboard (do not unselect other items if new items are selected)
http://dl.dropbox.com/u/72686/viewsFilter1.png
Let's suppose the items in the image are tags... something like this:
http://dl.dropbox.com/u/72686/viewsFilter2.png
thanks
Use jQuery to .hide() the Apply button, and then set a handler on the filter fields so that whenever one of them is changed (i.e., by the user), the Apply button registers a click.
Hmm, can't help with this one. You might be stuck writing a custom module that hooks into the Views API.
Sounds like the Sexy Exposed module would solve this problem?
I'm using the following code to keep the items selected and it works.
$('#edit-tid option').click(function() {
$(this).toggleClass("selected");
$("option:not(.selected)").removeAttr("selected");
$("option.selected").attr("selected", "selected");
//submit request
$('#edit-submit-Portfolio').click();
});
When a request is submitted the page is refreshed. The selected items are still selected (class="selected") but the javascript code do not keep them selected.. I don't understand why, since they have the correct class attribute.
So.. it doesn't work after refresh, even if the html code is the same (the same class="selected" attribute is assigned to the same items).
thanks
I've solved point 1 and 2, installing better exposed filter module from drupal website.
I have an ajax controltoolkit reorderlist within an asp.net application.
I need to disable certain specific steps from being reordered. This has to be done dynamically. All steps are consecutive and start from the beginning, but it's not known until runtime how many need to be disabled from being reordered any further.
I tried the e.item.enabled = false for reorderlist_itemdatabound but this just disabled links. I need to disable the drag handler.
Any help is greatly appreciated. Thanks!
To be honest, I'm not too familiar with this control, but...
You need to hide the drag handler div (or whatever is in the 'DragHandleTemplate' I believe) and/or change its class. Two suggestions:
1) Add a javascript startup script to disable the divs in question.
2) Subclass this control... Override the Render() method. Replace it with original code from ReorderList, but check the Item to see if you should render the drag handle.
as a workaround to disable drag'n'drop for some item - you can set width=0 to the control inside <DragHandleTemplate> </DragHandleTemplate>. Thus user won't be able to pick the item for dragging.
Suppose you have an image with id dragme in DragHandleTemplate; you can do this in the ItemDataBound handler:
Image dragMe = (Image)((TableRow)e.Item.Controls[0].Controls[0]).Cells[0].Controls[0].FindControl("dragMe");
dragMe.Style.Add(HtmlTextWriterStyle.Visibility, "hidden");
This way you preserve the alignment.