Adding ajax to jquery ui accordion

JavaScript
1

Hello all… PHP guy here just getting into javascript/jQuery…

I’m using jQuery’s sortable accordion (http://jqueryui.com/accordion/#sortable) in an application to display elements that are in a set order. I was wondering if anyone could point me in the right direction on how to add ajax functionality to this so that when a user reorders the accordion list the order is updated on the server side.

I’m sure this is pretty basic ajax stuff but i’m a complete noob with client side scripting

2

Hi there,

I’m guessing that the accordion uses jQuery UI’s draggable functionality.
If that is the case, then you probably want to listen for the “stop” event, which fires when a drag operation has finished.
See also: http://jqueryui.com/draggable/#events

Then you can hopefully do something like this:

$( ".selector" ).on( "dragstop", function( event, ui ) {
  $.ajax({
    type : "POST",
    url : "myScript.php",
    data  : 'var=' + myVar,
    success : function(data) {
      //do something
    }
  });
});

You might want to check out: http://api.jquery.com/jQuery.ajax/

Hope that helps.