jQuery Dashboard plugin - how to save a state change

0 votes
asked Mar 2, 2011 by wastedspace

I've started using the dashboard plugin which is demoed here - http://www.gxdeveloperweb.com/dashboardplugin/demo/dashboard.html

I'm struggling with the documentation. Primarily on how to save dashboard configurations altered by the enduser.

In the documentation, it tells you how to do a "dashboardStateChange":

dashboard.element.trigger("dashboardStateChange",{"stateChange":"widgetAdded","widget":widget});

But I don't really understand where this is to go within the dashboard setup, and how you use this to save the changes. I thought I could could access dashboardStateChange from within the DOM when something happens, but even failing to understand how this is done.

Has anyone got any tips on saving the dashboard whenever its state has changed? I would like it to talk to a php script which saves the dashboard setup.

Unfortunately there aren't any great tutorials on this sort of functionality.

Thanks!

2 Answers

+1 vote
answered Aug 10, 2012 by doberkofler

I don't know if this question is still of interest but I've been using this plugin for quite a while and it's actually quite easy to use. Pretty much all of the answer can be found in the example that comes with the plugin and to your problem you might want to have a look at the following example code that I use to make the current layout of the dashboard persistent on the server.

Please note that "saveID" is the ID of a Save button and "saveConfiguration" is the URL that save the layout on the server.

// binding for saving the current configuration
$("#saveID").bind("click", function () { var conf = $.parseJSON(dashboard.serialize()), // get the serialized configuration len = conf.data.length, // generate the new parameter to submit para = "lay=" + conf.layout + "&len=" + len, i = 0; for (i = 0; i < len; i += 1) { para = para + "&pid" + i + "=" + conf.data[i].id + "&col" + i + "=" + conf.data[i].column; } // Invoke the "saveConfiguration" on the server via AJAX $.ajax({ url: "saveConfiguration", data: para, dataType: "json", success: function (jsonResponse) { if (jsonResponse.valid === true) { alert("Configuration has been saved"); } else { alert("Error when trying to save the configuration\n" + jsonResponse.error); } }, error: function (jqXHR, textStatus, errorThrown) { alert(textStatus + " - " + errorThrown); } }); return false;
});
0 votes
answered Nov 29 by daniel

You can use the built in dashboard function to save quick & easy. On the page where you init the dashboard, put this after the initDashboard() function, but before the dashboard.init():

$("#savebutton_id").bind("click", function () { dashboard.element.trigger("dashboardStateChange",{"stateChange":"widgetMoved","widget":"w"}); alert("Saved");
});

Then you put a Button or Link with the id savebutton_id somewhere in your HTML-Code. When you click it, the dashboard will send the serialized configuration to your predefined stateChangeUrl.

Welcome to Q&A, where you can ask questions and receive answers from other members of the community.
...