Jquery Sortable Multiple Lists Serialize Object Rating: 6,0/10 9821 votes

JQuery:: Form Serialize - Not Replace Space With Plus? I'm using $('form').serialize(), and then doing an AJAX request.JQuery automatically replaces spaces with the + character.(I couple replace the + character with a space on the server side, butI want the users to be able to enter the + character when they submit forms.) View 2. Hello, I made a plugin that allows items to be moved, sorted and nested in a tree made of nested lists. I have tested it only in Firefox 3.6 so far, it Nested lists / sortable tree plugin - jQuery Forum. Sortable Widget. The jQuery UI Sortable plugin makes selected elements sortable by dragging with the mouse. JQuery: A jQuery object containing the.

  1. Jquery Sortable Multiple Lists Serialize Objective
  2. Jquery Sortable Multiple Lists Serialize Object
  3. Jquery Sortable Multiple Lists Serialize Object Games
  4. Jquery Sortable Multiple Lists Serialize Objects
Active2 months ago

Is it possible to get the serialized list of items from a UL in jquery by calling the serialize method directly instead of using a callback? The code snippet:

category_links_list_3 is the id of the UL

The DOM structure is:


1,0232 gold badges17 silver badges34 bronze badges

6 Answers

I finally got the answer! You need to make the UL sortable first before calling the serialize method on it:

This time linkOrderData contains category_link[]=8&category_link[]=9

Jquery Sortable Multiple Lists Serialize Objective

1,0232 gold badges17 silver badges34 bronze badges

If serialize returns an empty string, make sure the id attributes include an underscore. They must be in the form: 'set_number' For example, a 3 element list with id attributes foo_1, foo_5, foo_2 will serialize to foo[]=1&foo[]=5&foo[]=2. You can use an underscore, equal sign or hyphen to separate the set and number. For example foo=1 or foo-1 or foo_1 all serialize to foo[]=1.

Above one is a example. that i used it. That is why I saw 2 you.

it migth be help you.

Kiran ShahiJquery
5,3144 gold badges20 silver badges50 bronze badges
4,2886 gold badges36 silver badges78 bronze badges

Jquery Sortable Multiple Lists Serialize Object

var formStr = $('#container').serialize()

Added: That will work for form elements. You could also roll your own serialize like so:

42.7k4 gold badges56 silver badges65 bronze badges

I was able to get this function working using the split. If you have multiple underscores in your class you may need to adjust the index

Kevin PKevin P

This post was very helpful. In case you're looking for additional help, here's how I got it to work (using haml-rails). Using the toArray function is slightly different. If using `serialize' you would have to set the attribute, again, as 'data-item='data-item_#{id}'.

Thank you, Internet, for knowing so many programming solutions.

Jesse CrockettJesse Crockett

Not the answer you're looking for? Browse other questions tagged jqueryjquery-ui-sortableserialization or ask your own question.

19 May 2015CPOL


I have had several occasions where I needed an interface to create and order a list on the web. I had searched many times over the years looking for a clean and simple interface for doing this but never found one that I liked, so this is the solution that I created.

The Code

To see a demo of this, visit: http://www.wesgrant.com/SampleCode/SortableList/SortableListDemo.aspx.

The data model for this demo is a very simple master-detail relationship that has a list with list items. The model has lazy loading enabled, so I will introduce a detachable Data Repository so that the Entity Objects can be returned to jQuery AJAX calls as JSON.

Jquery Sortable Multiple Lists Serialize Object Games

The demo for this includes an interface with animated panels and the ability to create new lists, add, edit and delete items from the list, to preview the list with multiple stylesheet classes, and to change the user interface to use any of the jQueryUI themes. For the tutorial, I want to demonstrate passing JSON encoded Entity Framework objects through web methods using jQuery AJAX, so I will not cover many of the functions. Feel free to download the complete source code and have a look at the add, edit, and delete functions as well as using the jQueryUI show and hide functions to make the interface more interactive, which I will not cover in this tutorial.

Getting the Available Lists and Displaying them using jQuery AJAX and Web Methods

To get the lists that have been created, I will use a jQuery AJAX call to a WebMethod named GetSortableLists. I have included pageNumber and pageSize parameters that could be used to page the list but have not implemented paging in this code. These parameters are just there to show how data is passed to the web method. The success state calls the drawListofLists function which I have not covered, but I do cover the drawing of the list items in the next section which is similar to this function.

This AJAX call is to the following web method:

Which is the bridge to the following repository method:

Jquery Sortable Multiple Lists Serialize Objects

Notice that the repository method has an optional detachable parameter that is false by default. This allows for the same repository class to return Entity objects with their navigation properties as well as just the object which can be JSON encoded. If you try to return an Entity Framework object that has lazy loading enabled without detaching it and removing the navigation properties, you will receive the following error:


Drawing the Sortable List Items Interface and the List Preview with Various Stylesheets

Notice in the image below that as you drag the item over a position in the list, a red dotted box becomes visible to show that it can be dropped in that location.

To retrieve the data, we will make a simple AJAX call to our web method and receive a JSON encoded list of items back from the server.

This is the web method used for the bridge between the AJAX call from jQuery and retrieving the data from the data repository. Don't forget, when creating Web Methods, the function must be marked as static.

Repository Function for Returning the Sortable List Items from the Data Model

Notice in the function below that the results are always detached from the data context. In the rest of the routines where there is a reason to have the entity attached and the navigation properties in place, detaching is an option. For this function, if you want the navigation properties in place, you can simply retrieve the list and use the SortableListItems navigation property of the list.

The success status of the AJAX call to get the list items calls the function drawListItems and passes the returned JSON encoded list of items. This function creates the list of items for both moving the item position with drag and drop as well as previewing the list with various stylesheet classes. Here is the JavaScript code for drawing the list items. In the demo, there are buttons for editing and deleting the items as well as adding new items. I have left that code out of this for brevity.

Here are the additional style classes that need to be added to the page for the function above. Notice the red dotted border, this is the style for the outline of the place where the item will be dropped.

The drawListItems function above actually creates the following HTML output. First is the output for the sortable (left on above image) list edit interface and second is the output for the list preview (right on above image).

Sortable List output (left on image above):

List preview output (right on above image):

Notice in the code that sets up the sortable list, the “stop” state calls moveListItem if the item position has changed. This code calls a web method to persist the move to the database and rearrange the list of items accordingly. This is the code for the moveListItem function:

The function passes the ID of the item being moved, as well as the new position that the item is to be dropped. This will be passed to a Web Method and the movement of the list items will ultimately occur in the data repository. This is the code for the intermediate Web Method:

And finally the code that does all of the work. This retrieves the item from the Data Model so that it will have the current position of the item, as well as the ID of the list that the item belongs to. To perform the move, it moves all of the items in the list down that are above the item's current position, then after that move, moves all of the items back up one position that is greater than or equal to the new position, then sets the position of the item being moved to its new position.

Jquery Sortable Multiple Lists Serialize Object


  • 20th July, 2011: Initial post
Coments are closed
Scroll to top