Appending multiple jquery widgets to container

Question

I currently am trying to append multiple widgets to a container.

$( "#addbutton" ).click( function() {  
    newid++;
    $("#designspace").append($("<div></div>").mywigdet({id:newid,top:100,left:100,width:100,height:100,color:"blue",text:"Hello"}));        
});

with this way I need to create a div and then add the widget into that div. The widget itself does the following in the _create

 ...
 this._container = $('<div class="label-container" id="' + newid +'" style="position:relative; border:1px solid black;"></div>').appendTo(this.element);
 this._setOptions({
      'top': this.options.top,
      'left': this.options.left,
      'width': this.options.width,
      'height': this.options.height,
      'color': this.options.color,
      'text': this.options.text
 });
 ...

while it works this creates one container inside another.

But because I have relative positioning code in my widget this method prevents it from working as the blank container DIVs position is the parent.

I can move the position stuff into the container DIV but this would take away some of the flexibility of using widgets.

Is there a better way to accomplish adding multiple widgets to one container, without creating sub-containers?

marc_s · Accepted Answer · 2016-02-03 17:53:34Z

1

I haven't really played with jquery-widgets before. I think your problem is:

this._container = $('<div class="label-container" id="' + newid +'" style="position:relative; border:1px solid black;"></div>').appendTo(this.element);

Rather modify this.element itself by using:

$(this.element).attr('id',newid);

$(this.element).addClass('label-container');
...

Edit: I'd recommend replacing the style attribute with another css class.

JQuery CSS

JQuery addClass

edited Feb 3, 2016 at 17:53

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Mar 12, 2013 at 3:50

NeilA

1,5212 gold badges12 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ekim Over a year ago

thank you, adding and editing the original div has done the trick.

Collectives™ on Stack Overflow

Appending multiple jquery widgets to container

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related