CODEWITHSUNDEEP
javascriptjqueryportlet
Michael Trend
Michael Trend

Reputation: 487

jQuery sortable portlets + creating dynamic new portlets

to simplify the question, lets assume that we are using exactly the same code than jquery ui portlets widget:

http://jqueryui.com/sortable/#portlets

i have read another thread about topic in stackoverflow, but it really doesn't give me a clue about how to to approach the solution, since the original code is not avaliable anymore

jQuery How to add a portlet

lets imagine the simplest way of adding a new portlet to an existing column:

$( "#col0" ).append($('<div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" id="p5">' +
                '<div class="portlet-header ui-widget-header ui-corner-all">' +
                '<span class="ui-icon ui-icon-minusthick"></span>' + "my title" + '</div>' +
                '<div class="portlet-content">' + "my content" + '</div></div>'))

with this approach, i have to important issues:

  1. the "+" button on right header corner doesn't work for new portlets.

  2. the the header and content text doesn't remain inside the div. when the text achieves the edge of the div, it continues outside.

  3. i try to obtain the order of the portlets with this approach obtained here in stackoverflow. It works when you just load the application with the default jquery portlets. 

    $( ".column" ).sortable({

connectWith: ".column",
delay: 150,

start: function(event, ui) {
        ui.item.startPos = ui.item.index();
        item = ui.item;
        newList = oldList = ui.item.parent();
},
stop: function(event, ui) {
        /*saveOrder();*/        
        console.log("Start position: " + ui.item.startPos);
        console.log("New position: " + ui.item.index());
},
change: function(event,ui) {
        if(ui.sender) newList = ui.placeholder.parent();

    },

before and after i add a new portlet, when i try to get the sortable column elements:

    $("#obtain").button().click(function() {
         console.log($("#col0").sortable('toArray').toString());});

it gives me the right number of elements per column (the new one is added), but when i try to move the new one between columns, when you create new ones dinamically, the position in the columns is no sense. i think that its like i should execute again the start() function everytime i create a new portlet, so i can get the right index. But i dont know how to approach it.

thank you very much for your time, and i hope i can get some advices,

regards

Upvotes: 1

Views: 1367

Answers (1)

Chris
Chris

Reputation: 21

For #1 I think you're missing the portlet-toggle class

<span class="ui-icon ui-icon-minusthick">

should be

<span class='ui-icon ui-icon-minusthick portlet-toggle'>

Upvotes: 1

Related Questions