[ajax] Accodare del testo e non sostituirlo con innerHTML

[giacomino_jack]

Non so come spiegarmi:

Ho la necessità di visualizzare all'interno di una tabella riepilogativa, un'altra tabella di dettaglio ma, quando ajax mi torna il testo HTML del dettaglio, perdo la riga di cui ho chiesto il dettaglio perchè la vado a sostituire con innerHTML mentre io la vorrei accodare al fine riga (</tr>)

Per capirci vorrei fare qualcosa del tipo

elemento.innerHTML = elemento.HTML + ajax.responseText; 

L'errore che mi da è undefined ed è sicuramente riferito ad elemento.HTML (ho provato anche con elemento.Text). C'è un modo per riprendere la parte testuale dell'elemento che devo sostituire? :master:


Grazie e

[cavicchiandrea]

prova cosi:
elemento.innerHTML = elemento.innerHTML + ajax.responseText;

[giacomino_jack]

GRAZIE!!!


.innerHTML è una proprietà e non un metodo (certe volte mi sento davvero un cog... )

[giacomino_jack]

L'accodamento funziona ma non mi termina la riga:

Mi spiego meglio:

Ho una tabella con dei dati riepilogativi ...

...
<table>
<tbody>
<tr class="Testata">
<td></td>
<td width="100" align="center">Colonna 1 </td>
<td width="100" align="center">Colonna 2 </td>
<td width="75" align="center">Colonna 3 </td>
</tr>
<tr id="RigaEl1" class="RigaDispari">
<td>[url="..."]Dett.[/url]</td>
<td width="100" align="left">Valore col1</td>
<td width="100" align="left">Valore col2 </td>
<td width="75" align="center">Valore col3 </td>
</tr>
<tr id="RigaEl2" class="RigaPari">
<td>[url="..."]Dett.[/url]</td>
<td width="100" align="left">Valore col1</td>
<td width="100" align="left">Valore col2 </td>
<td width="75" align="center">Valore col3 </td>
</tr>
</tbody>
</table>
... 

ogni riga ha l'ID di aggancio per ajax e l'avvio della lettura del dettaglio sull'evento on click
La VisualizzaDettaglio mi ritorna un ulteriore elenco in forma tabellare che devo includere tra le righe della prima tabella: infatti, dopo la riga riepilogativa su cui è stato richiesto il dettaglio, deve essere visualizzata la tabella di ritorno (per questo mi serviva di accodare il responseText ...)

Ma qui sorge il problema.

Ho riscontrato che il tag di inizio riga <tr> che contiene l'ID di aggancio non si chiude (anche forzando) e la tabella del dettaglio, invece di finire all'interno della prima, è visualizzata di fianco all'altezza della riga dove è stata effettuata la richiesta.

Quindi mi ritrovo una pagina con

...
<tr id="RigaEl1" class="RigaDispari">
  <td>[url="..."]Dett.[/url]</td>
  <td width="100" align="left">Valore col1</td>
  <td width="100" align="left">Valore col2 </td>
  <td width="75" align="center">Valore col3 </td>
  <tr>
    <td colspan"3">
      <table>
        <tr class="Testata">
           .... DETTAGLIO....
       </tr>
      </table>
    </td>
  </tr>
</tr>
... 

Invece di avere

...
<tr id="RigaEl1" class="RigaDispari">
  <td>[url="..."]Dett.[/url]</td>
  <td width="100" align="left">Valore col1</td>
  <td width="100" align="left">Valore col2 </td>
  <td width="75" align="center">Valore col3 </td>
</tr>
  <tr>
    <td colspan"3">
      <table>
        <tr class="Testata">
           .... DETTAGLIO....
       </tr>
      </table>
    </td>
  </tr>
... 

C'è un modo per chiudere il tag della riga prima di accodare il dettaglio?
o sto sbagliando qualcosa?

[pietro09]

:master: Ci sono diversi modi. Uno potrebbe essere quello di aggiungere sempre per ogni riga, una riga di dettaglio nascosta, con una colonna. Quando si riceve il dettaglio, si mette con innerHTML nella giusta colonna e la si rende visibile.

Se tutto è fatto dal server, è facile mettere per esempio RigaEl1 come id di riga e ColonnaEl1 come id di colonna. :master: Non so se mi sono spiegato.

[giacomino_jack]

VVoVe:

Se ho capito bene inserisco 2 righe per ogni rk previsto nella tabella riepilogativa dove nella prima riga visualizzo i dati e la seconda la nascondo (ma come? ) e gli definisco anche l'ID di rientro per l'ajax

Giusto ?

Come si può nascondere una riga di una table?

[pietro09]

Originariamente inviato da giacomino_jack
VVoVe:

Come si può nascondere una riga di una table?

style="display: none;"

[giacomino_jack]

OK su mozilla funziona...

Ho inserito una riga in più dopo ogni riga di riepilogo così:

<tr id="DettRigaEl1">
<td class="CellaNascosta"></td>
</tr> 

ed ho definito lo stile della classe CellaNascosta così come mi hai suggerito

.CellaNascosta {
   display:none;
} 

Facendo tutto a livello di riga, il dettaglio mi rimane nascosto mentre così ho solo uno spazio di separazione delle righe leggermente più alto.
Qualche miglioria?


Sotto IE7 invece non vedo nulla.... ma forse è un problema diverso dato che ho un errore di tipo sconoscito nella visualizzazione della pagina esattamente alla riga

elemento.innerHTML = ajax.responseText; 

Forse è meglio aprire un altro 3d per l'errore in IE7..

[pietro09]

io metterei lo stile nascosto alla riga e non alla cella :master:

[giacomino_jack]

In questo lasso di tempo ho scoperto che:

L'ID di aggancio per il rientro da jax sul <tr> genera l'errore in IE7. Messo su <td> va che è una meraviglia.
Il problema però si sposta sullo stile display:none. Infatti, mentre per FF posso visualizzare i valori usando solo display:table-row per IE7 questa proprietà, diciamo così troppo 'pizzuta', è arabo. Riesco a ripristinare la visibilità in IE7 solo con display:block o display:inline che per mozzilla sono errate e pertanto generano una errata visualizazione.

Parlando con un esperto mi ha consigliato di usare le prototype VVoVe: per risolvere i problemi di compatibilità

Gli ho dato un'occhiata e..... :berto: non è chiaro! non è chiaro!

diciamo che mi sto quasi

A meno che non inserisco un controllo sul tipo di browser in uso.... ma come si fa?