來自PHP的jQuery EasyUI手風琴內容

Question

我再一次因頭撞傷而謙卑地來到你面前，頭撞在牆上...

我一直在嘗試學習如何從php / MySQL查詢中填充jQuery EasyUI手風琴。 我相信我現在可以將數據正確地返回到網頁，但是我無法弄清楚如何解析和格式化該數據以將其顯示為頁面上的內容。 我試圖實現的基本上是一種手風琴，以顯示與個人的每個對應關系的聯系歷史作為手風琴項目。 這是PHP查詢的輸出示例。

{"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."}]}

我正在嘗試獲取“ contact_dt”作為每個手風琴標簽的標題，然后在手風琴標簽的正文中格式化其余元素。 當前，當我選擇包含“手風琴”的“聯系歷史”選項卡時，我的工作忙碌起來，但這只會在正文中產生一個很小的方形框，並且不會更改標題。 這是我確定已修改的代碼。 首先是HTML部分...

<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>

現在介紹jQuery片段...首先是基本調用該函數的JS。 這是在頁面末尾的正文中。

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

現在，對於在頭部定義的功能以及我認為真正混亂的位置。

            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);
            });
        }
    }

我確定我在基本的JS概念中表現出了無知。 正如我在開始時提到的那樣，我實際上是在將其用作學習練習以及構建有用的東西。 任何幫助將不勝感激。 此外，非常歡迎任何可能幫助我克服一些概念上的缺點的在線教程。 提前致謝。

Answer 1

好吧...我終於弄清楚了我的問題。 這是我現在正在使用的功能。

    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
                    );
                    });
                }
            });
        }
    }

我希望其他一些像我這樣的菜鳥也能從中受益。