nicht angemeldet
Der Martin
Camping_RIDER
JürgenB
Camping_RIDER
Camping_RIDER
Hallo,
sorry erstmal, ich muss gerade die Profis in diesem Forum etwas beanspruchen :(
Ich lade mir durch durch Ajax eine Tabelle und darin enthaltene Zeilen immer nach Klick auf einem Button nach.
Fast funktioniert es schon nur die Formatierung hat er mir durcheinander
hier mal der Codeausschnitt der mir im ersten Step via Ajax geladen wird (das funktioniert )
Matthias Apsel
echo '<table cellspacing="0" cellpadding="0">';
echo '<thead>';
echo '<tr>';
echo '<th></th>';
echo '<th style="text-align: center" colspan="4">'._('test1-a').'</th>';
echo '<th style="text-align: center" colspan="4">'._('test1-b').'</th>';
echo '</tr>';
echo '<tr>';
echo '<th>'._('Spalte-1').'</th>';
echo '<th>'._('Spalte-2').'</th>';
echo '<th>'._('Spalte-3').'</th>';
echo '<th>'._('Spalte-3').'</th>';
echo '<th>'._('Spalte-4').'</th>';
echo '<th>'._('Spalte-5').'</th>';
echo '<th>'._('Spalte-6').'</th>';
echo '<th>'._('Spalte-7').'</th>';
echo '<th>'._('Spalte-8').'</th>';
echo '</tr></thead>';
echo '<tbody><tr>';
echo '<td>1</td>';
echo '<td>Item1</td>';
echo '<td>Item1</td>';
echo '<td>Item1</td>';
echo '<td>Item1</td>';
echo '<td>Item1</td>';
echo '<td>'.Item1.'</td>';
echo '<td>'.Item1.'</td>';
echo '<td>'.Item1.'</td>';
echo '</tr>';
echo '<div id="tab'.$tabrid.'" class="tab-content"></div>';
echo '</tbody>';
echo '<tr><td colspan="8"><button class="small orange" onclick="addnewrow('.$testTypeId.','.$testTypeGroup.','.$tabrid.')"><i class="icon-plus-sign"></i> '._('add Week').'</button></td></tr>';
echo '</table>';
Die Zeile mit
echo '<div id="tab'.$tabrid.'" class="tab-content"></div>';
an dem id="tab'.$tabrid.'" darf man sich nicht stören... da wird dynamisch eine id geladen da ich mit Registerkarten arbeite und je nach Register einen bestimmten Tab benötige.
ist das Problem:
Wenn ich die <div> reinschreibe da haut er es mir aus der Tabelle rauss und somit wird dann später der html-code an die falsche Stelle nachgeladen.
Wenn ich den <div> in ein <tr> einsperre gehts auch nicht, der braucht wohl zwingend noch die Spalten dazu.
Weiss jemand wie man das lösen kann?
Grüße Jürgen
Der Code der genau an diese Stelle des <div id="tab'.$tabrid.'" ></div>geladen werden soll
sieht so aus
echo '<tr>';
echo '<td>2</td>';
echo '<td>Item2</td>';
echo '<td>Item2</td>';
echo '<td>Item2</td>';
echo '<td>Item2</td>';
echo '<td>Item2</td>';
echo '<td>Item2</td>';
echo '<td>Item2</td>';
echo '<td>Item2</td>';
echo '</tr>';
n'Abend,
Fast funktioniert es schon nur die Formatierung hat er mir durcheinander
wer??
echo '<tbody><tr>';
echo '<td>1</td>'; echo '<td>Item1</td>'; echo '<td>Item1</td>'; echo '<td>Item1</td>'; echo '<td>Item1</td>'; echo '<td>Item1</td>'; echo '<td>'.Item1.'</td>'; echo '<td>'.Item1.'</td>'; echo '<td>'.Item1.'</td>'; echo '</tr>'; echo '<div id="tab'.$tabrid.'" class="tab-content"></div>'; echo '</tbody>'; echo '<tr><td colspan="8"><button class="small orange" onclick="addnewrow('.$testTypeId.','.$testTypeGroup.','.$tabrid.')"><i class="icon-plus-sign"></i> '._('add Week').'</button></td></tr>'; echo '</table>';
Hier erzeugst du ungültiges HTML. Ein div-Element kann nicht Kind von table oder tbody sein. Die browser-interne Fehlerkorrektur wird also dort, wo du das div-Element aufmachst, das table-Element beenden.
> Wenn ich die <div> reinschreibe da haut er es mir aus der Tabelle rauss
Wer zum Geier ist "er"?
> Wenn ich den <div> in ein <tr> einsperre gehts auch nicht
Nein, div kann auch nicht Kind von tr sein, da dürfen nur td oder th auftreten.
> Weiss jemand wie man das lösen kann?
Ich verstehe noch nicht, wozu du den div-Container brauchst.
Ciao,
Martin
--
Sozial ist, wenn andere bezahlen.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
Hallo Martin,
wenn ich von "er" schreibe so meine ich den Browser bzw. meinen Mist den ich im Code baute.
Ok das <div> nun kein Kind einer Tabelle sein darf habe ich begriffen.
Das ist nicht gut.
Wozu ich <div> brauche?
ich brauche <div> bzw. kenne ich keine andere Lösung als sogenannten Platzhalter.
ich lade genau an die Stelle des <div id="hiersolleshin"></div>
später einen html-code nach mit einer Anweisung einer javascript function
hier ein Ausschnitt
if (testTypeGroup != 0) {
var myWindow = window.open("", "MsgWindow", "width=200, height=100");
myWindow.document.write("<p>in create testTypeGroup = ok</p><p>das ist die tabrid :"+tabr);
xmlhttp.open("GET","pages/testSettings.php?gtid="+testTypeId+">g="+testTypeGroup+"&tid="+tabrid+"&ar=1",true);
xmlhttp.send();
}else{
var myWindow = window.open("", "MsgWindow", "width=200, height=100");
myWindow.document.write("<p>in create testseeting-id = ok</p>");
document.getElementById('hiersolleshin').innerHTML="";
return;
}
xmlhttp.open("GET","pages/testSettings.php?gtid="+testTypeId+">g="+testTypeGroup+"&tid="+tabrid+"&ar=1",true);
xmlhttp.send();
den code den ich mir in der testSettings.php hole habe ich oben schon gepostet.
der soll in die bereits existierende Tabelle geladen werden
also zwischen </table> und </table> und zwar nach der letzten Zeile
also in der Form
<table>
.<tr><td>...
.
.</td></tr>
<div id"hiersolleshin"></div> <!-- blöd das der div da halt nicht stehen darf-->
</table>
gibt es dafür eine andere Lösung?
Grüße Jürgen
Ciao,
Martin
Hakuna matata!
Wozu ich <div> brauche?
ich brauche <div> bzw. kenne ich keine andere Lösung als sogenannten Platzhalter.
Für Platzhalter gibt es das <template>-Element, das darf auch Kind eines <table>-Elements sein, in deinem Fall würde ich es aber vermutlich zu einem Kind von <tbody> machen.
Also zum Beispiel:
<table>
<tbody>
<!-- vorherige Zeilen -->
<template>
<tr><td></td></tr>
</template>
</tbody>
</table>
Das <template>-Element wird vom Internet-Explorer leider noch nicht unterstützt. Um Internet-Explorer-Nutzer trotzdem auf ihre Kosten zu bringen, könntest du zu einem Polyfill greifen.
Aloha ;)
Für Platzhalter gibt es das
<template>-Element
Kann mir nicht vorstellen, dass das der semantische Sinn des template-Elements ist. Sieht das W3C imho auch so.
<template> ist weniger Platzhalter als vielmehr Vorlage für das einfache Erschaffen neuer, ähnlicher Elemente...
Ich frage mich, in wiefern überhaupt ein Platzhalter nötig ist? JavaScript hat genug Möglichkeiten, einen Kindknoten an einer bestimmten Stelle in einem anderen Knoten zu platzieren, da brauchts keinen Platzhalter. (natürlich kann das neue Element durch <template>.content.cloneNode(true) entstanden sein). Das Parent-Element oder ein dem noch übergeordnetes Element kann ja über id referenziert sein.
Vorlagen (wie template) regeln das wie, Platzhalter das wo des Einfügens von neuem Content. Ein elementarer Unterschied.
Grüße,
RIDER
Hakuna matata!
<template> ist weniger Platzhalter als vielmehr Vorlage
Da stimme ich dir zu, Vorlage oder Schablone gefällt mir auch deutlich besser als Platzhalter.
Vorlagen (wie template) regeln das wie, Platzhalter das wo des Einfügens von neuem Content. Ein elementarer Unterschied.
Es macht häufig Sinn Vorlagen dort zu platzieren, wo sie später auch instanziiert werden. Wenn man das Schema konsequent verfolgt, dann kollabieren die Verantwortlichkeiten von Vorlage und Platzhalter praktisch. Das ist in vielen logic-less Templating-Engines zu beobachten und meiner bescheidenen Meinung nach auch sehr erstrebenswert. Nichtsdestoweniger ist es natürlich erforderlich ein präzises Vokabular zu verwenden, wenn wir über Templating sprechen, insofern vielen Dank für deinen Kommentar.
Hallo U-Power und Rider,
da das Ganze eh eine Lokale Anwendung wird ist es mir nicht so wichtig das ich die Regeln nach irgendwelchen Standards einhalten muss.
Beide Ansätze interessieren mich jedoch sehr sowohl der Javascript als auch die Template-Lösung.
Auf meinen unformatierten Testseiten hier als ich nur meine Datenbank und Ajax-Schnipsel getestet habe um einen Code nachzuladen den ich an einen Stelle mit einer <div id....> plazieren konnte war das ganz ok.
Jetzt aber wo ich auf das Design achten muss muss ich eben aufpassen das es auch sauber dargestellt wird.
Gibt es dafür Beispiele für Eure Vorschläge?
Wie damals als ,man mir das mit Ajax empfohlen hatte konnte ich das nur anhand eines Beispiel nachvollziehen und umsetzen was bis dato sehr gut klappte.
Ich bräuchte also so einen Dummie-Beispiel-Code damit ich sehe mit was für mich einfacher ist.
Ich muss ja nicht nur eine Zeile in der Tabelle nachladen sondern ich muss natürlich auch den Add-Button (also seine onclick Anweisung) der auf der Seite ist jedesmal mit einem neuen Wert füttern, da ja nicht nur eine Zeile nachgeladen werden soll sondern auch andere Aktionen ausgeführt werden müssen wie Speichern der vorangegangenen Zeile und vorheriges Prüfen der Eingaben dieser usw.
wäre super wenn ihr hier was für mich hättet , z.B. Link zu einem Beispiel
oder Beispiel-Code
Grüße Jürgen
Hallo Jürgen,
wenn du mit einer einfachen und evtl. auch wenig performanten Lösung zufrieden bist, kannst du das innerHTML der Tabelle mit += erweitern:
document.getElementById("ID des tbody").innerHTML += nachgeladenesHTML;
Gruß, Jürgen
Aloha ;)
wenn du mit einer einfachen und evtl. auch wenig performanten Lösung zufrieden bist, kannst du das innerHTML der Tabelle mit += erweitern:
document.getElementById("ID des tbody").innerHTML += nachgeladenesHTML;
Solange du ausschließlich hinten was anfügen willst ist das wohl das einfachste, stimmt xD
Ich hatte es so verstanden, dass du eine flexiblere Lösung brauchst^^
Grüße,
RIDER
Hallo Rider,
document.getElementById("ID des tbody").innerHTML += nachgeladenesHTML;
Solange du ausschließlich hinten was anfügen willst ist das wohl das einfachste, stimmt xD
Ich hatte es so verstanden, dass du eine flexiblere Lösung brauchst^^
das einzige was bei mir flexibel sein müsste sind die Buttons die ich erstelle...
bzw. die Werte die dann der Button bei onclick übergibt (da Jede Zeile für 1 Woche steht muss ich dem also mitteilen das es nun die n Woche ist). Aber das bekomme ich hin.
Zum getElementById .
Ich bin da ganz frisch bei dem Thema und muss etwas Dummie-mässig fragen sorry.
da ich diese funktion mit einem onclick="addnewrow('werte die ich übergebe') aufrufe
müsste ja dann die
document.getElementById("ID des tbody").innerHTML += nachgeladenesHTML;
irgendwo in die Funktion mit eingebaut werden
und die ID des <tbody> ich bräuchte ja eine ID die in die letzte Zeile setze also
in ein <p> oder <tr> element oder?
function addnewrow(testTypeId, testTypeGroup, tabrid, test) {
var tabr = "tab"+tabrid;
var myWindows = window.open("", "MsgWindow", "width=200, height=100");
myWindows.document.write("<p>in create testwindows 123</p>");
if (testTypeId== undefined) {
var myWindow = window.open("", "MsgWindow", "width=200, height=100");
myWindow.document.write("<p>in create testwTypeId = undefined</p>");
document.getElementById(tabr).innerHTML="";
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById(tabr).innerHTML=xmlhttp.responseText;
}
}
if (growTypeGroup != 0) {
var myWindow = window.open("", "MsgWindow", "width=200, height=100");
myWindow.document.write("<p>in create testTypeGroup = ok</p><p>das ist die tabrid :"+tabr+"</p>das ist testtypid:"+testTypeId+"</p><p>das ist testgroupid:"+testTypeGroup+"</p><p>das ist test-id:"+test+"</p>");
xmlhttp.open("GET","pages/testSettings.php?gtid="+testTypeId+">g="+testTypeGroup+"&tid="+tabrid+"&ar=1"+"&test="+test,true);
xmlhttp.send();
}else{
var myWindow = window.open("", "MsgWindow", "width=200, height=100");
myWindow.document.write("<p>in create testseeting-id = ok</p>");
document.getElementById(tabr).innerHTML="";
return;
}
xmlhttp.open("GET","pages/testSettings.php?gtid="+testTypeId+">g="+testTypeGroup+"&tid="+tabrid+"&ar=1"+"&test="+test,true);
xmlhttp.send();
}
Grüße Jürgen
Aloha ;)
Zum getElementById .
Ich bin da ganz frisch bei dem Thema und muss etwas Dummie-mässig fragen sorry.
da ich diese funktion mit einem onclick="addnewrow('werte die ich übergebe') aufrufemüsste ja dann die
document.getElementById("ID des tbody").innerHTML += nachgeladenesHTML;
irgendwo in die Funktion mit eingebaut werdenund die ID des <tbody> ich bräuchte ja eine ID die in die letzte Zeile setze also
in ein <p> oder <tr> element oder?
Es geht auch ganz elegant über das angeklickte Element selbst. Dazu übergibst du in deiner onclick-Funktion einen Parameter mit this und kannst dann per while-Schleife sowohl table als auch tbody in JS bekommen - ganz ohne ID. Die ID brauchst du nur dann fast zwingend, wenn die buttons außerhalb und in einiger Entfernung zur Tabelle stehen ;) Schau dir dazu mein gepostetes Beispiel an.
Falls du's über id der table machen willst und das tbody brauchst, kannst du auch so vorgehen: entweder oldschool...
document.getElementById('table-id').getElementsByTagName('tbody')[0].innerHTML += ...
oder modern (trotz des Namens der Funktion ist das natives JavaScript ohne jQuery... Quasi die Antwort des Sprachstandards auf jQuery):
document.querySelector('#table-id tbody').innerHTML += ...
Grüße,
RIDER
Hallo Rider
das begreife ich noch nicht ganz
wieso tbody oder table ?
ich habe doch ein Formular was mit einer tabelle in der Form gestaltet ist
<table>
<tbody
<tr><td></td></tr>
< hier soll dann die neue Zeile hin>
</tbody
</table>
wieso soll ich nun eine table id oder tbody ansprechen
das begreife ich leider nicht.
dann habe ich ja schon in meiner o.g. function
document.getElementById(tabr).innerHTML=xmlhttp.responseText;
mit "xmlhttp.responseText;" bekomme ich ja meinen html-code aus der testSettings.php seite (die mir den Code generiert)
über das
document.getElementById(tabr).innerHTML
habe/versuchte ich diesen code dann zur id "tabr" zu senden
das würde
document.querySelector('#table-id tbody-id').innerHTML += ...
ich gerne machen aber "#table-id tbody" begreife ich nicht..
wenn ich der <table id="table-id"> oder dem <tbody id="tbody-id"> dann wird mir ja der code irgendwohin geschoben oder?
oder weiss der dann automatisch das er es ans Ende des tbody's schieben muss?
Grüße Jürgen
Falls du's über id der table machen willst und das tbody brauchst, kannst du auch so vorgehen: entweder oldschool...
document.getElementById('table-id').getElementsByTagName('tbody')[0].innerHTML += ...oder modern (trotz des Namens der Funktion ist das natives JavaScript ohne jQuery... Quasi die Antwort des Sprachstandards auf jQuery):
document.querySelector('#table-id tbody').innerHTML += ...Grüße,
RIDER
Aloha ;)
das würde
document.querySelector('#table-id tbody-id').innerHTML += ...
ich gerne machen aber "#table-id tbody" begreife ich nicht..
Diese Funktion selektiert Elemente (lies: hier ein Element, mehrere mit querySelectorAll) per CSS-Selektor.
wenn ich der <table id="table-id"> oder dem <tbody id="tbody-id"> dann wird mir ja der code irgendwohin geschoben oder?
oder weiss der dann automatisch das er es ans Ende des tbody's schieben muss?
Wissen tut ers sicher nicht, machen aber trotzdem :D du machst innerHTML += ..., d.h. du hängst an das innerHTML (der HTML-Code innerhalb tbody) weiteren Code an. Natürlich ist er dann am Ende. Am Anfang wärs beispielsweise mit innerHTML = ... + innerHTML. Und irgendwo in der Mitte was einzufügen ist so fast unmöglich / mit unverhältnismäßig großem Aufwand verbunden.
Grüße,
RIDER
Aloha ;)
das würde
document.querySelector('#table-id tbody-id').innerHTML += ...
ich gerne machen aber "#table-id tbody" begreife ich nicht..Diese Funktion selektiert Elemente (lies: hier ein Element, mehrere mit querySelectorAll) per CSS-Selektor.
Hallo
ok, nochmals bitte für Voll-Dummies wie mich.
dann könnte ich auch einfach meinen Code aus der function getnewrow()
document.getElementById(tabr).innerHTML=xmlhttp.responseText;
mit
document.querySelector(tabr).innerHTML +=xmlhttp.responseText;
austauschen
und statt der <div id=tabr></div> die am ende der letzten zeile in der tabelle steht also vor dem ende des tbodys
schreibe ich es so um
<table>
<tbody id=tabr>
<tr><td>das ist die erste Zeile</td></tr>
</tbody>
</table>
<tr><td>< hier ist der add-newrow-button onclick=addnewrow() ></td></tr>
somit wird mir dann
den code wie folgt erweiteren
<table>
<tbody id=tabr>
<tr><td>das ist die erste Zeile</td></tr>
<tr><td>hier ist also die neue Zeile</td></tr>
</tbody>
</table>
<tr><td>< hier ist der add-newrow-button onclick=addnewrow() ></td></tr>
grrrr sorry das ich so nerve..
Grüße Jürgen
Aloha ;)
ok, nochmals bitte für Voll-Dummies wie mich.
dann könnte ich auch einfach meinen Code aus der function getnewrow()
document.getElementById(tabr).innerHTML=xmlhttp.responseText;
mit
document.querySelector(tabr).innerHTML +=xmlhttp.responseText;
> austauschen
Ja, stimmt so. Fast. In CSS wird ein ID-Selektor mit # eingeleitet, also eher:
~~~javascript
document.querySelector('#'+tabr).innerHTML +=xmlhttp.responseText;
Wobei es da wirklich egal ist (da du einen Befehl gegen einen gleichwertigen tauschst). Interessant ist querySelector vor allem da, wo mehrere Selektoren kombiniert vorkommen - denn dann spart man sich schnell etliche Zeichen, wenn nicht Zeilen. Oldschool und modern sagte ich in Bezug darauf, dass es die Methode querySelector noch gar nicht so lange gibt.
Und ganz allgemein gilt: Never change a running system...
und statt der <div id=tabr></div> die am ende der letzten zeile in der tabelle steht also vor dem ende des tbodys
schreibe ich es so um
<table>
<tbody id=tabr>
<tr><td>das ist die erste Zeile</td></tr>
</tbody>
</table>
<tr><td>< hier ist der add-newrow-button onclick=addnewrow() ></td></tr>
Moment, egal was du gerade tun willst - das ist schmu. Du hast hier eine tr mitten in der Pampa (lies: auserhalb einer Tabelle). Das muss dann, wenn schon, z.B. ein <p> (statt tr, td) o.ä. sein.
Aber...
> somit wird mir dann
> den code wie folgt erweiteren
> ~~~html
<table>
> <tbody id=tabr>
> <tr><td>das ist die erste Zeile</td></tr>
> <tr><td>hier ist also die neue Zeile</td></tr>
> </tbody>
> </table>
> <tr><td>< hier ist der add-newrow-button onclick=addnewrow() ></td></tr>
>
...ja, schätze die prinzipielle Funktionsweise hast du verstanden ;)
Rein semantisch ist es auch besser, den Button draußen stehen zu haben. Welchen Sinn sollte es auch haben, dass der eine neue Zeile einfügende Button selbst in einer Zeile im tbody steht.
Anregung: Eventuell in den tfoot damit? Schließlich gehören Button und Tabelle inhaltlich zusammen, im tbody hat der button nichts zu suchen, weil er nicht als tabellarischer Datensatz interpretiert werden kann (hättest du für jede Zeile einen zeilenbezogenen Button wäre das was anderes). Steuerelemente für die Gesamttabelle haben imho im tfoot oder thead dann aber dennoch eine Daseinsberechtigung. Also dann etwa so:
<table>
<tbody id=tabr>
<tr><td>das ist die erste Zeile</td></tr>
<tr><td>hier ist also die neue Zeile</td></tr>
</tbody>
<tfoot>
<tr><td>< hier ist der add-newrow-button onclick=addnewrow() ></td></tr>
</tfoot>
</table>
Grüße,
RIDER
ich hatte das mit dem id-selektor wirklich überlesen
phooo das ist mir jetzt echt peinlich...
ich werde es gleich probieren und dann bescheid geben muss mich jedoch erstmal von meiner Blindheit erholen
Grüße Jürgen
ooooh ich bin sooooo glücklich.
es geeeeht danke an Eure Geduld
Grüßle vom glücklichen Jürgen
und das sieht soooo geil aus
Aloha ;)
Kein Problem, gerne wieder ;) Du siehst: Mit etwas geistigem Abstand bringt man dann doch letztendlich mehr zu Stande.
Ne kleine Pause wirkt eben manchmal wie eine nahrhafte Null :D
Grüße,
RIDER
Hallo,
das nachladen der Zeilen etc. funktioniert jetzt einwandfrei.
Jetzt taucht nur ein weiteres Problem auf:(
Wenn ich Werte in der ersten Zeile eingegeben habe, werden diese sofort mit getelementsbyid ausgelesen.
im nächsten Step werden ja alle Daten mit Ajax zum Server gesendet, in die DB eingetragen und ein neuer html-code generiert der am Ende des Bodys dann wieder angehängt wird.
Bums, jetzt sind die Felder leer die ich zuvor eingetragen hatte.
Ich vermute da wir ja nun im <tbody id"stehtjahier"> haben liest er alles aus dem tbody, und setzt das ja wieder zusammen mit dem was er vom Server bekommt.....
Mmmhhhh das ist nicht so gut.
Kann man es nicht so machen das er tatsächlich alles in Ruhe lässt was bereits beim Client ist und nur Zweile für Zeile nachschiebt?
ich weiss schon, ich hatte das Problem mit der ID und das diese nicht als div in einer Tabelle stehen darf etc.
Gibts keine andere Lösung?
meine Idee die evtl funktionieren könnte:
Ich arbeite ja mit dem htmlkickstarter css-framework
dort habe ich Klassen wie "grid " mit der ich eine Art Tabelle darstellen könnte
Die benutze ich auch.
Nur wird aktuell in jede Regsiterkarte je nach Auswahl eine Tabell reingeladen
Wenn ich nun statt dieser Tabelle dort auch mit <div> arbeiten würde ginge das?
<div class="grid.flex">
<ul class="tabs left">
<li><a href="#tabr1">Tab1</a></li>
<li><a href="#tabr2">Tab2</a></li>
<li><a href="#tabr3">Tab3</a></li>
</ul>
<div id="tabr1" class="tab-content">Tab1</div>
<!--Beispiel -->
<tr><td>inputeingabefeld-11</td><td>inputeingabefeld-11</td></tr>
<div id="hiersolldieZweitezeilehin"></div>
<tr><td>inputeingabefeld-12</td><td>inputeingabefeld-22</td></tr>
<div id="hiersolldieDRITTEzeilehin"></div>
usw.
<div id="tabr2" class="tab-content">Tab2</div>
<!--oder anderes Beispiel -->
<div class="grid flex">
<div class="col_2"><input type="text" id="blabla" name="soundso"/></div>
<div class="col_2"><input type="text" id="blabla" name="soundso"/></div>
usw.
</div>
<div id="hiersolldieVIERTEzeilehin"></div>
<div id="tabr3" class="tab-content">Tab3</div>
<div>
der css code sieht bei der htmlkickstarte css so aus da wird alles vordefiniert also was col_2, col_3 und auch die grid's bewirken
.grid{
max-width:1220px;
margin:0 auto;
padding:0 2em;
}
.grid.flex{
width:100%;
max-width:100%;
padding:0 2%;
padding:2em;
}
usw....
*[class*="col_"].alpha{margin-left:0;}
*[class*="col_"].omega{margin-right:0;}
.col_1 { width: 6.6666666666667%; }
.col_2 { width: 15%; }
.col_3 { width: 23.333333333333%; }
usw...
so könnte ich evtl. das Problem mit dem <div> als Kindelement einer Tabelle umgehen oder?
Wenn nicht, wie mache ich das nun das wieder meine ersten Zeilen gefüllt werden?
Dann ist noch ein Problemchen
Ich habe nach der </table> einen Button. das ist der addnewrow button.
den habe ich nach der tabelle gesetzt damit er immer dort bleibt da ich für jede Zeile eine Eindeutigkeit der Eingabefelder benötige zähle ich diese intern vor jedem Laden einer Zeile hoch und hänge die zahlen an die id="name-1" und name="name-1" an. Das passiert in meinem testSettings.php was durch ajax aufgerufen wird.
Das problem ist jedoch, ich muss beim Button addnewrow einen Wert ändern und aktuell bleibt er statisch.
könnte ich das auch mit dem zuvor von Euch beschrieben Beispiel machen, dass ich den Button auch in eine <div></div> setze, diesen über javascript komplett lösche und neu einsetze ?
Sorry für den ganzen Text, aber jetzt wo es eigentlich so läuft habe ich die Probleme erst erkannt die sich daraus ergeben nun versuche ich es so zu machen das es dann auch passt :(
Grüße Jürgen
Aloha ;)
Mal unabhängig von allem anderen...
<div class="grid.flex">
<ul class="tabs left">
<li><a href="#tabr1">Tab1</a></li>
<li><a href="#tabr2">Tab2</a></li>
<li><a href="#tabr3">Tab3</a></li>
</ul><div id="tabr1" class="tab-content">Tab1</div>
<!--Beispiel -->
<tr><td>inputeingabefeld-11</td><td>inputeingabefeld-11</td></tr>
<div id="hiersolldieZweitezeilehin"></div>
<tr><td>inputeingabefeld-12</td><td>inputeingabefeld-22</td></tr>
<div id="hiersolldieDRITTEzeilehin"></div>
usw.
<div id="tabr2" class="tab-content">Tab2</div>
<!--oder anderes Beispiel -->
<div class="grid flex">
<div class="col_2"><input type="text" id="blabla" name="soundso"/></div>
<div class="col_2"><input type="text" id="blabla" name="soundso"/></div>
usw.
</div>
<div id="hiersolldieVIERTEzeilehin"></div>
<div id="tabr3" class="tab-content">Tab3</div><div>
Why the hack hast du hier schon wieder <tr>s mitten in der Weltgeschichte rumeiern? Wenn du mir schon nicht glaubst, dass das Schmu ist ([so waren meine Worte](https://forum.selfhtml.org/?t=218997&m=1510414)), dann schau ins [Wiki](http://wiki.selfhtml.org/wiki/Referenz:HTML/tr). Übrigens eine unbedingte Empfehlung: Bevor du irgendein Nonsens-Markup produzierst vergegenwärtige dir doch nochmal, welche Elemente welche Kind- bzw. Elternelemente haben dürfen. Und keine Sorge - du musst das nicht mal auswendig lernen. In den allermeisten Fällen erschließt sich das logisch durch kurzes Nachdenken ;)
> so könnte ich evtl. das Problem mit dem <div> als Kindelement einer Tabelle umgehen oder?
Wie gesagt, bring erstmal den groben Unfug in Ordnung ;) Und dann tief Luft holen und versuchen, das Problem auf elementarer Ebene anzupacken ;)
> Das problem ist jedoch, ich muss beim Button addnewrow einen Wert ändern und aktuell bleibt er statisch.
chrm-chrm... definiere "einen Wert"? Welchen Wert? Was steht vorher drin, was soll nachher drin stehen? ...
> könnte ich das auch mit dem zuvor von Euch beschrieben Beispiel machen, dass ich den Button auch in eine <div></div> setze, diesen über javascript komplett lösche und neu einsetze ?
Das kann ich dir nicht sagen, weil ich den Sinn hinter der Geschichte nicht kenne. Ich weiß auch nicht, was die Beschaffenheit des Elternelements des Buttons mit der Möglichkeit zu tun hat, diesen über JavaScript zu <http://de.selfhtml.org/javascript/objekte/node.htm#replace_child@title=ersetzen>...
> Sorry für den ganzen Text, aber jetzt wo es eigentlich so läuft habe ich die Probleme erst erkannt die sich daraus ergeben
Tja, da bist du weiter als ich. Ich sehe deine Probleme noch nicht klar.
Vielleicht hilft ein [Grundlagen](http://wiki.selfhtml.org/wiki/Referenz:HTML)-<http://de.selfhtml.org/javascript/objekte/index.htm@title=studium>?
Grüße,
RIDER
--
Camping\_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
Hallo,
das mit den <tr>'s hatte ich mich verschrieben
Klar da dürfen keine <tr> od <td> stehen
hast Du einen Link wo das mit den Kindelementen steht
da ich nun die regsiterkarten bzw. die Elemente die darin auftauchen sollen nur mit <div> aufbauen will denke ich es sollte so funktionieren oder?
also alles mit <div>
da ich die htmlkickstarter css nehme ist dort so was ich mittlerweile gesehen habe alles vorhanden um eine ART Tabelle nur mit <div> Anweisungen aufzubauen.
Da ich dann den Button "addnewrow" der ja immer ans Ende rutschen soll eindeutig mit seiner ID ansprechen kann sollte ich diesen auch nun über Javascript löschen können
Grüße Jürgen
Aloha ;)
Prinzipiell ja. Die Wahl des einen oder anderen gruppierenden Element hat keinen Einfluss auf das Funktionieren einer Mechanik.
Was semantisch und damit fachlich richtiger ist, hängt von den konkreten Inhalten ab. Darüber kann ich keine Aussage treffen.
Zum Thema erlaubte Kindelemente: Ich hatte dir im vorhergehenden Beitrag schon den Link zur HTML-Referenz mitgegeben.
Grüße,
RIDER
Om nah hoo pez nyeetz, Camping_RIDER!
Ne kleine Pause wirkt eben manchmal wie eine nahrhafte Null :D
wahrscheinlich sollte man besser von einer aktiven Null sprechen.
Matthias
wow,
danke... dieser code funktioniert einwandfrei
</head>
<body>
<table>
<tbody id="beispiel">
<tr><td>teststststs nach dieser zeile soll es hin</td></tr>
</table>
<p>klicken Sie auf den Button, um den ersten Absatz mit der id="beispiel" zu ändern.</p>
<button onclick="Aendern()">Los!</button>
<script>
function Aendern() {
document.querySelector('#beispiel').innerHTML += "<tr><td>das ist die neue zeile</td></tr>";
}
</script>
</body>
</html>
nur in meinem script noch nicht... muss gucken woran es liegt..
in die function geht er... aber irgendwie kommt er nun im testSettings.php nicht an
Grüße Jürgen
Aloha ;)
</head>
<body>
<table>
<tbody id="beispiel">
<tr><td>teststststs nach dieser zeile soll es hin</td></tr>
Autschn - da fehlt was. </tbody>
</table>
nur in meinem script noch nicht... muss gucken woran es liegt..
Schaust halt mal, wir helfen dann gerne weiter. ;)
Falls du das nicht kennst: nutze die JavaScript-Konsole in den Entwicklertools des Browsers deiner Wahl. Da werden auch die AJAXe angezeigt...
Grüße,
RIDER
Es ist zum junge Hunde kriegen...
also das Beispiel geht wie gesagt einwandfrei.
Wenn ich es in meinen Code einbaue, geht gar nix.
Ich habe mitterweile in den relevanten Passagen in der function getnewrow()
Ausgabefenster eingebaut um zu sehen wo er ist...
er läuft also alles sauber ab nur findet die
document.querySelector(tabr).innerHTML +=xmlhttp.responseText;
wohl die tabr nicht (zuvor mit der getelemtsbyid hat sie es gefunden!!)
in den alertfenstern sehe ich auch das die Werte von der onclick übertragen wird und in der function auch entgegengenommen wurde
im Browser habe ich in der javascript-konsole diese Meldungen (mein css... da stimmt was mit dem pfad nicht sollte aber so hoffe nichts machen)
handler: function (e){return typeof b===i||e&&b.event.triggered===
e.type?t:b.event.dispatch.apply(f.elem,arguments)}
isAttribute: false
lineNumber: 3
listenerBody: "function (e){return typeof b===i||e&&b.event.triggered===e.type?t:b.event.dispatch.apply(f.elem,arguments)}"
node: document
sourceName: "https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"
type: "click"
useCapture: false
dann bekomme ich noch diese Meldungen
GET http://192.168.2.102/css/css/img/gray_jean.png 404 (Not Found)jquery.min.js:3 (anonymous function)jquery.min.js:3 cjquery.min.js:3 p.fireWithjquery.min.js:3 b.extend.readyjquery.min.js:3 H
index.php?id=1:96 Uncaught TypeError: Cannot read property 'innerHTML' of null
Ich habe auch rechts im Browser dieses
Ich muss das nochmals etwas schildern... ich glaube es liegt evtl. an was anderm
ich arbeite ja hier mit regsiterkarten in dieser Form
<ul class="tabs left">
<li><a href="#tabr1" onclick="getnewrow('tabr1', 'id1', 'sid2','erstezeieloderfolgezeile')">Tab1</a></li>
<li><a href="#tabr2" onclick=" auch wie die anderen">Tab2</a></li>
<li><a href="#tabr3" onclick=" auch wie die anderen">Tab3</a></li>
</ul>
<div id="tabr1" class="tab-content">Tab1</div>
<div id="tabr2" class="tab-content">Tab2</div>
<div id="tabr3" class="tab-content">Tab3</div>
wenn ich jetzt auf die Regsiterkarte klicke, dann weiss die Funktion , aha, ich muss erstmal die Tabelle rüber schicken, also dann wird erst
<table>
<tbody id="tbodyid-1">
<tr><td></td></tr>
</tbody>
</table>
<tr><td>< hier wird ein add-new-row-button gesendet der auch wieder eine onclick hat></td></tr>
ich habe also ganz am Anfang ein <div></div>
das wird mit einer Tabelle gefüllt..
dann erhält diese Tabelle bzw. im Anschluss an die tabelle einen weiteren Button
an diesem klickt man hinzufügen
und dann fügt man Zeile für Zeile für Zeile hinzu
usw. usw
gesendet.
aktuell scheitert er jedoch schon beim ersten Aufruf... er füllt also den <div></div> erst gar nicht
wenn allerdings der
document.querySelector(tabr).innerHTML +=
nicht mit <div> arbeiten kann dann müsste ich meine function umschreiben und abfragen ob es der Tabellenaufbau, oder das Anhängen einer Zeile ist
Mist... ich hoffe ich steige noch durch :(
Grüße Jürgen
Hakuna matata!
document.querySelector(tabr).innerHTML +=xmlhttp.responseText;
wohl die tabr nicht (zuvor mit der getelemtsbyid hat sie es gefunden!!)
Die Antwort aud dieses Problem hat Camping_RIDER dir bereits hier gegeben.
Aloha ;)
In Ergänzung zu 1UnitedPower's Anmerkung...
Es ist zum junge Hunde kriegen...
Machs doch einfach, wie wenn du wirklich junge Hunde kriegen würdest: Tief durchatmen.
Du siehst den Wald vor lauter Bäumen nicht mehr, weil du vom einen Konzept ins Andere hüpfst. Les dir doch erstmal in aller Ruhe alle Antworten hier durch und frag dich jedesmal, ob du das Konzept, das dir jene Antwort erklären will, tatsächlich in seiner Tiefe verstanden hast. Wenn nicht, dann frag nach. Wir sind gerne bereit dir zu helfen, es bringt aber niemandem was, wenn du dich hier überschlägst.
Genauso wenig bringt es uns, hier mit Codefragmenten zugekleistert zu werden, deren Fehler wir teils schon identifiziert haben. Auch wenn Codefragmente wichtig und richtig sind, sollten sie auf das wichtigste eingegrenzt sein. Wenn das nicht geht, weil das Problem zu komplex gelagert ist, bringt eine Verlinkung des live-Beispiels viel mehr als ein Haufen unübersichtlicher Codefragmente...
Nebenbei: Hast du eigentlich meinen Rat beherzigt und dich mal mit den Browser-eigenen Entwicklerwerkzeugen befasst? Wenn ja - dann ist ja alles okay. Wenn nein - du wärst nicht der Erste, der zunächst dachte "sowas brauch ich nicht, das ist viel zu kompliziert" und sich danach in den Hintern gebissen hat, weils ja "so total einfach geht".
Grüße,
RIDER
ich brauch mindestens eine ganze Horde von Hebammen, die hauen nach einiger Zeit bei mir entnervt wie ab...
ok
ich habe jetzt statt google-chrome den firefox und seine konsle
ich bekomme diese Meldung
TypeError: document.querySelector(...) is null index.php:96
wieso ist der null?
ok ich arbeite mich nochmals durch die ganzen Antworten durch...
ich bin hier wirklich fast am verzweifeln
Grüße Jürgen
Aloha ;)
ich brauch mindestens eine ganze Horde von Hebammen, die hauen nach einiger Zeit bei mir entnervt wie ab...
Das ist hier das geringere Problem, wir sind durchhaltefähig ;)
TypeError: document.querySelector(...) is null index.php:96
wieso ist der null?
Schätzungsweise, weil ein Element, das auf den Selektor ... passt, nicht gefunden wurde. Was steht denn in ...?
ich bin hier wirklich fast am verzweifeln
Dann mach ne Pause und trink nen T.
Grüße,
RIDER
Aloha ;)
wäre super wenn ihr hier was für mich hättet , z.B. Link zu einem Beispiel
oder Beispiel-Code
Kriegst hiermit von mir was Selbsgebasteltes - nachträglich zum 3. Advent :D
Ich hab die Anregung von 1UnitedPower, das <template> zu benutzen, mit eingearbeitet. Allerdings ohne die Eigenschaft als Platzhalter (das wäre zwar möglich gewesen, dem funktionalen Design meines Beispiels allerdings nicht angemessen). Man sieht daran evtl. auch den grundsätzlichen Sinn hinter der Existenz eines <template> - es wäre auch ohne gegangen, dann hätte ich aber einige Anweisungen mehr im JS notieren müssen (3x createElement, 4x appendChild, 2x createTextNode = 9 Anweisungen).
Grüße,
RIDER
Hallo unknown,
http://forum.jswelt.de/javascript/60429-javascript-ajax-zeilen-tabelle-nachladen.html#post389351
und die Antworten dann einfach ignoriert :(. Helfen kann schon frustrierend sein.
Gruß, Jürgen
Aloha ;)
:D und ich Vollhorst bau noch n Codebeispiel :D
Grüße,
RIDER
Hallo Camping_RIDER,
:D und ich Vollhorst bau noch n Codebeispiel :D
wobei deine Geduld schon beeindruckend war. Ich glaube, du wirst ein guter Lehrer. Und das bisschen Mathe und Physik ist gar nicht so schwer :).
Gruß, Jürgen
Aloha ;)
Danke - das Kompliment weiß ich zu schätzen ;)
Grüße,
RIDER
Om nah hoo pez nyeetz, JürgenB!
wobei deine Geduld schon beeindruckend war. Ich glaube, du wirst ein guter Lehrer. Und das bisschen Mathe und Physik ist gar nicht so schwer :).
+1
Matthias