[JavaScript] Problem mit innerHTML

Murdoc · 18. Mai 2007

Problem mit innerHTML

hi, hab mal wieder ein problem.

diesmal mit einem javascript... folgendes ist passiert:
ich habe ein eingabe feld "mirrors" mit der man neue eingabe felder erstellen kann, d.h. wenn man dort eine 2 eingibt, gibt das script 2 neue felder aus.

###
->hier online: http://getupped.freeweb7.com/test.php
###

das script:

Code:

function mkmirror()
{
 var mirrors = document.getElementById('mkmirrors').value;

 if(mirrors > 20) alert("Mehr als 20 Mirrors sind nicht erlaubt, überlege auch ob wirklich soviele notwendig sind.");
 else if(mirrors <= 0) alert("Die Anzahl der Mirrors sollte dann doch im positiven Bereich sein...");
 else {
 alert("Vorsicht! bei Fehlerhaften Eingaben werden die Links gelöscht, also aufpassen!");
 var mirror_tpl = 'Mirrors neu wählen: <input type="text" size="4" maxlength="2" value="" class="txt_pw" id="mkmirrors" />&nbsp;<input type="button" onclick="mkmirror();" class="button" value="Weiter"/>';
 for(i=0; i<mirrors; i++) {
 mirror_tpl += '<br/><br/>';
 mirror_tpl += '<b>Mirror'+(i+1)+' Name:</b> <input type="text" name="file_mirror_name['+i+']" size="55" value="http://" class="txt_pw" maxlenght="255" /><br/>';
 mirror_tpl += '<br/><b>Downloadlinks zu Mirror'+(i+1)+':</b><br/><textarea class="add_t" name="file_mirror_links['+i+']" rows="*" cols="*"></textarea><br/>';
 }
 setInnerHTML(document.getElementById('mirrors'), mirror_tpl); // eigene funktion == innerHTML
 }
}

das klappt auch ohne probleme, auch das versenden der felder an ein phpscript klappt:

PHP:

    <? php

  if(isset( $_POST [ 'senden' ]))  print_r ( $_POST );

else {

    echo  '

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html>

<head>

<script type="text/javascript" src="site.js"></script>

<link rel="stylesheet" href="css/style.css" type="text/css" />

</head>

<body>

         <form action="test.php" method="post">

         <table>

                 <tr>

                 <td class="add_a"> <b>Download: *</b>

                 </td>

                   <td id="mirrors">Mirros: <input type="text" size="4" maxlength="2" value="" class="txt_pw" id="mkmirrors" />&nbsp;<input type="button" onclick="mkmirror();" class="button" value="Weiter"/></td>

                 </tr>

         </table>

                 <input type="submit" name="senden" value="ab">

         </form>

</body>

</html>

         ' ;

}

  ?>

sogar der IE bekommt das auf die reihe!

das komische ist nur dass das alles mit einem mozilla-browser nicht mehr klappt wenn ein template via php eingebunden wird, also fopen() fread() print()

der IE hat weiterhin kein problem damit.

was hab ich falsch gemacht?

Anzeige

tHe dUdE · 18. Mai 2007

AW: Problem mit innerHTML

Poste mal den geparsten Quelltext wenn du es per Files machst. Da liegt der Fehler.

Murdoc · 18. Mai 2007

AW: Problem mit innerHTML

die betreffende stelle im quelltext wäre die:

HTML:

<tr>
 <td class="add_a"> <b>Download: *</b></td>
 <td id="mirrors">Mirros: <input type="text" size="4" maxlength="2" value="" class="txt_pw" id="mkmirrors" />&nbsp;<input type="button" onclick="mkmirror();" class="button" value="Weiter"/></td>
</tr>

das mit innerHTML eingefügte ist ja im quelltext der seite nicht ersichtlich.

teh_boiiingerrr · 19. Mai 2007

AW: Problem mit innerHTML

habs grad ausprobiert (IE6 + FF2), aber ich bin mir nicht ganz sicher, was der fehler sein soll - ich krieg in beiden browsern die gleichen resultate (=ausgabe der POST-daten).

vielleicht hilft's dir weiter, wenn du in die fehlerkonsole vom FF schaust - da findest du anhaltspunkte für dein js (wenn denn da der fehler liegen sollte). ich vermute einfach mal (wie gesagt, ich weiß nicht genau, wo das problem ist und welche daten den fehler verursachen), dass du die case-sensitivity ein wenig verpeilt hast deswegen:

HTML:

