Javascript und Ajax Zeilen in Tabelle nachladen

selfmade01 · 17. Dez. 2014

Hallo

ich habe eine Seite mit Registerkarten.
Beim klick auf eine registerkarte wird eine ajax-fuktion aufgerufen die mir in diese regsietrkarte eine Tabelle mit einem Sende-button (funktion des Buttons beschreibe ich dann)
versehen ist.

Die blanken regsiterkarten hatte ich zuvor mit einer <div id="dasolldietabellehin"></div>
ausgestattet.
Das erste Laden funktioniert.

In diese regsiterkarte kommt nun eine Tabelle
diese beinhaltet ein Formular mit einer ZEILE von Eingabefeldern.

Dann kommt der Sende-Button der eigentlich ein Add-neue-Eingabezeile-Button ist.

Dieser ruft wieder eine Ajax-Funktion auf die dann über eine untergeordnete PHP-Seite einen weiteren html-code generiert
"<tr><td>hier kommen meine input felder</td></tr>"

dieser html-code muss nun in die tabelle eingefügt werden.

nur wie ?
ein <div id=> element darf ich ich ja nicht innerhalb einer Tabelle setzen.
mit einem <p id=> klappt es auch irgendwie nicht so recht.

Nach Recherche müsste ich wohl so was wie jquery mit meiner ajax-funktion und dem javascribt onclick (den ich bei dem button oder bei der registerkarte verwende)

Bin Newbie und würde mich über Hilfen freuen

danke
Grüße Jürgen

tsseh · 17. Dez. 2014

selfmade01 schrieb:
ein <div id=> element darf ich ich ja nicht innerhalb einer Tabelle setzen.
mit einem <p id=> klappt es auch irgendwie nicht so recht.

dein problem ist die tabelle zu finden?
https://developer.mozilla.org/en-US/docs/Web/API/document.querySelector
Selectors | jQuery API Documentation
oder etwas an die tabelle zu hängen?
keine ahnung ob https://developer.mozilla.org/en-US/docs/Web/API/Element.innerHTML im ie für tabellen noch readonly ist, aber mit jquery sollte das funktionieren
.append() | jQuery API Documentation

selfmade01 · 17. Dez. 2014

hesst schrieb:
dein problem ist die tabelle zu finden?

oder etwas an die tabelle zu hängen?
keine ahnung ob https://developer.mozilla.org/en-US/docs/Web/API/Element.innerHTML im ie für tabellen noch readonly ist, aber mit jquery sollte das funktionieren
.append() | jQuery API Documentation

Nein, die Tabelle bzw. die dortige ID findet er, ich kann das nur nicht so machen

<table>
<tr><td>erste eigebezeile mit formularfelder</td></tr>
<div id="hiersolldienächstezeilehin></div
</table>
< hier ist der "add-neue-zeile-button" onclick="addnewrow('werte für die neue Zeile')>

das Problem ist der <div> tag da wird die tabelle dann nicht mehr sauber dargestellt
ich brauche also an der stelle was anderes

wenn das mit jquery geht.. super ... nur wie... ich bin leider noch voller Dummie und würde mich über ein kleines Beispiel freuen.

hier ist der code der addnewrow funktion
in dieser Funktion wird eine testSettings.php aufgerufen in der der Code generiert wird der dann an die Stelle in der Tabelle mit der id geschoben werden muss

Code:

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+"&gtg="+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+"&gtg="+testTypeGroup+"&tid="+tabrid+"&ar=1"+"&test="+test,true);
          xmlhttp.send();
}

grüße Jürgen

tsseh · 17. Dez. 2014

selfmade01 schrieb:
Nein, die Tabelle bzw. die dortige ID findet er, ich kann das nur nicht so machen

<table>
<tr><td>erste eigebezeile mit formularfelder</td></tr>
<div id="hiersolldienächstezeilehin></div
</table>
< hier ist der "add-neue-zeile-button" onclick="addnewrow('werte für die neue Zeile')>

das Problem ist der <div> tag da wird die tabelle dann nicht mehr sauber dargestellt
ich brauche also an der stelle was anderes

