Dynamically grouping html elements in side of a parent div class

Question

I would like to sort each "panel" into one div each depending on what class my element has, any help would be greatly appreciated.

I've gotten to the point of where I'm dynamically setting the class tag for each panel, but I can't figure out how to group them into one div per dynamic class that I set based off my json array element "PressNo".

JS

//this is where I set the panel data

function Panel(opts) {
  
  return ['',
          '',
          '  ',
          '    ',
          '     ',
          '     ', Utils.escapeHtml(opts.title), '',
          '    ',
          '  ',
          '  ',
          (opts.trustedBody || Utils.escapeHtml(opts.body)),
          '  ',
          ''].join('');

}

// get json data for panel 

function ConfigurationController(element) {
  if ( !element ) { throw new Error('Cannot create ConfigurationController: Element Required');}
  var self = this,
    _limit = 2,
    apiUrl = "http://localhost:58938/api/ShopViewDisplay/PLTO/PLTO/10";

  // Expose Public method(s)
  this.load = load;
  //this.render = render;

  function load() {
    reset()
    $.ajax({

        url : apiUrl,
        type : 'GET',
        dataType:'json',
        success : function(data) {              
                    data.map(renderItem, function(el) {
                    element.append(el);
        });
        },  
        error : function(request,error)
        {
            alert("Request: "+JSON.stringify(request));
        }
    });
  }
  
  // this renders each item 

  function renderItem(obj, index, list) {
    var callback = typeof this === 'function' ? this : false;
    // This could use document create fragment, possible speed boost
    // 20% of the time, pick random status icon, in all other cases pick the 'good' check icon.
    
                function renderItem(obj) {
                    var callback = typeof this === 'function' ? this : false;
        
                    var statusIcon = "fire";
                    var itemPanel = Panel({
                        icon: statusIcon,
                        title: obj.WorkOrderNumber,
                        classcontrol: obj.PressNo,
                        trustedBody: [
                            '     Machine:  
', Utils.escapeHtml(obj.PressNo), '
',
                            '    
                                                                   ',
                            '     Priority:  
', Utils.escapeHtml(obj.Priority),
                            '
',
                            '    
                                                                   ',
                            '     Part:  
', Utils.escapeHtml(obj.Part), '
',
                            '    
                                                                   ',
                            '     Material: 
', Utils.escapeHtml(obj.PartDesc), '
',
                            '    
                                                                   ',
                            '     Setup(E/A): 
',
                            Utils.escapeHtml(obj.EstActSetupHrs).replace('
', ' / '), '
',
                            '    
                                                                   ',
                            '     Run (E/A): 
',
                            Utils.escapeHtml(obj.EstActRunHrs).replace('
', ' / '), '
',
                            '    
                                                                   ',
                            '     Qty: 
',
                            Utils.escapeHtml(obj.CalEndCompleteQty).replace('
', ' / '), ' 
'
                        ].join('
')
                    });
    
                    itemPanel = $(itemPanel);
    
        myFunction();

    return (typeof(callback) === 'function' ? callback(itemPanel) : itemPanel);}

HTML

Here is where I append the panels



    
        
        Loading, please wait...

Example of what I would like to see happen:

 
    panel 1 - class="panel" - I have PressNo 5-1
    panel 6 - class="panel" - I have PressNo 5-1
 

 
    panel 2 - class="panel" - I have PressNo 7
    panel 8 - class="panel" - I have PressNo 7
 

 
    panel 9 - class="panel" - I have PressNo 9-3
    panel 10 - class="panel" - I have PressNo 9-3

This is what it looks like now

This is what I would like it to look like

update trying @obscure suggestion/answer

I get the following in my browser console -

TypeError: theDiv[0] is undefined

When I console log I get the following output (it looks like my data hasn't been loaded yet).

console.log(id, document.getElementsByClassName(id));
1 HTMLCollection { length: 0 } index:116:25

Full code

@{
    Layout = "";
}



    
    
    
    
    
    



    
        
        Loading, please wait...

obscure · Accepted Answer

At the moment you're generating each container DIV - e.g. class="5.1" with each panel.

function Panel(opts) {

  return ['',
          '',
          '  ',
          '    ',
          '     ',
          '     ', Utils.escapeHtml(opts.title), '',
          '    ',
          '  ',
          '  ',
          (opts.trustedBody || Utils.escapeHtml(opts.body)),
          '  ',
          ''].join('');

}

I assume '

' is the target div. Anyway, this means you're generating a new container div each time you generate a new panel. You should make sure that there isn't a div that uses that specific class before you create a new one.

function Panel(opts) {
  var theDiv = document.getElementsByClassName(opts.classcontrol);
  var theArray = ['',
    '  ',
    '    ',
    '     ',
    '     ', Utils.escapeHtml(opts.title), '',
    '    ',
    '  ',
    '  ',
    (opts.trustedBody || Utils.escapeHtml(opts.body)),
    '  ',
    '

'
  ];
  if (theDiv.length == 0) {
    theArray.splice(0, 0, '');
    theArray.push("");
  }

  return theArray.join('');
}

Inside the function renderItem() we need to make this distinction once more.

Right after

itemPanel = $(itemPanel);

Insert this

var theDiv = document.getElementsByClassName(obj.PressNo);
if (theDiv.length == 0) {
  return (typeof(callback) === 'function' ? callback(itemPanel) : itemPanel);
} else {
  theDiv[0].appendChild(itemPanel);
  return undefined;
}

and remove

return (typeof(callback) === 'function' ? callback(itemPanel) : itemPanel);

at the end of that function.

This appends the newly created panel to the corresponding parent div - in case it exists. The return undefined is a workaround for this code inside your load() function

function(el) {
  element.append(el);

});

it would try to append whatever el is to element. Since we might already appended the panel before we need to make sure it won't get appended a second time. So modify the above to

function(el) {
  if (el != undefined) {
    element.append(el);
  }
});

Dynamically grouping html elements in side of a parent div class

JS

HTML

Here is where I append the panels

update trying @obscure suggestion/answer

Full code

Answers (1)

Related Questions