使用 jQuery UI 折叠面板显示 couchDB 数据库搜索结果时出现问题

Problems using jQuery UI accordion to display couchDB database search results

本文关键字：搜索结果 数据库 问题 couchDB 显示 UI jQuery 折叠 使用      更新时间：2023-09-26

我正在尝试创建一个页面，显示提交给英国计算网格的计算作业的作业信息。该页面旨在以易于访问的格式显示来自 couchDB 的作业信息。我想使用 jQuery 手风琴来显示信息，以便我最初只能看到最相关的作业信息，然后用户可以根据需要浏览其他部分以获取更多详细信息。

为此，我有两个文件：

  1. 我有一个 HTML 文件（作业.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>

  2. 我有一个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, 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);
        },
            error: function(e) {
            alert('Error loading from database: ' + e);
        }
    });
    //Remake accordion
    $('#accordion').accordion({ header: "h3", collapsible: true });
});

我的问题是html被很好地附加了，但它没有被格式化为手风琴 - 即所有附加的HTML都立即显示，标题无法展开/折叠。

在稍微调整了一下顺序之后，我已经发现，如果我附加 HTML 的代码放置在 db.openDoc() 方法之外，它工作正常。这只适用于文本，但我需要显示此方法中定义的许多变量（而不仅仅是显示的变量）。

所以我的问题是是否可以存储我需要的变量，以便可以在openDoc()方法之外访问它们。或者，如果有一种方法可以在方法中附加 HTML，以便它与手风琴一起使用。

您能建议的任何答案将不胜感激。同样，我只学习了几个星期的javascript/HTML，所以如果你能推荐一种更简单的方法，我也很乐意在这里。

提前谢谢你！

每次从 db 获得结果时都需要销毁手风琴。

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

检查这个jsfiddle

另外，您不需要在页面加载时销毁手风琴，因此请删除以下行：

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

编辑：正如@Shmiddty提到的，你需要将手风琴重新制作成成功的回调.

我假设"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);
        }
    });
});

如果要将多个项目填充到折叠项中，则需要对其进行修改，以便仅在添加最后一项后调用用于重新生成折叠项的代码。或者，如果您要动态添加项目，则每次都销毁并创建手风琴（尽管我不确定销毁是否必要）。

相关文章：