Problems occurred during Load Accordion Content through Ajax

[TaeWook Kang]

Data is imported from DB and the accordion is dynamically configured.

I want to configure content as Template(content="#content"), but there is a problem like Screenshot. 

I would appreciate it if you could tell me the solution.

html

<ejs-sidebar id="default-sidebar" type="Push" width="220px" target=".maincontent" isOpen="true" enableGestures="false" created="SetAccordionItems">
        <e-content-template>
            <div style="padding:0 5px 8px 5px;">
                <div class="title">JOB NAME</div>
                <center>
                    <ejs-dropdownlist id="DropdownProject" placeholder="Select a Job" index="0" dataSource="@ViewBag.Project" width="210" change="SelectJob" cssClass="SelectProjectDropdown">
                        <e-dropdownlist-fields text="value" value="key"></e-dropdownlist-fields>
                    </ejs-dropdownlist>
                </center>
            </div>
            <div class="control-section" style="padding-top:8px; border-top: 3px solid #cecece">
                <nav>
                    <div id="accordionDiv" class="control_wrapper accordion-control-section">


                    </div>
                </nav>
                <div id="UlList">


                </div>
            </div>
        </e-content-template>
    </ejs-sidebar>

/////////////////////////////////////////////////////////////////////////////////////////////////////

script

<script>
function SetAccordionItems() {


        var itemsData = [];


        var AccordionHeader = [];
        var AccordionContent = [];


        $.ajax({
            url: '@Url.Action("SetAccordionItems", "Home")',
            type: "POST",
            success: function (Parents) {
                for (var i = 0; i < Parents.length; i++) {


                    var ul = document.createElement('ul');


                    ul.setAttribute('id', Parents[i]['M_CODE']);
                    ul.style.display = 'none';
                    ul.style.paddingLeft = '20px';


                    document.getElementById('UlList').appendChild(ul);


                    AccordionHeader.push(Parents[i]['TITLE']);
                    AccordionContent.push('#' + Parents[i]['M_CODE'].toString());
                }
            }
        });


        $.ajax({
            url: '@Url.Action("GetliData", "Home")',
            type: "POST",
            success: function (items) {
                for (var i = 0; i < items.length; i++) {
                    var text = items[i]['TITLE'];
                    var id = items[i]['M_CODE'].toString();


                    var li = document.createElement('li');


                    li.innerHTML = '<a class="item" id="' + id + '" rel='nofollow' href="#" onclick="MenuOnClick(this);">' + text + '</a>';
                    var ul_id = id.substring(0, 2) + '0000';


                    var ul = document.getElementById(ul_id);


                    ul.appendChild(li);
                }


                for (var i = 0; i < AccordionHeader.length; i++) {
                    itemsData.push({ header: AccordionHeader[i], content: AccordionContent[i] });
                }


                var accordion = new ej.navigations.Accordion({
                    items: itemsData
                });


                accordion.appendTo('#accordionDiv');
            }
        });
    }
</script>

Data composition of Parents

Data composition of items

[Satheesh Kumar Balasubramanian]

Hi TaeWook,

Thanks for using Syncfusion Products.

We have validated your reported query "Problems occurred during Load Accordion Content through Ajax" based on your shared details and prepared sample to load accordion content through Ajax.

Sample: https://www.syncfusion.com/downloads/support/forum/170874/ze/CoreAccordion923177165

Kindly try the above sample and let us know if this works at your end. If you still face any problem, please share the below details to reproduce the issue which will help us to validate the issue and provide prompt solution as soon as possible.

• Replicate the issue in above sample or share issue replicating sample if possible
  
• Share all accordion and it's content related code snippets
  

Regards,

Satheesh Kumar B