Trying to create a simple sortable list
$('#sortable').sortable();
$('#sortable').disableSelection();
But the result is endless number of placeholders created on mousedown. I am using twitter bootstrap for the application, if that helps!
Related
I understand that I can use .on to bind functions to DOM elements when some event occurs on an element.
I have been using JQuery-ui, and I want to create different JQuery-ui elements once they have loaded on the page. For example, create a button when one is loaded on the page:
$(document.body).on('load', '.my-button', function(){
$(this).button()
});
However, this doesn't work (in fact, the handler is never reached).
How can I create JQuery-ui widgets when they load in the DOM?
jQuery does not fire any events when an element is created. Instead, use the watch plugin and run your button()s from there.
Hi I am using Struts2 and hibernate now in my jsp I have Two dropdown ,on selection of first drop it should call a function and retrive the values for second drop down from the database
Please help
Well you have number of options here and some of them are
user struts2-jquery plugin which comes with this feature where you can create two dependable select.
user simple jquery with JSON (struts2 plugin) and use ajax.
i will prefer second approach which is much more flexible.create a custom JS function with help from jquery and when use select first option from drop down call your action methods which will send JSON data based on the selected values and use JQuery build in JSON parsing mechanism to parse the content and fill second drop-down.
a simple Google search will give you a number of results.
I am using a twitter jquery plugin to display a list (ul/li) of twitter posts .
Also I want my users to be able to rearrange the posts as they want and I want the moved post to be marked.
I saw a post here how to do so.
If I use this the selectable function doesn't work(I can rearrange but can't select):
$(document).ready(function() {
$(".ul_sortable" ).sortable().selectable();
});
If I use this the sortable function doesn't work(I can select but cant re arrange):
$(".ul_sortable" ).sortable().selectable();
The key is to use the sortable handle option as shown in the link to the other question.
Sortable and selectable both take over the mouse events for the items they are applied to, however the handle option allows you to apply the sorting to a part of the item therefor allowing selectable to work on the rest of the item.
It should also be noted that selecting a bunch of items then sorting them all together is not natively supported.
For marking if an item is moved you can use a variety of sortable events such as stop and change docs
I am using Django and the django-dynamic-formset plugin to generate a JQuery Mobile (JQM) site. I have nested forms that allow the user to click a "Add" link to another line to the form. This works great without JQM, but when JQM is used to style the form widgets the radio button labels do not trigger the correct radio button.
I have put up a static example of the behaviour, based on the generated HTML. Click the "Add" link, then try choosing a severity for the added item. The "for" attributes of the labels appear to update correctly, so I do not know what I'm doing wrong.
The django-dynamic-formset guide provides me with a way to call a JavaScript function after the user clicks the "Add" button, but I do not know if there's a JQM method I should be calling that will fix the issue. When I use JQM's enhanceWithin function it triggers a page load, which submits my form to Django, which I don't want at that point because the form won't validate yet.
Edit: I uploaded a much better example to the same URL.
After enough caffeine and peanut M&M's I have figured it out.
Reason for Failure: The django-dynamic-formset (DDF) plugin duplicates the form you give it. But the form is cloned as-is, which already includes all the JQuery Mobile (JQM) processing. This causes JQM to ignore it and makes the radio buttons misbehave.
The Solution: The DDF plugin allows you to specify what form to clone by its formTemplate parameter. JQM allows you to disable automatic mobile-enhancement of certain elements. Create an un-enhanced version of your form, and pass that to DDF as your formTemplate.
More Details:
I put this coded into my HTML head, before the reference to JQM:
<script>
$(document).bind('mobileinit',function(){
$.mobile.ignoreContentEnabled = true; // required for using the natural forms
});
</script>
And included this style to hide my "natural" form:
<style>
.natural-form { visibility: hidden; display: none; }
</style>
In the Django code I added a <div class='natural-form> and put a dummy version of my form in it (being sure to surround it another <div> with a unique ID for reference later). In my initialization of DDF I give it the unique ID as the parameter to formTemplate.
I was told on another forum I would have to hack DDF and JQM to get this to work. I am impressed at the design of both of these libraries - flexible enough that a newbie to JQuery can stick all the pieces in the right places and get something out of it.
Is there any way of using jQuery Mobile for only certain features such as toggle on/off switches but not have it take over the entire CSS?
You can use native form elements:
http://jquerymobile.com/demos/1.0rc2/docs/forms/forms-all-native.html
Related:
Tell JQuery Mobile not to add classes?
You can set this per element with a data-role="none" attribute on the element or bind to the mobileinit event like so:
$(document).bind('mobileinit',function(){
$.mobile.page.prototype.options.keepNative = "select, input.foo, textarea.bar";
});
Notice how you can add classes to the selectors.
From the docs:
Or, if you'd like to prevent auto-initialization without adding
attributes to your markup, you can customize the selector that is used
for preventing auto-initialization by setting the page plugin's
keepNative option (which defaults to [data-role="none"]. Be sure to
configure this option inside an event handler bound to the mobileinit
event, so that it applies to the first page as well as subsequent
pages that are loaded.
Docs on this can be found here: http://jquerymobile.com/demos/1.0rc2/docs/forms/docs-forms.html