使用jQuery UI手风琴显示couchDB数据库搜索结果的问题

我正在尝试创建一个页面，显示提交给英国计算网格的计算作业的作业信息。该页面旨在以良好的可访问格式显示来自couchDB的作业信息。我希望使用jQuery手风琴来显示信息，以便我可以只有最相关的作业信息可见，然后用户可以浏览其他部分以获取更多细节（如果需要）。使用jQuery UI手风琴显示couchDB数据库搜索结果的问题

要做到这一点，我有两个文件：

我有一个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代码附加到手风琴上：（此前的计算器流程question在做这个位时非常有用！）

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

预先感谢您！

来源

2012-08-14 Ashley

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

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

入住这jsfiddle

而且，你不必摧毁在页面加载手风琴，所以删除以下行：

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

编辑：作为@Shmiddty提到的，你需要将重新制作的手风琴放入成功回调中。

来源

2012-08-14 16:47:58 vittore

感谢您的帮助。做出更改后，您建议我的代码运行得非常好。重塑手风琴时，我确实需要'销毁'部分和另一部分。 – Ashley 2012-08-15 09:54:50

我假设“openDoc”方法是异步调用，对吗？

如果是这样，那么“重制”手风琴的代码将在调用BEFORE之前添加任何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-14 16:21:38 Shmiddty

使用jQuery UI手风琴显示couchDB数据库搜索结果的问题

回答

相关问题