jQuery EasyUI accordion content from php

Question

Once again I humbly come before you with bruises upon my head from beating my head against a wall...

I have been trying to learn as I go in figuring out how to populate a jQuery EasyUI accordion from a php/MySQL query. I believe that I am now getting the data back to the webpage correctly, but I am unable to figure out how to parse and format this to be displayed as the content on the page. What I am attempting to achieve is basically an accordion to display the contact history with each correspondence with an individual as an accordion item. Here is a sample of the output from the PHP query.

{"rows":[{"phone":"5554072634","contact_dt":"2014-01-27 22:51:37","method":"Email","who":"Scott","note":""},{"phone":"5554072634","contact_dt":"2014-01-27 23:08:49","method":"Spoke","who":"Scott","note":"Called back and she is not interested."}]}

I am trying to get the "contact_dt" as the title of each accordion tab and then format the rest of the elements in the body of the accordion tabs. Currently I'm getting a busy spinner when I select the Contact History tab that contains the accordion but this only yields a tiny square box in the body and does not alter the title. Here is the code that I'm sure I have mangled. First for the HTML portion...

<div id="history" title="Prospect Contact History" closable="true" style="padding:10px;">
        <h2 class="atitle">Prospect Details</h2>
        <div id="aa" class="easyui-accordion" style="width:500px;height:300px;">
        <div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">
        <h3 id="hist_title" style="color:#0099FF;">Accordion for jQuery</h3>
        <p>Accordion is a part of easyui framework for jQuery.
        It lets you define your accordion component on web page more easily.</p>
        </div>
        </div>
    </div>

Now for the jQuery pieces... First is the JS to basically call the function. This is in the body at the end of the page.

        <script type="text/javascript">
        $('#tt').tabs({
           onSelect:function(title){
              if (title == 'Prospect Contact History'){
                //$( "#hist_title" ).html( "Accordion function is working.");
                 accordionHistory();
              }
           }
        });
</script>

Now for the function that is defined in the head and where I think the real mess is at.

            function accordionHistory() {
        $( "#hist_title" ).html( "Accordion function is working.");
        var pp = $('#aa').accordion('getSelected'); // get the selected panel
        if (pp){
            pp.panel('refresh','contact_history.php?phone=' + phone); // call 'refresh' method to load new content
            var temp = $('#aa').form('load',pp);

            $.each( temp, function( i, val ) {
                var txt1=$("<p>Time: ").html(val.contact_dt);
                var txt2=$("</p><p>Method: ").html(val.method);
                var txt3=$("</p><p>Who: ").html(val.who);
                var txt4=$("</p><p>Note: ").html(val.note);
                //$("#hist_title").html(val.contact_dt);
                $("#hist_item").html(txt2,txt3,txt4);
            });
        }
    }

I'm sure I'm displaying gross ignorance here in basic JS concepts. As I mentioned at the beginning I'm really using this as a learning exercise as well as building something useful. Any help would be greatly appreciated. Additionally, any online tutorials that might help walk me thru some of my conceptual shortcomings would be most welcome. Thanks in advance.

Answer 1

Well... I finally have figured out my issues. Here is the function that I'm now using to get this working.

    function accordionHistory() {
        var pp = $('#aa').accordion('getSelected'); // get the selected panel
        if (pp){
            $.ajax({
                post: "GET",
                url: "get_history.php?phone=" + phone,
                dataType: 'json',
                success: function( details ) {
                    $.each(details.rows, function(index, element) {
                    $('#hist_title').replaceWith(
                    'Phone: '
                    + element.phone
                    + 'Contact time: '
                    + this.contact_dt
                    + '<br/>Method: '
                    + this.method
                    + '<br/>Who: '
                    + this.who
                    + '<br/>Note: '
                    + this.note
                    );
                    });
                }
            });
        }
    }

I hope some other noob like myself finds this useful.