Read that...been reading for days now, hopefully someone can help me :-)
What I ended up doing was to store the information into a table
(mysql) so that I could load portlets from there per user (it also
allows me to store individual portlet.php files on disk and call them
using an include, etc.). I have it (somewhat) working based on this
tutorial:
http://www.kadede.com/disenyoblog/?p=289
The problem I ran into is that sorting by yindex doesn't work for me
since I'm using tabs - I also found that it wouldn't load anything
after the first row.
My code looks like this:
$(document).ready(function(){
$(".column").sortable({
connectWith: ".column",
update: savelayout
});
$(".portlet").addClass("ui-widget ui-widget-content
ui-helper-clearfix ui-corner-all")
.find(".portlet-header")
.addClass("ui-widget-header ui-corner-all")
.prepend('<span class="ui-icon ui-icon-plusthick"></span>')
.end()
.find(".portlet-content");
$(".portlet-header .ui-icon").click(function() {
$(this).toggleClass("ui-icon-minusthick");
$(this).parents(".portlet:first").find(".portlet-content").toggle();
});
$(".column").disableSelection();
});
function savelayout(){
var positions = "";
var yindex = 0;
$(".portlet").each(function(){yindex++;positions+=(this.id + "=" +
this.parentNode.id + "|" + yindex + "&");});
$.ajax({
type: "POST",
url: "includes/savelayout.php",
data: positions
});
}
My savelayout is just printing the post variables for now, e.g:
foreach ($_POST as $key=>$value) {
$vars .= "\tKey = $key, Value = $value\n";
}
Which spits out this (example):
Key = Select_Date, Value = tab1col1|2
Note that the col1 is getting updated - the original position was
col2, but I can't figure out a way to print out the updated row.
Ideally, I would like to get it to print something like this after the
user moves the portlet (I plan to remove the '|yindex' later, it's not
working anyways...):
Key = Select_Date, Value = tab1col1row2|2
My page looks like this:
<!-- BEGIN Column: tab1col2 -->
<div class="column" style="width: 33.33%; float: left; padding-bottom:
100px;" id="tab1col2">
<!-- Starting portlet for tab1, col2, row1 -->
<div class="portlet" id="Select Date">
<div class="portlet-header">Select Date</div>
<div class="portlet-content">
<input type="text" size="25" value="12/16/2009" id="daterange">
</div>
<!-- Ending portlet for tab1, col2, row1 -->
</div>
<!-- END Column: tab1col2 -->
</div>
If you need to see this live, let me know and I can send out the url -
it's probably not useful to send it right now since I'm constantly
breaking it :-)
Note:
These are all built in php foreach loops, so I can't list the row as
an addendum to the column id, it's basically something like this
(shorthanded some of it for brevity)
mysql = get tabs from table
foreach (tabarray as tab) {
echo "<!-- BEGIN Tab: $tab -->\n";
echo "<div id=\"$tab\">\n";
mysql = get columns for this tab
foreach($colarray as $column) {
echo "<!-- BEGIN Column: $tab$column -->\n";
echo "<div class=\"column\" style=\"width: $colwidth%; float:
left; padding-bottom: 100px;\" id=\"$tab$column\">\n";
mysql = get rows for this column
foreach($rowarray as $row) {
echo "<!-- Starting portlet for $tab, $column, $row -->\n";;
echo "<div class=\"portlet\" id=\"$header\">\n";
echo"<div class=\"portlet-header\">$header</div>\n";
echo"<div class=\"portlet-content\">\n";
include("$content");
echo"</div>\n";
echo "<!-- Ending portlet for $tab, $column, $row -->\n";;
echo "</div>\n";
So how can I place the row id somewhere, and how can I recall it from
the line in the function:
$(".portlet").each(function(){yindex++;positions+=(this.id + "=" +
this.parentNode.id + "|" + yindex + "&");});
On Sun, Dec 13, 2009 at 11:26 PM, Nate Laws <[email protected]> wrote:
> You would probably want to use the jquery cookie plugin. I
> found http://stackoverflow.com/questions/1370417/jquery-ui-sortable-and-cookie which
> looks like it may point you in the right direction. You should probably
> search for 'sortable' instead of 'portlets' as its a more generalized
> search... portlets are just a bunch of connected sortables after all.
>
> On Sun, Dec 13, 2009 at 7:48 PM, Clayton Dukes <[email protected]> wrote:
>>
>> I've spent hours looking for examples of this, the best I could find
>> was at http://www.kadede.com/disenyoblog/?p=289 but he only shows how
>> to do it with user logins.
>> The problem I have is that not all my users will use the authentication
>> system.
>> Can anyone tell me how to do it using cookies?
>> I'm a bit surprised that there are no examples of this, or that it
>> seems to be so difficult, am I looking in the wrong place?
>>
>>
>> On Sat, Dec 5, 2009 at 6:41 PM, Clayton Dukes <[email protected]> wrote:
>> > Hi,
>> > Can someone point me to some sample code for using a cookie to store
>> > the state of portlets?
>> > example:
>> > http://dukey.gdd.net
>> > login/pass is guest/guest
>> > I'd like to store the state of the portlets on that page when a user
>> > rearranges the boxes.
>> >
>> >
>> >
>> > --
>> > ______________________________________________________________
>> >
>> > Clayton Dukes
>> > ______________________________________________________________
>> >
>>
>>
>>
>> --
>> ______________________________________________________________
>>
>> Clayton Dukes
>> ______________________________________________________________
>>
>> --
>>
>> You received this message because you are subscribed to the Google Groups
>> "jQuery UI" group.
>> To post to this group, send email to [email protected].
>> To unsubscribe from this group, send email to
>> [email protected].
>> For more options, visit this group at
>> http://groups.google.com/group/jquery-ui?hl=en.
>>
>>
>
> --
>
> You received this message because you are subscribed to the Google Groups
> "jQuery UI" group.
> To post to this group, send email to [email protected].
> To unsubscribe from this group, send email to
> [email protected].
> For more options, visit this group at
> http://groups.google.com/group/jquery-ui?hl=en.
>
--
______________________________________________________________
Clayton Dukes
______________________________________________________________
--
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en.
