JQueryUI Accordion Redesign

I am changing an accordion structure () and changing it based on a choice using AJAX.

The problem is, based on the accordion docs, I expect it to work like

<h3>header</h3>
<div><anything></anything></div>

Making the h3 stuff the header and the div stuff the body, but when I use ajax to dynamically create it it screws up. This code specifically uses the correct header for the first accordion box, but the body is empty and the next header becomes "There are no open session windows..." which is clearly not what I wanted. The JSON this gets is here: http://benbuzbee.com/trs/json.php?show=sessions&courseid=5

$(function() { 
    $("#courseselect").change(function () {

        $("#testselect").accordion("destroy").html(""); // Empty any previous data
        $("#testselect").css("display", "block"); // Display it if it was hidden

        $.getJSON('json.php?show=sessions&courseid=' + $(this).val(), function(data) {
            for (x in data)
            {
                $("#testselect").append("<h3><a href=\"#\"&开发者_如何学Cgt;" + data[x].name + "</a></h3>");
                $("#testselect").append("<div>");
                if (!data[x].sessions)
                    $("#testselect").append("<p>There are no open session windows for this test.</p>");
                for (si in data[x].sessions)
                {
                    $("#testselect").append("<a href=registerconfirm.php?sessionid=\""+data[x].sessions[si].uno+"\">"+data[x].sessions[si].location+"</a>");
                }
                $("#testselect").append("</div>");
            }
            $("#testselect").accordion();
            //$("#testselect").accordion({ change:function(event, ui) {  courseid = ui.newHeader.attr("value"); }
        }); // End getJSON 
     }); // end .change
}); // end $()

---

I think I see a few problems.

Your statement

$("#testselect").append("<div>") 

will append BOTH an opening and a closing tag to #testSelect like this:

 <div id='testselect'><h3><a> </a> </h3><div></div> </div>

Any further appending to #testselect will append elements AFTER the div tags.

Your next statement,

$("#testselect").append("<p>There are no open session windows for this test.</p>");

Will do this

   <div id='testselect'><h3><a></a></h3><div></div><p> There are no open session windows for this test. </p> </div>

Your statement

$("#select.").append("</div>") 

will NOT append a closing div tag to #testselect like you seem to be intending. Instead, it will do nothing.

You should change your for loop to something like this:

for (x in data)
{
     var $header = $("<h3>").appendTo("#testSelect");
     $header.append("<a href=\"#\">" + data[x].name + "</a>")
     var messageContainer = $("<div>").appendTo($header);
     if (!data[x].sessions)
           messageContainer.append("<p> There are no open session windows for this test </p>");
           for (si in data[x].sessions)
           {
                  messageContainer.append("<a href=registerconfirm.php?sessionid=\""+data[x].sessions[si].uno+"\">"+data[x].sessions[si].location+"</a>");
           }
           $("#testselect").accordion();
}