1

I have the following HTML 

<div id="tabPanelContainer">
    <div id="Tab1" data-options="dxItem: { title: 'Tab1' }">
        <div id="gridContainer1"></div>
    </div>
    <div id="Tab2" data-options="dxItem: { title: 'Tab2' }" >
        <div id="gridContainer2"></div>
    </div>
</div>

I want to create this using js or jquery I have tried the following:

A.

var tabs = $('#tabPanelContainer').data("options","dxItem: { title:  "+tabId+" }");
$(tabs).append('<div id='+gridId+'></div>');

B.

var tabs = $('#tabPanelContainer').attr({ 'data-options': 'dxItem: { title: "+tabId+" }' });
$(tabs).append('<div id='+gridId+'></div>');

I have looked at multiple threads on how to do this and tried multiple things but nothing is working....

I have found this: How to set data attributes in HTML elements , and other similar threads but not quite the same or enough to figure it out.

This creates multiple grids but not the tabs. So to be clear if I create the HTML elements on the PHP file (hardcoded) then my tabs load correctly but if I try to dynamically create the tabs based on a for loop my tabs don't get created. enter image description here enter image description here

Instead of

enter image description here enter image description here

Ignacio Ara
  • 2,476
  • 2
  • 26
  • 37
cocopan
  • 109
  • 3
  • 19
  • 1
    What's your question? Is the above code not working? (I know it is not, but your question is not clear) – Sam Battat Jul 03 '18 at 15:48
  • Hello Sam thanks for your help. I added some more clarification. I also tried the code provided but it still doesn't create the tabs correctly. I also added some pictures of how the html looks when I inspect one vs the other... I appreciate you trying to help me – cocopan Jul 03 '18 at 16:03

1 Answers1

0

You are setting the data attribute of #tabPanelContainer instead of each div element. Use this code instead:

var tabs = $("#tabPanelContainer"); // <div id="tabPanelContainer">
var tab = $("<div>", { id: tabId }); // <div id="Tab1">
tab.attr("data-options", "dxItem: { title: '" + tabId + "' }");
tab.append($("<div>", { id: gridId })); // <div id="gridContainer2">
$(tabs).append(tab);
Martin D.
  • 1,950
  • 3
  • 23
  • 33
  • Hello Martin I tried this but it still didn't work. It also only created the grids without the tabs... It is like it doesn't recognize the data option for the dx item. I appreciate your help. – cocopan Jul 03 '18 at 17:19