Salve a tutti,
sto cercando di aggiungere dinamicamente dei tab tramite jquery, e sto trovando notevoli difficoltà:
in pratica ho una pagina con un solo tab, in cui va riempito un form. In base alle necessità, deve essere possibile aggiungere un altro form in un nuovo tab (ad esempio per compilare i dettagli riguardanti due oggetti appartenenti alla stessa categoria che devono essere gestiti insieme lato server).
C'è un semplice bottone
codice:
<input type="button" value="" class="agui_leina" onclick="aggiungiLinea()" />
che va a richiamare questa funzione javascript
codice:
function aggiungiLinea() {
var ul = document.getElementById("listaMenu");
var linee = ul.getElementsByTagName("li").length; // numero di tab già presenti
var nuovaLinea = document.createElement("div"); // creo un nuovo div
nuovaLinea.setAttribute("id", "linea" + (linee + 1)); // gli do un id "linea#"
nuovaLinea.innerText = "prova"; // inserisco un testo al suo interno
$('#tabs').tabs('add', '#linea' + (linee + 1), "Linea " + (linee + 1)); // creo un nuovo tab
var newDiv = document.getElementById("linea" + (linee + 1)); // recupero il tab
newDiv.innerHTML = "test"; // inserisco un testo al suo interno
}
La mia domanda banale è: perché non funziona?
Quella meno banale è: perché mi crea correttamente il div nel posto giusto con id "linea2", ma quando vado a selezionare la label del tab mi resta in visualizzazione il contenuto del tab già presente? Inoltre il testo "prova" non viene mai scritto, mentre "test" viene scritto e visualizzato sempre in coda al codice del tab "linea1"?
(Nel test ho semplicemente un tab completo con id "linea1" e cerco di aggiungerne un'altro.
Grazie a tutti!