[javascript / HTML] innerhtml gegevens bewerken

[klaaz]

Ik hoop dat de vlag de lading een beetje dekt.

Ik probeer het volgende te doen:

In een javascript gebruik ik remote scripting om een stukje HTML (table met maximaal 10 regels) op te haal welke ik vervolgens in een DIV stop welke wordt toegewezen aan een variabele in het oorspronkelijke javascript:

code:

data += etc...
data += "<div id='info'></div>"
data += etc...

Deze informatie wordt op haar beurt weer in een DIV gezet welke in de oorspronkelijke HTML pagina staat:

code:

document.getElementById('contentinput').innerHTML = data;

So far so good. Alles werkt.

Nu heb ik een javascript welke van de gegevens geplaatst in <div id='info'> een nette grid moet maken. Dat gaat dus niet. IE meld dat bij die laatste procedure de betreffende tabel ID niet wordt gevonden.

Wanneer ik de tabel fysiek in het script zet werkt het prima. Dit is exact hetzelfde als wat als resultaat uit door remote script wordt geladen. Het lijkt er dus op dat de gegevens welke door het remotescript in de variabele zijn geplaatst niet wordt gezien door het laatste script.

Ik zie iets over het hoofd en kom er even niet uit. Heeft het iets met DOM te maken? Heb me al suf gezocht op allerlei onderwerpen maar vindt geen oplossing. Ik hoop dat ik het duidelijk heb beschreven.

[Rekcor]

Wil je anders ff (de relevante gedeelten van) de HTML-code posten? Maakt het debuggen een stuk makkelijker!

[klaaz]

Ok, ik zal het proberen. Alles posten wordt te onoverzichtelijk:

code:

// de DIV
data += "   <div id='infopages' style='background-color:white;width:100%;height:100%;'></div>";

// De call naar het remotescript
// Deze geeft in HTML een tabel met maximaal 10 regels terug
showInfopages(productcode);

// het geheel wordt vervolgens weer in een andere DIV geplaatst
document.getElementById('contentinput').innerHTML = data;
        
// Waarna de tabel met tabel ID myTable2 wordt voorzien van een mooie grid uitstraling (dat gaat mis omdat deze myTable2 niet kan vinden)
initTableWidget('myTable2',435,200,Array(false,false,false,false,false));

Het punt is dat wanneer ik de tabel welke m.b.v. het remotescript wordt opgebouwd fysiek in de code zet de functie initTableWidget wel werkt.

vb:

code:

data  =  "<div id='infopages' style='background-color:white;width:100%;height:100%;'>";
data += "   <div class='widget_tableDiv'>";
data += "       <table id='myTable2'>";
data += "           <thead>";
data += "               <tr>";
data += "                   <td>Productcode</td>";
data += "                   <td>Titel Consument</td>";
data += "                   <td>Titel Professional</td>";
data += "               </tr>";
data += "           </thead>";
data += "       <tbody class=scrollingContent>";
data += "               <tr>";
data += "                   <td>regel 1</td>";
data += "                   <td>111</td>";
data += "                   <td>222</td>";
data += "               </tr>";
data += "               <tr>";
data += "                   <td>regel 2</td>";
data += "                   <td>111</td>";
data += "                   <td>222</td>";
data += "               </tr>";
data += "           <tr>";
data += "               <td style='color:blue;' colspan='3'>Infopagina toevoegen</td>";
data += "           </tr>";
data += "           </tbody>";
data += "           <tfoot>";
data += "               <tr>";
data += "                   <td style='height:100%;'></td>";
data += "                   <td></td>";
data += "                   <td></td>";
data += "               </tr>";
data += "           </tfoot>";
data += "       </table>";
data += "     </div>";
data += "   </div>";

Het initTableWidget script is van dhtmlgoodies.com. Ik heb echter het idee dat het niet aan dit script ligt maar dat ik gewoon ergens een denkfout maak of dat deze vorm van nesting van scripts gewoon niet gaat werken...

[user109731]

Wat gebeurt er in showInfoPages() ? Die moet toch een waarde teruggeven? Of het moet een globale var zijn, maar dat is niet heel netjes, en niet nodig hier.

Laat showInfoPages() dus de tabel returnen, en plak dat aan data:

JavaScript:

function showInfoPages() {
  tabel = "<table>...</table>";
  return tabel;
}

data += "<div id='infopages' style='background-color:white;width:100%;height:100%;'>";
data += showInfopages(productcode);
data += "</div";
document.getElementById('contentinput').innerHTML = data;

[moozzuzz]

Ik dacht me te herinneren dat werken via innerHTML de DOM-tree niet aanpast (innerHTML wordt dan als platte tekst gezien zonder structuur), waardoor je tabel/div met infopage-id natuurlijk niet bestaat. Ik vind de bron wel niet meteen terug, dus je zou dit nog moeten checken.

[klaaz]

@ Grote prutser: showInfoPages() geeft idd een table terug met de content. dat werkt op mijn, en op jouw manier. Het probleem is dat de volgende functie initTableWidget niet in staat lijkt de tabel vorm te geven.

Terwijl dit wel gebeurt als ik exact dezelfde table met de hand in de functie zet (data += "<table id='myTable2'>...</table>").

Als ik initTableWidget tijdelijk uitschakel zie ik een keurige table terugkomen zoals het hoort. initTableWidget kan dan echter de table niet zien op de een of andere manier. Daar zal ongetwijfeld een verklaring voor zijn zoals moozzuzz zegt, daar ben ik dan ook heel nieuwsgierig naar...

[crisp]

Probeert initTableWidget eens na een korte timeout uit te voeren zodat de browser tijd heeft om de table te renderen.