Próbuję utworzyć stronę, która wyświetla informacje o zadaniach dotyczących zadań obliczeniowych przedłożonych do Grid Computing w Wielkiej Brytanii. Strona ma na celu wyświetlenie informacji o pracy z CouchdB w ładnym dostępnym formacie. Chcę użyć akordeonu jquery, aby wyświetlić informacje, dzięki czemu można mieć tylko najbardziej odpowiednie informacje o pracy, a następnie użytkownik może przeglądać inne sekcje, jeśli jest to wymagane.

Aby to zrobić Mam dwa pliki:

  1. Mam plik 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. i mam plik JavaScript (Job.js), który zapytania bazy danych otwiera poprawny plik zadania i dołącza kod HTML do akordeonu: (to poprzednie stackoverflow Pytanie było bardzo przydatne w robieniu tego 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 });
    });
    

Mój problem polega na tym, że HTML jest dołączony w porządku, ale nie jest sformatowany jako akordeon - tj. Wszystkie dołączone HTML są wyświetlane na raz, a nagłówki nie mogą być rozszerzone / zwinięte.

Po kilku bawie z zamówieniem opracowałem, że działa dobrze, jeśli kod, w którym dołączę HTML umieszcza się poza metodą db.openDoc(). Jest to w porządku dla tylko tekstu, ale muszę wyświetlić wiele zmiennych (nie tylko tych pokazanych), które są zdefiniowane w tej metodzie.

Moje pytanie brzmi więc, czy możliwe jest przechowywanie zmiennych, które potrzebuję, aby można było uzyskać dostęp poza metodą openDoc(). Lub alternatywnie, jeśli istnieje sposób dołączenia HTML w metodzie, tak, że działa z akordeonem.

Wszelkie odpowiedzi, które możesz sugerować, byłoby bardzo mile widziane. W równym stopniu nauczyłem się tylko JavaScript / HTML przez kilka tygodni, więc jeśli jest znacznie łatwiejsze podejście, które możesz sugerować, byłbym tu też szczęśliwy.

Z góry dziękuję!

1
Ashley 14 sierpień 2012, 20:11

2 odpowiedzi

Najlepsza odpowiedź

Musisz zniszczyć akordeon za każdym razem, gdy uzyskasz wyniki z DB.

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

Sprawdź to jsfiddle

Ponadto nie musisz zniszczyć akordeonu na obciążeniu strony, więc usuń następującą linię:

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

Edytuj: Jak wspomniano @Shmiddty, musisz umieścić linię z ponownym akordeonem w odcinanie odcinków.

1
vittore 14 sierpień 2012, 16:47

Zakładam, że metoda "OpenDoc" jest asynchronicznym, poprawnym?

Jeśli tak, kod do "remake" akordeon jest wywoływany przed dołączeniem dowolnego HTML.

Spróbuj tego:

$(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);
        }

    });

});

Jeśli wypełnisz wiele elementów do akordeonu, będziesz chciał zmodyfikować tego, aby kodeks remake został wywołany tylko po dodaniu ostatniej pozycji. Lub, jeśli dodajesz elementy dynamicznie, zniszcz i utwórz akordeon za każdym razem (choć nie jestem pewien, że niszczenie jest konieczne).

0
Shmiddty 14 sierpień 2012, 16:21