ja, du kannst kein div in eine tabelle einfügen. dazu musst du das div erst in eine spalte+zeile stecken.
also machst du tbody.innerHTML += "<tr><td>" + deineXMLHttpRequestResponse + "</td></tr>";
bzw mit JQuery, wenn das im ie noch nicht geht/für alte auch gehen soll

selfmade01 · 17. Dez. 2014

hesst schrieb:
ja, du kannst kein div in eine tabelle einfügen. dazu musst du das div erst in eine spalte+zeile stecken.
also machst du tbody.innerHTML += "<tr><td>" + deineXMLHttpRequestResponse + "</td></tr>";
bzw mit JQuery, wenn das im ie noch nicht geht/für alte auch gehen soll

Sorry das ich so doof Frage aber wie meinst Du das

das ich nun in meinem
<tbody id="dasolleshin">

schreibe habe ich begriffen, hoffe ich

wo muss ich den inner.HTML setzen und wie

ich hätte das jetzt so ausgetauscht oben in der Funktion

Code:

 //document.getElementById(dasolleshin).innerHTML=xmlhttp.responseText; // 
			  document.querySelector(dasolleshin).innerHTML +=xmlhttp.responseText; //

die anderen zeilen in der Funktion in der der code
steht hätte ich dann auch mit

Code:

document.getElementById(dasolleshin).innerHTML="";
 document.querySelector(dasolleshin).innerHTML +="";

ausgetauscht

stimmt das?

tsseh · 17. Dez. 2014

selfmade01 schrieb:
Sorry das ich so doof Frage aber wie meinst Du das

wie mein ich was? ich meinte, wenn du keine response wie im 1. beitrag beschrieben bekommst, mit TR und TD tag, dann musst du dir diese eben um deine response drumrum basteln.
also aus der response var response = "<div>...</div>"; machst du mit response = "<tr><td>" + response + "</td></tr>"; einen string "<tr><td><div>...</div></td></tr>". den kannst du ans ende deiner tabelle hängen

selfmade01 schrieb:
das ich nun in meinem
<tbody id="dasolleshin">
schreibe habe ich begriffen, hoffe ich

du musst dem tbody keine id geben, dann könntest du auch gleich mit getElementById darauf zugreifen. du hast das ganze doch im div
<div id="dasolldietabellehin"></div> über querySelektor suchst du jetzt einfach das TBODY-Element im TABLE-Element im DIV-Element mit ID dasolldietabellehin

selfmade01 schrieb:
wo muss ich den inner.HTML setzen und wie

was heißt wo und wie? im callback deiner response und so wie beschrieben.

selfmade01 schrieb:
ich hätte das jetzt so ausgetauscht oben in der Funktion

und? geht es?

selfmade01 · 17. Dez. 2014

hesst schrieb:
und? geht es?

Hallo,

leider nein, es geht nicht.

Zuvor als ich die gleiche Funtion nur mit dem getelementsbyid nutze hat es funktioniert.

Den String (der also eingefügt werden sol) bekomme ich ja über mein testSettings.php
dort wird der string zusammengebastelt und dann wieder übergeben

was ich dann bekomme muss ich an den tbody senden

Das Problem ist evtl. ganz woanders

ich arbeite mit Regsiterkarten

Code:

<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>

so ungefähr sieht das aus (natürlich die onclicks anders so dass dort tasächliche ids gesendet werden)

Die erste Regsiterkarte ist also Anfangs leer und hat nur einen <div> eintrag.

bei klick auf

Code:

<li><a href="#tabr1" onclick="getnewrow('tabr1', 'id1', 'sid2','erstezeieloderfolgezeile')">Tab1</a></li>

