CODEWITHSUNDEEP
phpjqueryhtml
null
null

Reputation: 1433

Send dynamic HTML list with PHP to server

I have two simple HTML lists. The first one contains a bunch of entries, the second one is initially empty. The common list structure is the following:

<ul id="project-offer-list" class="connectedSortable">
    <li class="ui-state-default">
        <div>
            <!-- formatting -->
        </div>
    </li>
    <li class="ui-state-default">
        <div>
            <!-- formatting -->
        </div>

The user can select some entries from the first list by dragging them to the second one. By doing so he can give a preference by sorting the elements within the second list.

The drag-drop-mechanism is realized by JQuery:

<script>
    $(function() {
        $("#project-offer-list, #project-selection-list").sortable({
            connectWith: ".connectedSortable"
        }).disableSelection();
    });
</script>

I want to send both the selected elements (those in the second list) and their order to a remote server with PHP. Whenever the user clicks the "Save" button, the current selection should be sent.

How can I achieve this? I would need to assign an id to each list element and somehow read the second list and its order. It is crucial that possible changes in the HTML code made by JQuery are considered.

Thanks

Upvotes: 0

Views: 118

Answers (1)

user4773659
user4773659

Reputation:

You Need to convert the data of the second list into json object, assign the id to each element, use the same id which you have in your database as it would be more easy to update and perform options on existing data,

    var items = [];
    $('ul#list_id').find("li").each(function() {
    var $this = $(this);
    var item = { id: $(this).attr('data-id'), title: $(this).text() };
    items.push(item);
  });

You will get something like this, and use an ajax to send this to your remote server 

[
 {"id":"1","title":"School-management"}, 
 {"id":"2","title":"library-management"}, 
 {"id":"3","title":"billing_software"}
]

Upvotes: 1

Related Questions