Home/ Questions/Q 8392111
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T19:26:10+00:00

I am trying to create a page that displays job information for computing jobs

  • 0

I am trying to create a page that displays job information for computing jobs submitted to UK computing grid. The page is intended to display the job information from couchDB in a nice accessible format. I want to use the jQuery accordion to display the information, so that I can have only the most relevant job information visible initially and then the user can browse the other sections for more detail, if required.

To do this I have two files:

  1. I have an HTML file (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. and I have a javascript file (job.js) that queries the database, opens the correct job file and appends the HTML code to the accordion: (this previous stackoverflow question was very useful in doing this bit!)

    //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 });
});

My problem is that the html is being appended fine but it is not being formatted as an accordion – i.e. all the appended HTML is displayed at once and headings cannot be expanded/collapsed.

After playing around with the order a bit, I have worked out that it works fine if the code where I append the HTML is placed outside of the db.openDoc() method. This is fine for just text, but I need to display a lot of variables (not just those shown) that are defined in this method.

So my question is whether it is possible to store the variables that I need so they can be accessed outside the openDoc() method. Or alternatively if there is a way of appending the HTML within the method so that it works with accordion.

Any answers you can suggest would be greatly appreciated. Equally, I’ve only been learning javascript/HTML for a couple of weeks, so if there is a much easier approach that you can suggest, I’d be happy to here that too.

Thank you in advance!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need to destroy accordion each time you get results from db.

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

    Check this jsfiddle

    Also, you don’t need to destroy accordion on page load, so remove following line:

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

    EDIT: as @Shmiddty mentioned, you need to put line with remaking accordion into success callback.

    • 0