Collapse all form items JQuery Mobile - javascript

Using J Query mobile 1.4.0
I have a form that has many expandable elements with multiple check boxes. When I click my refresh button I can clear all the users selections, however the different field sets remain expanded. I could refresh the page however I don't think that is a smooth option. Other than writing JS for each field set is there a method to reload the form or collapse all form elements?
A good example for a list view However this is for individual lists. I will need this code to apply to all form elements (collapsible fieldsets)

To collapse or expand a collapsible programmatically, use .collapsible() widget with collapse or expand arguments.
/* collapse */
$(".selector").collapsible("collapse");
/* expand */
$(".selector").collapsible("expand");

Related

jQuery - having icons at the end of drop down list items with independant actions

Ive looked around a bit and not found anything so im not even sure if this is possible.
What I want to do is have a drop down list. Each list item is a specific type of a view for a list. Is it possible to add an icon at the end that when clicked will fire off a different action to just selecting the item?
So the user opens the drop down. They see View 1. At the end there is a pencil button image. If they select View 1 the list view changes. If they select the pencil it opens up the edit View dialog for that view.
Is this even possible using javascript/jQuery?
It won't be do-able with the standard select element, however it's definitely possible using divs and heavy Javascript/jQuery.
Something similar to how the jQuery plugin Chosen works - it hides the original select element and rebuilds it with divs, adding interaction with jQuery (obviously).

Hiding panels from EasyUi tabs

I have a easyui Tab with 4 tabs.
Depending on response from server I may have to hide/show some tabs.
I tried the approach of removing the tabs at first and adding them later.But the problem is as the tabs are removed so as the DOM objects.So am not able to add the $("#") object later.
So better options is to hide/show the tabs .Is that possible in easyui tabs?
just close the tabs that you don't want to show
$('#mytabs').tabs('close','titletab');

ExtJS Accordion event on unrendered components

I have an accordion of 5 panels. Each panel contain a set of checkboxes. I want to attach the change event to the checkboxes. But as the panels are collapsed the checkboxes dont get rendered and as a result I cannot attache the events. Any idea how do I do this.
Note : I am using ExtJS designer to make the accordion and the checkboxes.
Stuff done so far.
I added a class to the checkboxes and tried to access them using the query
Ext.query('.winrej');
this however gives me list of checkboxes from the panel that is open.
If the checkboxes are not rendered yet you will not catch any user interaction events, so it doesn't make sense to subscribe to them. Try to subscribe to events after certain panel of accordion layout has been rendered. Or am I missing something? What exactly are you trying to achieve?

How to preserve "expanded" state of additional form fields with JavaScript when clicking the back button in IE?

I have a form that has two radio buttons. When one of the radio buttons is clicked, JavaScript is used to set a group of sub-fields using display: block.
How can I make it so the selected radio button and sub-fields will expand when clicking the back button in IE? This issue does not occur in Webkit or Firefox.
It needs to work with plain JavaScript, so no jQuery!
One popular methods is to use a URL-hash to represent the UI state. As the UI changes, you build up a hash:
document.location.hash = "R1=true;R2=false"
When you re-load the page, look at the hash and use JavaScript to set the relevant UI elements. How you represent your elements is up to you.

Why do my radio buttons all deselect when I hide a DIV in IE7?

I have a long form that's composed entirely of checkboxes and radio buttons and I've divided it up into a series of DIVs. I'm using the Tabs feature of jQuery UI to make each DIV appear when it is needed and disappear when it isn't (so there's only one DIV visible on the screen at any given time).
Here's the URL: http://plaza.ufl.edu/noproctor/FloraGator/key.html
The form works fine in Firefox and other versions of Explorer, but in IE7 on a PC the radio buttons always deselect whenever a DIV is hidden. Checkboxes work fine and keep your selections, but radio buttons just reset to the default value as soon as the DIV slides out of sight, so you can never submit a form with one of those selected.
Anybody know how to fix this?
See IE - hidden radio button not checked when the corresponding label is clicked -- sounds like hiding the elements offscreen instead of with display: none is going to be necessary if you want to support IE7 with this. So you'll probably have to rule out the jQuery UI tabs; they're using display:none & display:block. The good news is tab-like structures are very easy to write yourself with jQuery.

Categories