setInnerHTML(document.getElementById('mirrors'), mirror_tpl); // eigene funktion == innerHTML

quellcode?

Murdoc · 19. Mai 2007

AW: Problem mit innerHTML

ja in der php datei direkt klappt das auch, steht ja oben, aber wenn ich den html code von einer html datei einlesen lasse (fopen(), fread(), print()); geht das versenden der mit innerHTML eingefügten felder nicht mehr. zumindest bei mozilla.

hier die setInnerHTML funktion:

Code:

function setInnerHTML(element, toValue)
{
 if (typeof(element.innerHTML) != 'undefined') element.innerHTML = toValue;
 else
 {
 var range = document.createRange();
 range.selectNodeContents(element);
 range.deleteContents();
 element.appendChild(range.createContextualFragment(toValue));
 }
}

teh_boiiingerrr · 19. Mai 2007

AW: Problem mit innerHTML

sorry, gestern zuviel gefeiert, ich versteh's nicht was für templates oder html-dateien willst du einlesen und wie sind die aufgebaut? und welche html-datei liest html-code ein? ?(

Murdoc · 19. Mai 2007

AW: Problem mit innerHTML

ein wenig vereinfacht:

PHP:

    <? php
  if(!isset( $_POST [ 'submit' ])) {
  $fp  =  fopen ( "eintragen.html" ,  "r" );
  $return  =  fread ( $fp ,  filezise ( "eintragen.html" ));
  fclose ( $fp );
 
print( $return );
}
else  print_r ( $_POST );
 
  ?>

eintragen.html:

HTML:

 <b><u>Zum Realease</u></b>
 <div class="hr"></div>
 <table cellpadding="0" cellspacing="2" width="100%" class="addfile_table">
 <tr><form action="cp.php" method="post" style="margin:0px;">
 <td class="ad_a"><b>Releasename: *</b></td>
 <td><input type="Text" name="rls_name" value="$rls_name;" size="75" class="txt_pw" maxlength="255"></td>
 </tr>
 <tr>
 <td class="ad_a"><b>Releasedatum: *</b></td>
 <td><input type="Text" name="rls_date" value="$rls_date;" size="30" class="txt_pw" maxlength="30"></td>
 </tr>
 <tr>
 <td class="ad_a"><b>Releasegroup: *</b></td>
 <td><input type="Text" name="rls_group" value="$rls_group;" size="30" class="txt_pw" maxlength="30"></td>
 </tr>
 <tr>
 <td class="ad_a"><b>.NFO File:</b></td>
 <td><input type="Text" name="rls_nfo" value="$rls_nfo;" size="60" class="txt_pw" maxlength="30"></td>
 </tr>
 [... blah blah des übliche halt...]
 <tr>
 <td class="add_a"> <b>Download: *</b></td>
 <td id="mirrors">Mirros: <input type="text" size="4" name="asdf" maxlength="2" value="" class="txt_pw" id="mkmirrors" />&nbsp;<input type="button" onclick="mkmirror();" class="button" value="Weiter" /></td>
 </tr>
 <tr>
 <td><b>IMDB:</b></td>
 <td><input type="Text" name="file_imdb" value="$file_imdb;" size="75" class="txt_pw" maxlength="255"></td>
 </tr>
 <tr>
 <td><b>Passwort (falls vorhanden):</b></td>
 <td><input type="Text" name="file_pass" value="$file_pass;" size="30" class="txt_pw" maxlength="255"></td>
 </tr>
 <tr>
 <td><b>SFV (falls vorhanden):</b></td>
 <td><input type="Text" name="file_sfv" value="$file_sfv;" size="75" class="txt_pw" maxlength="255"></td>
 </tr>
 <tr>
 <td><b>CD's:</b></td>
 <td><input type="Text" name="file_cds" class="txt_pw" value="$file_cds;" size="4" maxlength="10"></td>
 </tr>
[... noch mehr blah]
 </table>
 <br/>
 <br/>
 <div align="center">
 <input type="Submit" name="submit" value="Upload eintragen" class="button" />&nbsp;<input type="reset" value="Zurücksetzen" class="button"></form>
 </div>

zuvor gesetzte header:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta name="author" content="der und der" />
<meta name="description" content="Seitenname und so weiter" />
<meta name="expire" content="-1" />
<meta name="language" content="de" />
<link rel="up" href="javascript:self.scrollTo(0,0);" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="site.js"></script>
<link rel="stylesheet" href="css/style.css" type="text/css" />

