1

英国のコンピューティンググリッドに送信されたコンピューティングジョブのジョブ情報を表示するページを作成しようとしています。このページは、couchDBからのジョブ情報をアクセスしやすい形式で表示することを目的としています。jQueryアコーディオンを使用して情報を表示したいので、最初は最も関連性の高いジョブ情報のみを表示し、ユーザーは必要に応じて他のセクションを参照して詳細を確認できます。

これを行うために、2つのファイルがあります。

  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）があります:(この前の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週間しか学んでいないので、提案できるはるかに簡単なアプローチがあれば、ここでも喜んでいます。

前もって感謝します！

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 に答える