英国のコンピューティンググリッドに送信されたコンピューティングジョブのジョブ情報を表示するページを作成しようとしています。このページは、couchDBからのジョブ情報をアクセスしやすい形式で表示することを目的としています。jQueryアコーディオンを使用して情報を表示したいので、最初は最も関連性の高いジョブ情報のみを表示し、ユーザーは必要に応じて他のセクションを参照して詳細を確認できます。
これを行うために、2つのファイルがあります。
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>
そして、データベースにクエリを実行し、正しいジョブファイルを開き、HTMLコードをアコーディオンに追加するjavascriptファイル(job.js)があります:(この前の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を2週間しか学んでいないので、提案できるはるかに簡単なアプローチがあれば、ここでも喜んでいます。
前もって感謝します!