ergebnis: IE machts richtig, mozilla lässt mit innerHTML eingefügte felder aus.

teh_boiiingerrr · 19. Mai 2007

AW: Problem mit innerHTML

achso, moment... ich füll selbst die eintragen.html aus, speicher sie, und führe dann das php-skript aus, dass die daten übernimmt bzw. übernehmen soll?

Murdoc · 19. Mai 2007

AW: Problem mit innerHTML

hab das mal hochgeladen jetzt:

http://getupped.freeweb7.com/test.php

teh_boiiingerrr · 19. Mai 2007

AW: Problem mit innerHTML

ok, nun hab ich's auch verstanden

musste selbst suchen, aber:
der IE gibt bei aufruf von innerhtml den aktuellen inhalt des objekts wieder (was ja auch "richtig" ist bzw. erwartet wird), der firefox gibt den ursprünglichen inhalt wieder.

HTML:

<div id="myDiv">
<form name="myForm">
<input type="text" value="original value" name="myInput">
<input type="button"
onclick="document.myForm.myInput.value='new value';"
value="Change the Value">
<input type="button"
onclick="alert(document.getElementById('myDiv').innerHTML)"
value="Show the HTML">
</form>
</div>

IE6:
alert vor'm ändern: value="original value";
danach: value="new value";

firefox:
alert vor'm ändern: value="original value";
danach: value="original value";

ich hab hier eine "emulation" des innerhtml-verhaltens vom IE gefunden, die dem fuchs auf die sprünge helfen soll. vielleicht hilft sie dir weiter, hab nur nen kurzen blick riskiert.

Murdoc · 19. Mai 2007

AW: Problem mit innerHTML

würde das auch gehen wenn ich noch eine funktion schreib die nach dem ausfüllen der mit innerHTML eingefügten felder einem hiddenfeld den inhalt derer als value zuteilt?

so:

HTML:

<script>
function mach_den_value_da_rein_du_sack() 
{
var wie_viele = document.lala.wie_viele_mirrors_haste_denn.value;

var m_namen = new Array();
var m_links = new Array();
for(i=0; i<wie_viele;i++) {
m_namen[] = document.getElementById('mirror_name['+i+']').value;
m_links[] = document.getElementById('mirror_links['+i+']).value;
}
var jetzt_aber = new Array(m_namen, m_links);
document.lala.hier_value_rein.value = jetzt_aber;
}
</script>
<form name="lala">
<input type="submit" onclick="mach_den_value_da_rein_du_sack();" value="Senden" />
<input type="hidden" name="wie_viele_mirrors_haste_denn" value="VORHER MIT DER FUNKTION MKMIRROR NOCH DIE ZAHL HIER REIN GEMACHT" />
<input type="hidden" name="hier_value_rein" value="" />
</form>

teh_boiiingerrr · 19. Mai 2007

AW: Problem mit innerHTML

gute frage, aber ich vermute mal nicht. ist eigentlich nur ein umweg, auf die methode (innerhtml) greifst du ja trotzdem zu und das dürfte die ursprünglichen werte liefern.

hab gerade versucht, die geschichte mit nem popup zu lösen, stoß dabei aber auf das gleiche problem. kenn im moment auch keine alternative.

Murdoc · 19. Mai 2007

AW: Problem mit innerHTML

ich probier mal das mit ajax zu lösen, sprich: man erstellt die felder so wie se sind, schickt das zeug via ajax an das script das dann die sachen in der session speichert.

wenn's klappt post ich den source!

ok wie versprochen das script: (auch wenn die schleifen recht überflüssig sind, mir wurscht^^)

HTML:

function save_mirror()
{
 var m_i = document.getElementById('sv_mirror').value;
 var mirror_names = new Array();
 var mirror_links = new Array();
 var as_array = "";

 for(i=0; i<m_i; i++) {
 mirror_names[i] = document.getElementById('file_mirror_name_'+i).value;
 mirror_links[i] = document.getElementById('file_mirror_links_'+i).value;
 }

 for(o=0; o<i; o++) {
 if(o==0) as_array += "mirror_names["+o+"]="+mirror_names[o];
 else as_array += "&mirror_names["+o+"]="+mirror_names[o];
 }

 for(z=0; z<i; z++) {
 as_array += "&mirror_links["+z+"]="+mirror_links[z];
 }

 AJAX_request("cp.php?action=save", "save", as_array);
}

Nützliche Suchen

[JavaScript] Problem mit innerHTML

Videos zum Themenbereich