[Infusion-users] Layout Reorderer: afterMoveCallbackUrl compatible afterMove function?

Chris Hubick chris at hubick.com
Sat Nov 21 20:08:18 UTC 2009


So, I have been using the Fluid Layout Reorderer 1.1.1 for some months
now, and things have been working pretty great (thanks!).

I just migrated my server processing from using Java Servlets to JAX-RS,
which takes care of data-binding request entities based on Content-Type,
cool.  Sadly, this broke my reordering, as my old Servlet just jammed
the entity into a JSON parser and didn't care about the Content-Type,
but apparently the Fluid Reorderer POST's to my afterMoveCallbackUrl
using Content-Type: application/x-www-form-urlencoded, where
application/json is now required for proper automatic binding.

So, I thought I would upgrade to Infusion 1.1.2 and see if this was
fixed, and/or file a bug - but then asking on IRC, I'm informed that
afterMoveCallbackUrl is deprecated, and pointed to:

Now, that page lists two methods for communicating with the server, (1)
forms, and (2) JSON (like was done with afterMoveCallbackUrl).  So, I
want to continue to use the JSON method, but that page only documents
the form based method :(

So, I go code surfing to find the code for the existing callback
function, to learn how it does things, and deep inside the
fluid.reorderer definition in Reorderer.js I find:

if (options.afterMoveCallbackUrl) {
    thatReorderer.events.afterMove.addListener(function () {
        var layoutHandler = thatReorderer.layoutHandler;
        var model = layoutHandler.getModel? layoutHandler.getModel():
        $.post(options.afterMoveCallbackUrl, JSON.stringify(model));
    }, "postModel");

So, great, I have some very limited understanding of how that listener
function works, at least as created *inside* the fluid.reorderer
definition, where it has access to thatReorderer, etc.  The task then
becomes, how do I adapt that code to work outside of that context, out
on my page which instantiates my reorderer?  This is where I fail, and
need help!

Here is my current abomination:

<script type="text/javascript">
// <![CDATA[
jQuery(document).ready(function () {
  fluid.reorderLayout (fluid.container ("#my-container"), {
    selectors: {
      columns: "my-col",
      modules: "my-col > my-module"
    listeners: {
      afterMove: function () {
        var layoutHandler = fluid.reorderer.layoutHandler;
        var model = layoutHandler.getModel ? layoutHandler.getModel() : fluid.reorderer.options.acquireModel(fluid.reorderer);
        $.ajax({ type: "POST", dataType: "application/json", url: "/server/reorder_layout", data: JSON.stringify(model) });
// ]]>

So, the afterMove function get's called correctly, but obviously my
adaptation of the code to gain a reference to the model is wrong.  So,
my question is exactly that, how do I get a reference to the model, or
even the layoutHandler?  AKA: Can someone please help me by filling in
that function, so things will continue to work in the future as they did
with afterMoveCallbackUrl (but with the correct Content-Type)?

Much Thanks!

Chris Hubick
mailto:chris at hubick.com

More information about the Infusion-users mailing list