Recommended method of adding/storing/constructing HTML controls dynamically

Question

Is there a recommended method of dynamically adding/storying/constructing HTML controls to dynamically added elements on a HTML page?

Basically, I have a widget based system I'm working on, where the user chooses the widgets s/he wants to have displayed. S/He can have as many or as little widgets on the screen as required, and they can also have the same widget many times displayed at once.

The script for that looks something like this:

success: function( widget_shell ) 
{ 

    if( widget_shell.d[0] ) {

        $(".column").empty();

        var i = 0;

        for ( i = 0; i <= widget_shell.d.length - 1; i++ ) {

            var $widget = $("<div class='widget widget_" + widget_shell.d[i].widget_id + "'>").appendTo( $(".column_" + widget_shell.d[i].column_id) );
            $("<div class='widget_header widget_header_" + widget_shell.d[i].widget_id + "'>").appendTo( $widget );
            $("<div class='widget_sub_header widget_sub_header_" + widget_shell.d[i].widget_id + "'>").appendTo( $widget );
            $("<div class='widget_content widget_content_" + widget_shell.d[i].widget_id + "'>").appendTo( $widget );
            $("<div class='widget_footer widget_footer_" + widget_shell.d[i].widget_id + "'>").appendTo( $widget );

        }

each .widget will need controls such as buttons, textboxes etc in the .widget_sub_header section. What is recommended way of doing that? "That" as in, how to get further HTML controls into the .widget_sub_header. Add the HTML for the controls in the database? Somehow connect to an external file containing the HTML controls and add them in? or some other method?

I guess my 2 main concerns are:

Easy maintenance
Server resource friendly

Yukulélé · Accepted Answer · 2012-11-15 10:41:44Z

1

jquery-ZenCoding is easy way to create some nested html elements : https://github.com/zodoz/jquery-ZenCoding

exemple :

$.zen("div#widget>ul.instrument>(li{piano}+li{guitare}+li{flute})");

answered Nov 15, 2012 at 10:41

Yukulélé

17.4k12 gold badges78 silver badges105 bronze badges

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

1 Comment

Keeper Hood Over a year ago

very nice didn't know there was a jquery zencoding plugin also :)

elclanrs · Accepted Answer · 2012-11-15 10:08:42Z

1

What about something like this? I suggest instead of adding a class with the id, add an actual id on the parent, that's all you need to target children elements.

function createWidget( id ) {

  var widget = [
    '<div class="widget">',
      '<div class="widget_header"></div>',
      '<div class="widget_sub_header"></div>',
      '<div class="widget_content"></div>',
      '<div class="widget_footer"></div>',
    '</div>'
  ].join('');

  return $( widget ).attr( 'id', 'widget_'+ id );

}

$.each( widget_shell.d, function( i,v ) {
  $('.column_'+ v.column_id)
    .append( createWidget( v.widget_id ) );
});

answered Nov 15, 2012 at 10:08

elclanrs

94.2k21 gold badges137 silver badges171 bronze badges

Comments

Asken · Accepted Answer · 2012-11-15 10:10:40Z

0

I'd add a small template engine. There is a very simple one made by John Resig that I use frequently at:

John Resig micro-templating

Chances are you'll be doing this sort off thing again so a template engine is pretty handy to have lying around.

If you don't like that one you can have a look at a great resource of micro-templates at:

Microjs templates

answered Nov 15, 2012 at 10:10

Asken

8,14711 gold badges50 silver badges84 bronze badges

Comments

Keeper Hood · Accepted Answer · 2012-11-15 10:18:15Z

I've used to work on a similar widget system.

This is how I've managed it :

Have a hidden div container that holds all the template elements.

<div id='widget-templates'>
     <div class='widget1-id' >
           <input type='text' class='ytSearch'/>
           <button id='btnYtSearch'>Search</button> 
     </div>
     <div class='widget2-id'></div>
     ... 
     <!-- etc etc -->
     ...
</div>

I used an object called widgetFactory which holds all the javascript code needed to create a widget from the template.

var widgetFactory = {
    youtubeSearch: function(data){
         var $generatedWidget = $('#widget-templates > .widget1-id').clone();

         // prepopulate with some data if requested (usually when binding data to an already existing widget)
         // ...            

         // attach events
         // ...

         return $generatedWidget;
    }
}

Then with external javascript logic, I would save just the widget data (as JSON) and widget type into the database. tbl_widgets(id, name, type) tbl_user_widget(user_id, widget_id, data)

Note that this is just from my memory and there probably is a much more profound solution, but i hope it could shine any new idea on your user customizing widget system.

Collectives™ on Stack Overflow

Recommended method of adding/storing/constructing HTML controls dynamically

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related