I have a selectbox which takes its option values from a <ul> list. The list is changeable via jQuery UI sortable functionality, and the selectbox dynamically updates as you sort items differently.
I have made that functionality, the code is dirty but it does the job:
http://jsfiddle.net/trunkadelic/TtnTf/2/
What I need is a "reset" function, which brings the list (and thus, the selectbox) back to their original values. I am not sure how to approach this, even a nudge in the right direction would be much appreciated.
On page load I would store off the initial state of the list in a JavaScript variable. Then, when the reset link is clicked I would restore the state of the <ul> to what it was on page load. From there you can use the same method you already have to update the selectmenu to match.
I forked your jsFiddle to show this - http://jsfiddle.net/g8GLw/
Related
I have nested jQuery accordions in my markup where I try to auto-open on page load according to the path that was last opened in previous sessions.
I saved the path into a cookie, loading the cookie and run the following code
path.forEach(function(label){
var element = root.find("[data-caption='"+label+"']");
element.parent().accordion( "option", "active", parseInt(element.attr('data-index')) );
root = element.children().eq(1);
});
The issue is that for some reason the 'active' takes effect only for the first accordion and non of the nested ones.
I checked several times and:
element.parent() is indeed an accordion (otherwise it would have thrown an error).
data-caption is a unique key for elements in each iteration.
element.children().eq(1) is the active panel (according to the structure of jQuery UI Accordion).
the active element I am asking to open indeed exists for each iteration.
I don't know what is the issue here, any ideas?
I found the problem by myself and post here for future reference.
The issue is this part of the code
parseInt(element.attr('data-index'))
And the reason lies with how accordion counts elements within its panel.
In my panel I had several html elements which were not accordion and several which were. Now the code above brought me the index of the accordion element in compare to the entire panel.
The issue is that for some reason .active only counts sub elements which are accordion themselves. So for example if the panel index of an element is 3 but it has 1 non-accordion element before it in the panel, then it's "active" index is actually 2.
I don't know why they chose for this behaviour, but there you have it.
My solution was to place a different attribute on the element with it's "active" index and use it instead of data-index.
Now everything works like a charm.
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'm using ExpressionEngine and SafeCracker along with Ajax (plugin: jquery.form.js - http://jquery.malsup.com/form/).
Best I can tell, SafeCracker will only allow for updating a single entry at a time. However, the UI / UX necessitates that a list be displayed. I've proof of concept'ed an entry by entry on-demand form. That is, click a particular edit link next to each entry and a snippet of jquery creates a form along with displaying a submit button. Click submit and that single entry updates. The inputs don't exist until the Update link is clicked
What I would prefer to do, if possible, is to create the non-form and form versions of each entry as the page is renbered and use some sort of toggle to display one or the other. Again, doable. Then, when I click the Edit link I'd add the necessary attributes to the input so that entry's form elements will be read but the other (display: none) elements for the other entries will be ignored. I'm thinking (out loud) that if I add the attr("name", some-value) that would work. That is, an input with no name will be ignored.
Yes, I can test this and I will. However, even if it works I'm not sure if it's a best practice and/or there's a more ideal way of accomplishing my ends. I'm here looking for validation and/or additional expertise and input.
Thanks in advance.
Just set disabled property to inputs and they will excluded from Form submission, whatever input fields are hidden or visible. Different jQuery methods, like submit() and serialize() follow specification of HTML 4 and exclude all disabled controls of a forms. So one way is to set
$('your_input').prop('disabled', true);
or ,
$('your_input').attr('disabled', 'disabled');
Check following link:
http://www.w3.org/TR/html401/interact/forms.html#successful-controls
Also, you may use a general button instead of a submit, as result you can handle click event on it and within that event you can make exclusion, validation, manipulation on values and what ever you like.
You can put a disabled attribute on them server side or set the property via jQuery:
$(".hidden input").prop("disabled", true);
Example: A list of linked <H4> (<a><H4>maximum 200 characters</H4></a>) and their corresponding divs (<div>maximum 10000 characters</div>) are simultaneously fetched from a spreadsheet; when any one of those visible linked <H4> is clicked ( toggle() ), their corresponding prior hidden divs ( hide() ) gets displayed. The list of linked <H4> and related divs grows as the spreadsheet grows, like a Comments form.
Questions:
Does the <H4> list load faster (or appear faster on the page)
when the divs are hidden beforehand (hide())?
If question 1 is negatif, what would be the simplest jQuery function structure, in this example, to retrieve and display the divs after the linked <H4>s are loaded and only upon User <H4> click? I already have the data-fetching function figured out (google.jsapi) so I would need the correct jQuery function structure allowing User on-demand loading of supplementary data. Any pointers?
Note: Currently developing on jQuery 1.6+ . Code above is simplified for description only. The reason why the <H4>s are wrapped within <a> tags is a cross-browser issue and to allow accessibilty with accesskeys and Tab for keyboard Users (I tried the each() method for clickable H4s and Firefox did not let me down however IE 6-7 hated me for that and froze).
1) Does the list load faster (or appear faster on the page) when the divs are hidden beforehand (hide())?
Answer:
As long as you are loading hidden divs the same time you are loading your page, your page won't load faster/signifcantly faster
2) If question 1 is negatif, what would be the simplest jQuery function structure, in this example, to retrieve and display the divs after the linked s are loaded and only upon User click?
Answer:
Use ajax to populate divs on demand, create a page with empty hidden div, and load those div using ajax request when you are showing them. All this can be done using javascript/JQuery
I have used the Telerik RadDock in the past, and although it's pretty good, it is a little bit clunky and bloated. One nice feature is the ability to save the state of a page (all dock locations, etc) in the database and recover them at a later date.
I'm wondering if there is a way in MVC and jQuery to save the state of the jQuery UI Drag Drop panels. Basically each user would be able to edit their own "dashboard" and place items wherever they want, and the state gets saved to SQL Server under their profile for later re-use.
Thanks in advance
I think Peol is generally correct. The only way to simulate the behavior of the Telerik RadControls in this case is to manually track and persist changes to your Panel layout. Specifically, for panels you'll probably want to:
Handle the dragStop event
In that event, get the current position/size/offset information for the current panel
Persist the new location - either locally in a Hidden Input or via a Web Service
If you persist locally in a hidden field, you can then persist long term on the next page POST or via single service call when (for example) the user clicks a "Save" button.
The Telerik RadDock simplifies the process by serializing its state to XML, which makes it easy to save and load, but I don't think the jQuery panels provide the same functionality. Maybe this will be added to the Telerik Extensions for MVC in the future...
We recently solved a similar issue (in a non-MVC project though) by simply adding a HTML5 data attribute with the widget id, looping through all the li's, and retrieve their id and push them to an array. E.g.:
HTML structure:
<ul>
<li data-id="1"></li>
<li data-id="2"></li>
<li data-id="3"></li>
<li data-id="4"></li>
<li data-id="5"></li>
<li data-id="6"></li>
</ul>
jQuery (inside the stop callback):
var widgets = [];
$('li').each(function() {
widgets.push( this.getAttribute("data-id") );
});
WebService.UpdatePositions(widgets);
We did this on the stop callback on a sortable, but should be applicable here as well.
The WebService then receives a int[], which you know will contain the id's in their new positions using the int[] index they're in.