wird das erste mal die Funktion aufgerufen (das funktionierte schon)
es wird also erstmals eine Tabelle in die Regsitrerkarte geschrieben (auch der string wird unter testSettings.php aufgebaut die mit ajax gefüttert und geholt wird

die Regsiterkarten sehen dann so ungefähr aus

Code:

<ul class="tabs left">
<li><a href="#tabr1" onclick="getnew('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">
<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="addnewrow(id1,id2,id3)" hat></td></tr>
</div>

<div id="tabr2" class="tab-content">Tab2</div>
<div id="tabr3" class="tab-content">Tab3</div>

so ungefähr sieht es aus

die function hatte ich oben schon gesendet

vielleicht ist es jetzt ein wenig transparenter

grüße Jürgen

tsseh · 17. Dez. 2014

selfmade01 schrieb:
leider nein, es geht nicht.

kommen denn fehler?

selfmade01 schrieb:
Zuvor als ich die gleiche Funtion nur mit dem getelementsbyid nutze hat es funktioniert.

und warum nutzt du dann nicht weiterhin die gleiche funktion mit getelementByID? was nimmst du jetzt? querySelector? dann wird der selector falsch sein.

mir schein, du stocherst ziemlich im trüben. vielleicht solltest du dir erst mal grundkentnisse aneignen.

selfmade01 · 17. Dez. 2014

hesst schrieb:
kommen denn fehler?

und warum nutzt du dann nicht weiterhin die gleiche funktion mit getelementByID? was nimmst du jetzt? querySelector? dann wird der selector falsch sein.
.

hall, es war eine Kleinigkeit ich habe beim

Code:

document.querySelector('#'+tabr).innerHTML +=xmlhttp.responseText;

ganz einfach das 'x'+ vergessen und die variable einfach so als "tabr" angegeben.

fasse es nicht

- - - Aktualisiert - - -

Frage:
jetzt wird bei mir alles sauber dargestellt, jetzt habe ich das nächste Problemchen

ich müsste jetzt dei dann in das Formular eingetragenen Werte mit jacascript oder Jquery auslesen.
ich habe jetzt ja meine Tabelle mit ´der ersten zeile in der es Eingabefelder gibt
Dann noch einen add-Button der gleichzeitig ein abspeichern in der DB auslöst.

Aktuell klicke ich auf den Button und Eingabezeile für Eingabezeile wird dazu geschoben
mit onclick="getnewrow(1,2,7,9)"

jetzt möchte ich diesen Button erweitern das er alle 8 Eingabefelder ausliest und auch mit an die Function übergibt

geht das ? hast Du ein Beispiel?

Grüße Jürgen

tsseh · 18. Dez. 2014

selfmade01 schrieb:
jetzt möchte ich diesen Button erweitern das er alle 8 Eingabefelder ausliest und auch mit an die Function übergibt

geht das ?

ja, mit den DOM-funktionen oder etwas anwenderfreundlicher mit jquery

dertypdernixkan · 19. Dez. 2014

selfmade01 schrieb:
ein <div id=> element darf ich ich ja nicht innerhalb einer Tabelle setzen.

Wer sagt das?

Wenn die Tabelle nicht mehr vernünftig dargestellt wird, schau ob du mit float und(/oder) clear auf den jeweiligen div was erreichst.

Mit jQuery ist das recht simpel: jquery Lib einbinden und dann bspw:

Code:

$("id oder klasse des buttons").click(function() {

	$.ajax({
		type: "POST",
		url: "url zum script (die absolute ist die sicherste!)",
		data: "q="+$(this).attr("id")+"&m="+$(this).val(),
		success: function(html) {

			var exp = $.parseJSON(html);
			// wie der weitere code aussieht hängt dann von deiner php-datei ab


		}

	});

});


Da lässt sich auch super eine Funtion draus machen

mikdoe · 19. Dez. 2014

SELFHTML Forum: (JAVASCRIPT) Platzhalter für Nachladen von Tabellenzeilen unsichtbar <div> ?
Crosspost?

Javascript und Ajax Zeilen in Tabelle nachladen

selfmade01

New member

tsseh

Lounge-Member

selfmade01

New member

tsseh

Lounge-Member

selfmade01

New member

tsseh

Lounge-Member

selfmade01

New member

tsseh

Lounge-Member

selfmade01

New member

tsseh

Lounge-Member

dertypdernixkan

New member

mikdoe

Moderator