So I have a normal jQueryUI Sortable List IE: http://jqueryui.com/sortable/#default
However I would like the drag(or sort) event only to be triggered when the user clicks on a specific object inside my list item. For the sake of the example lets say the arrows in the link I provide would trigger the drag event but clicking on the text wouldn't.
Suggestions?
You can use the handle option
http://api.jqueryui.com/sortable/#option-handle
Related
So I have a listview with multiple items, so when each item is clicked it will go to a detail page, but how do I fill out the detail view with dynamic contents? Specifically, how do I capture the key, which is the clicked item's inner html, and when I query some dynamic contents, how do I put them in the detail view? The methods I tried include 1) use click event for each item, but the event does not trigger, is that normal? 2) I tried the live event on the detail view page with pagebeforeshow, but it does not trigger either. Please help.
Many approaches exist to do this. Here is one idea that may help you:
In your listview, specify a data ID for each of the hyperlinks in the list item. The definitions could look like:
<li><a data-id="some-identifier">My Title</a></li>
For all the items the <li> items in the list, you then have a single click handler, which would use the data-id to initialize the detail page. The click handler would look something like this (my apologies if this is out of data, I have not recently used jQuery Mobile, so there may be an updated, better approach):
$('#my-listview-id').delegate('a', 'vclick', function () {
alert ('user selected something: ' + $(this).attr('data-id'));
});
The alert will show you the ID the user selected. So in the click handler you can update the detail page.
I'd like to create a form_for statement which allows the user to select elements one-by-one from a drop down menu (or an auto-complete field). As the user selects each item, they should be displayed in list format at the top of the screen. When the user has finished selecting elements, the form can be submitted and the list of selected elements is sent to the receiving controller action.
Can someone tell me how to implement this?
Maybe Chosen is what you need.
Take a look at:
http://harvesthq.github.com/chosen/
I have on select_tag on my page and this drop down have language collection. now i want to change all the messages according to language selected in the drop down. For that i need to call action on the selection change. So how i will call the same.
Thanks,
Lalit
You could have the drop down within a form, when the drop down changes use javascript to submit the form.
I'm using jQueryUI Accordion, and genereate the elements on the fly. I need to prevent accordion expanding if we click Remove action link inside the header.
To stop further handlers from executing after one bound using .live(), the handler must return false. Calling .stopPropagation() will not accomplish this.
No luck with return false. Please see the demo.
I don't think you will have too much luck achieving what you want with live(), as jQuery only supports event bubbling and not event capturing. The design decision was probably due to the fact the IE does not support event capturing, even though W3C's speicification has the flexibility for both.
Your best bet is to attach a click event to the remove button right after it is inserted into the DOM (to stop the event propagation) before you re-initiate the accordion. You may need to take care not to bind click event to the existing remove buttons multiple times.
The pseudocode would look something like this:
call .accordion('destory') on the current accordion
create the new element, i.e. <h2>...<a class="revmoe">...</a></h2><div>...</div>
insert the new element to the existing accordion
bind a click event to the remove button in the new element to stop event propagation
initiate the accordion, i.e. .accordion({..})
SO posts on event capturing in jQuery:
event capturing with jQuery
Event Capturing vs Event Bubbling
Just use the given functions by the plugin:
$('#accordion').accordion({active:8, disabled:true});
jQuery('.remove').click(function(){
$('#accordion').accordion('disable');
})
I chose the option "active:8" because this way no header is opened from the beginning (index -1 does not work for IE). Check the function and options out at: http://docs.jquery.com/UI/Accordion
Hope this is what you were looking for :-)
There are two sortable UL elements which are linked to each other via 'connectWith' options so that items from one list can be moved to another list and vice versa. I'm in need to prohibit from moving/dragging some items to another list while still letting them to be draggable within their own list. Is there any way to implement such behavior?
For now I can only restrict items from dragging using 'items' option of those sortable lists but while this prevents the desired items from dragging to another list this also prevents those items from dragging within their own lists (which is bad).
The way I was able to get around this is by using the li elements onMouseDown and onMouseUp events. When the mouse is clicked, I changed my CSS class (or whatever else) so that it falls out of the items list.