view raw
user3499880 user3499880 - 9 months ago 34
Ajax Question

How to add ajax post query send

Please, help solve my problem.
Is an example of a site jQueryUI -


<!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Sortable - Connect lists</title>
<link rel="stylesheet" href="//">
<link rel="stylesheet" href="/resources/demos/style.css">
#sortable1, #sortable2 {
border: 1px solid #eee;
width: 142px;
min-height: 20px;
list-style-type: none;
margin: 0;
padding: 5px 0 0 0;
float: left;
margin-right: 10px;
#sortable1 li, #sortable2 li {
margin: 0 5px 5px 5px;
padding: 5px;
font-size: 1.2em;
width: 120px;
<script src=""></script>
<script src=""></script>
$( function() {
$( "#sortable1, #sortable2" ).sortable({
connectWith: ".connectedSortable"
} );

<ul id="sortable1" class="connectedSortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>

<ul id="sortable2" class="connectedSortable">
<li class="ui-state-highlight">Item 1</li>
<li class="ui-state-highlight">Item 2</li>
<li class="ui-state-highlight">Item 3</li>
<li class="ui-state-highlight">Item 4</li>
<li class="ui-state-highlight">Item 5</li>


I need to send a ajax post request to the server when you add the element in sortable1 and sortable2. How to this make? Thanks.


Try this for sortable1 and then repeat it for sortable2.

var length1 = $("ul#sortable1 > li").length;
$("#sortable1").bind("DOMSubtreeModified", function() {
    if ($("ul#sortable1 > li").length >= length1) {
            url: "some Url",
            data: {parameter values},
            success: function(data) {
            dataType: "html",
            type: "POST",
            cache: false,
            error: function() {
                alert("Process Not Finished");