Home/ Questions/Q 8284149
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T10:59:19+00:00

I am writing the code for getting the accordion contents when I click on

  • 0

I am writing the code for getting the accordion contents when I click on the button. The inner contents for the accordion are being received from the sever using ajax call.These contents are displayed inside a dialog box.

Now the problem is that the contents (originally supposed to be accordion contents) can be seen in the dialog box as simple html and not as accordion (with buttons). If I just use the same contents in the html file(paste the contents received from the server inside the “” they work fine and I can see the accordion in the dialog box.

Whats going wrong? Is it related to that the accordion contents need to be given before hand. Can anyone suggest a way to fix this. (the contents of the accordion will change every time that’s why they are being received from the server)

Javascript function is:

<script>
     $(document).ready(function() {
    $("#accordion").accordion({
    autoHeight: false
});
     </script>


<script language="javascript"> 

    function Faulttest() 
    {

    var xmlhttp;
    if (window.XMLHttpRequest)
    {xmlhttp=new XMLHttpRequest();}
    else
    {xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}
    xmlhttp.onreadystatechange=function()
    {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    Here we get the contents which should be inside the accordion which we receive from the server



> **document.getElementById("accordion").innerHTML=xmlhttp.responseText;**



    }
    }
    xmlhttp.open("GET","http://****/Anomalies/index.jsp",true);
    xmlhttp.send();
}

Html contents of page are:

<body style="font-size:62.5%;"  >
        <div id="page">         
        <div id="header"><h1>header</h1></div>          
        <div id="body" >
            <h1>content top </h1>                       
        <div id="dia">
        <div id="dialog" title="Detailed FeedBack"><div id="accordion">

        // CODE SHOULD GO HERE


        </div>
            </div>
                </div>
   <button type="button" onclick="Faulttest();">Click Me!</button>  
  </body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Without knowing exactly how the accordion script works, I’m assuming it’s because the script assumes that the contents within the #accordion upon initialization are the contents with which the script will need to work with.

    If it’s possible with your implementation, put empty divs inside the #accordion (or whatever the accordion script specifies for child nodes) and populate those dynamically instead.

    Otherwise, wait to initialize the accordion on the #accordion node until after the AJAX call is returned.

    • 0