1

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

为此，我有两个文件：

  1. 我有一个 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>

  2. 我有一个查询数据库、打开正确的作业文件并将 HTML 代码附加到手风琴的 javascript 文件 (job.js) ：

    //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，所以如果您可以建议一种更简单的方法，我也很乐意在这里。

先感谢您！

4

2 回答 2

1

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

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

检查这个jsfiddle

此外，您不需要在页面加载时破坏手风琴，因此删除以下行：

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

编辑：正如@Shmiddty 提到的，您需要将重新制作手风琴的路线放入成功回调中。

于 2012-08-14T16:47:58.910 回答
0

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

    });

});

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

于 2012-08-14T16:21:38.023 回答