Multi JQuery UI Selectable

Question

I'm doing a small software in php with the Jquery Selectable plugin. I need to keep data with ajax of all my selectable and send it to my php script, finally print the result of my php script. This is my HTML:

<h2>Days</h2>
<ol id="one">
  <li class="ui-state-default">1</li>
  <li class="ui-state-default">2</li>
  <li class="ui-state-default">3</li>
  <li class="ui-state-default">4</li>
</ol>
<h2>Months</h2>
<ol id="two">
  <li class="ui-state-default">1</li>
  <li class="ui-state-default">2</li>
  <li class="ui-state-default">3</li>
</ol>
<h2>Years</h2>
<ol id="three">
  <li class="ui-state-default">2010</li>
</ol>
<p id="result"></p>

And this is my JQuery code:

$(function() {
  $("#one").selectable({
    stop: function() {
      var Days = "";
      $( ".ui-selected", this ).each(function(i) {
        if(i != 0) {
          Days += ",";
        }
        Days += $(this).text();
      });
      $.ajax({
        type : "POST",
        url: "elabora.php",
        data : { days: Days }
      });
    }
  });
  $("#two").selectable({
    stop: function() {
      var Months = "";
      $( ".ui-selected", this ).each(function(i) {
        if(i != 0) {
          Months += ",";
        }
        Months += $(this).text();
      });
      $.ajax({
        type : "POST",
        url: "elabora.php",
        data : { months: Months }
      });
    }
  });
  $("#three").selectable({
    stop: function() {
      var Years = "";
      $( ".ui-selected", this ).each(function(i) {
        if(i != 0) {
          Years += ",";
        }
        Years += $(this).text();
      });
      $.ajax({
        type : "POST",
        url: "elabora.php",
        data : { years: Years }
      });
    }
  });
});

This code send the post request every time I select an item, but I need to send also other selectable with the current value they have, not only one. I need help =) Sorry for my bad English.

EDIT I found also this solution to resolve.

$(function() {
  var days;
  var months;
  var years;
  $("#one").selectable({
    stop: function() {
      var Days = "";
      $( ".ui-selected", this ).each(function(i) {
        if(i != 0) {
          Days += ",";
        }
        Days += $(this).text();
      });
      days = Days;
      Send(days, months, years);
    }
  });

  $("#two").selectable({
    ...
  });

  $("#three").selectable({
    ...
  });

  function Send (days, months, years) {
    jQuery.post('elabora.php', { one: days, two: months, three: years }, Stamp);
  }
  function Stamp (data){
    jQuery(function(){
      jQuery('#result').html(data);
    })
  }
}

Answer 1

Try this

function makeAjaxCall() {
      var Days = "";
      $( ".ui-selected", $("#one")).each(function(i) {
        if(i != 0) {
          Days += ",";
        }
        Days += $(this).text();
      });

       var Months = "";
      $( ".ui-selected", $("#two")).each(function(i) {
        if(i != 0) {
          Months += ",";
        }
        Months += $(this).text();
      });

     var Years = "";
      $( ".ui-selected", $("#three")).each(function(i) {
        if(i != 0) {
          Years += ",";
        }
        Years += $(this).text();
      });

      $.ajax({
        type : "POST",
        url: "elabora.php",
        data : { days: Days,months: Months, years: Years }
      });
}


$(function() {
      $("#one").selectable({
        stop: makeAjaxCall
      });
      $("#two").selectable({
        stop: makeAjaxCall
      });
      $("#three").selectable({
        stop:makeAjaxCall
      });
});