使用jQuery UI手風琴顯示ouchDB數據庫搜索結果時出現問題

Question

我正在嘗試創建一個頁面，該頁面顯示提交給英國計算網格的計算工作的工作信息。 該頁面旨在以一種易於訪問的格式顯示ouchDB中的作業信息。 我想使用jQuery手風琴來顯示信息，這樣我就可以只看到最相關的工作信息，然后如果需要的話，用戶可以瀏覽其他部分以獲取更多詳細信息。

為此，我有兩個文件：

我有一個HTML文件（job.html）：

 <html> <!-- source jquery, jquery.couch, bootstrap scripts //--> <script type="text/javascript" src="job.js"></script> <!-- script to define accordion //--> <body> <div id="content"> <h1 id="jobhead">Job Description : </h1> <hr/> <div id="accordion"> </div> </div> </body> </html>

而且我有一個javascript文件（job.js），可以查詢數據庫，打開正確的作業文件，並將HTML代碼附加到手風琴中：（此上一個stackoverflow 問題在執行此操作時非常有用！）

 //define function 'get_parameter_by_name' //code to define database name $db var record_id = get_parameter_by_name('id'); $(document).ready(function() { //Destroy accordion first: $('#accordion').accordion('destroy'); //clear records $('#accordion').empty(); //use .openDoc method to get job information, then append html $db.openDoc(record_id, { success: function(data) { //check correct data is accessed console.log(data); //html content of accordion appended, eg html = '<h3><a href="#">Key Information:</a></h3>'; //Header 1 html += '<div>'; //Start of content 1 html += '<table id="keyData">'; html += '<tr><td>Module</td><td>' + data.module + '</td></tr>'; ... //append html $('#accordion').append(html); }, error: function(e) { alert('Error loading from database: ' + e); } }); //Remake accordion $('#accordion').accordion({ header: "h3", collapsible: true }); });

我的問題是該html可以很好地附加，但是沒有被格式化為手風琴-即所有附加的HTML都立即顯示，並且標題不能展開/折疊。

經過一番嘗試之后，我發現，如果將添加HTML的代碼放在db.openDoc()方法之外，則可以db.openDoc() 。 這僅適用於文本，但是我需要顯示此方法中定義的許多變量（不僅僅是顯示的變量）。

所以我的問題是是否可以存儲所需的變量，以便可以在openDoc()方法外部訪問它們。 或者，如果有一種方法可以將HTML附加到方法中，以使它與手風琴一起工作。

您可以提出的任何答案將不勝感激。 同樣，我只學習javascript / HTML了幾周，因此，如果您可以建議一種更簡單的方法，那么我也很樂意在此學習。

先感謝您！

Answer 1

每次從db獲得結果時，都需要銷毀手風琴。

//Remake accordion
$('#accordion').accordion('destroy').accordion({ header: "h3", collapsible: true });

檢查這個jsfiddle

另外，您不需要在頁面加載時銷毀手風琴，因此請刪除以下行：

//Destroy accordion first:
$('#accordion').accordion('destroy');

編輯：如@Shmiddty所述，您需要將重新制作手風琴納入成功回調中。

Answer 2

我假設“ openDoc”方法是異步調用，對嗎？

如果是這樣，在添加任何HTML之前，將調用“重制”手風琴的代碼。

嘗試這個：

$(document).ready(function() {

    //Destroy accordion first:
    $('#accordion').accordion('destroy');
    //clear records
    $('#accordion').empty();

    //use .openDoc method to get job information, then append html
    $db.openDoc(record_id, {
    success: function(data) {
        //check correct data is accessed
        console.log(data);

        //html content of accordion appended, e.g
        html = '<h3><a href="#">Key Information:</a></h3>'; //Header 1
        html += '<div>'; //Start of content 1
        html += '<table id="keyData">';
        html += '<tr><td>Module</td><td>' + data.module + '</td></tr>';
        ...

        //append html
        $('#accordion').append(html);

        //Remake accordion
        $('#accordion').accordion({ header: "h3", collapsible: true });

        },
            error: function(e) {
            alert('Error loading from database: ' + e);
        }

    });

});

如果您要在手風琴中填充多個項目，則需要對其進行修改，以便僅在添加最后一個項目之后才調用重新制作手風琴的代碼。 或者，如果您要動態添加項目，則每次都銷毀並創建手風琴（盡管我不確定銷毀是否必要）。

使用jQuery UI手風琴顯示ouchDB數據庫搜索結果時出現問題

問題描述

2 個解決方案

解決方案1
1 已采納 2012-08-14 16:47:58

解決方案2
0 2012-08-14 16:21:38

使用jQuery UI手風琴顯示ouchDB數據庫搜索結果時出現問題

問題描述

2 個解決方案

解決方案1 1 已采納 2012-08-14 16:47:58

解決方案2 0 2012-08-14 16:21:38

解決方案1
1 已采納 2012-08-14 16:47:58

解決方案2
0 2012-08-14 16:21:38