vicMedlem sedan apr. 2006244 inlägg <script type="text/javascript">
/* <![CDATA[ */
var mess = '- Musiker:';
var messB = '- <strong>Välj instrument:</strong>';
var Errormess = '- Du får max ange 10 musiker';
var E1 = '- Du angav ingen titel';
var E2 = '- Titeln får endast innehålla tecken A-Ö, 0-9 och mellanslag';
var E3 = '- Fälten får maximalt innehålla 50 tecken';
var instrument = new Array();
instrument[1] = 'Tamburin';
instrument[2] = 'Violin';
instrument[3] = 'Egg';
instrument[4] = 'Harpa';
instrument[5] = 'Piano';
instrument[6] = 'Munjiga';
instrument[7] = 'Flöjt';
function AddArtist()
{
xx=2;
yy=1;
do
{
if(document.getElementById('js_control').value == yy)
{
document.getElementById('js_control').value = xx;
document.getElementById('hidden_'+yy).style.padding = '30px 0 0 0';
document.getElementById('hidden_'+yy).style.visibility = 'visible';
document.getElementById('hidden_'+yy).style.height = 'auto';
document.getElementById('hidden_'+yy).style.overflow = 'visible';
var ensemble = '';
nr=0;
for (c in instrument)
{
nr++;
ensemble = ensemble +'<tr><td>'+ instrument[c] +'</td><td><input type="checkbox" id="pointer" name="am'+xx+'_'+nr+'" value="'+ instrument[c] +'" /></td></tr>';
}
document.getElementById('inner'+xx).innerHTML = (ensemble);
return false;
break;
}
xx++;
yy++;
if(yy == 9)
{
alert(Errormess);
return false;
}
}
while(yy < 10);
}
/* ]]> */
</script>
Allt fungerar fint förutom att det i IE inte skrivs ut någon tabell med instrument. Errormeddelandet säger att det blir ett okänt körningsfel. Jag fattar noll!
Man kan med denna funktion läga till 9 artister, som ligger gömda i divvar. När funktionen anropas blir en divv snlig och instrument som skrivs in i arrayer med php läggs till i en sträng som skrivs in med innerHTML i en tabell som ligger i divven. Grejen är att innerHTML verkar fungera det läggs dock aldrig till några instrument?
Peter SMedlem sedan dec. 20025 483 inlägg Eftersom detta gäller JS är det bra om ingen PHP-kod visas. Klistra in koden som den ser ut i "Visa källa".
Peter SMedlem sedan dec. 20025 483 inlägg Det ser okej ut. I vilket samband uppkommer felet? Är det möjligt att få med HTML-koden så att det går att testköra?
vicMedlem sedan apr. 2006244 inlägg okej, här kommer en rörig en som visar problemet
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>KOKo</title>
<style type="text/css">
#hidden_1, #hidden_2, #hidden_3, #hidden_4, #hidden_5, #hidden_6, #hidden_7, #hidden_8, #hidden_9
{height:1px; overflow:hidden; clear:both; font-size:1.0em; visibility:hidden}
</style>
</head>
<body>
<div id="page_wrapper">
<div id="head_navi">
<a href="index.php?lang=sv">Startsida</a>
<a href="">Download</a>
<a href="">För artister</a>
<a href="">Support</a>
<form action="" method="get" id="search">
<p><input type="text" name="subject" size="20" /></p>
<p><input type="submit" value="SÖK »" name="search" id="search_button" onmouseover="ButtonHover('search_button');" onmouseout="ButtonRest('search_button')" /></p>
</form>
</div>
<div id="sub_navi">
<a href="">Att vara medlem eller...</a>
<a href="">Logga ut</a> <a href="">Kontrollpanel</a> </div>
<div id="container">
<div class="content">
<h1>Kontrollpanel</h1>
<script type="text/javascript">
/* <![CDATA[ */
function ShowExtra()
{
document.getElementById('extra_artist').style.visibility='hidden';
document.getElementById('hidden_inputs').style.visibility='visible';
document.getElementById('hidden_inputs').style.height='auto';
document.getElementById('hidden_inputs').style.overflow='visible';
return false;
}
var Errormess = '- Du får max ange 10 musiker';
var instrument = new Array();
instrument[1] = 'Tamburin';
instrument[2] = 'Violin';
instrument[3] = 'Egg';
instrument[4] = 'Harpa';
instrument[5] = 'Piano';
instrument[6] = 'Munjiga';
instrument[7] = 'Flöjt';
function AddArtist()
{
xx=2;
yy=1;
do
{
if(document.getElementById('js_control').value == yy)
{
document.getElementById('js_control').value = xx;
document.getElementById('hidden_'+yy).style.padding = '30px 0 0 0';
document.getElementById('hidden_'+yy).style.visibility = 'visible';
document.getElementById('hidden_'+yy).style.height = 'auto';
document.getElementById('hidden_'+yy).style.overflow = 'visible';
ensemble = '<h3>hej</h3>';
nr=0;
/*for (c in instrument)
{
nr++;
ensemble = ensemble +'<tr><td>'+ instrument[c] +'</td><td><input type="checkbox" id="pointer" name="am'+xx+'_'+nr+'" value="'+ instrument[c] +'" /></td></tr>';
} */
document.getElementById('inner'+xx).innerHTML= '<h3>hej</h3>';
return false;
break;
}
xx++;
yy++;
if(yy == 9)
{
alert(Errormess);
return false;
}
}
while(yy < 10);
}
/* ]]> */
</script>
<script type="text/javascript" src="SYS_template/js/checkMusicForm.js"></script>
<div class="form">
<p class="title">Rättigheter</p>
<form action="SYS_template/_actions/controlpanel_music.php?lang=sv" enctype="multipart/form-data" method="post" id="upload" onsubmit="return CheckMusicForm();">
<p><strong>Besökares rättigheter till denna låt:</strong><br />
Lyssna och Ladda hem<input type="radio" class="radio" name="song_status" value="shared" checked="checked" />
Lyssna och Köp<input type="radio" class="radio" name="song_status" value="commerce" />
Endast lyssna<input type="radio" class="radio" name="song_status" value="not_shared" />
</p>
<p class="title">Extra information <span style="font-weight:normal">(valfritt)</span></p>
<p><strong>Musik av:</strong><br /><input type="text" name="authors" id="n2" size="35" /></p>
<p><strong>Textförfattare:</strong><br /><input type="text" name="producers" id="n3" size="35" /></p>
<p><strong>Inspelningsdatum:</strong><br /><input type="text" name="year" id="n4" size="15" /></p>
<p id="extra_artist"><a href="#" onclick="return ShowExtra();">Lägg till ytterligare information om denna lät</a></p>
<div id="hidden_inputs" style="visibility:hidden; height:1px; overflow:hidden">
<p class="title">Musiker</p>
<p class="float"><strong>Musiker:</strong><br /><input type="text" name="art_0" id="a1" size="35" /></p>
<p class="float"><strong>Välj instrument:</strong><input type="hidden" name="nr_instrument" value="7" />
<input type="hidden" name="js_control" id="js_control" value="1" />
</p>
<div class="instr_list">
<table cellspacing="0">
<tr>
<td>Tamburin </td><td><input type="checkbox" name="am0_1" id="pointer" value="Tamburin" /></td>
</tr>
<tr>
<td>Violin </td><td><input type="checkbox" name="am0_2" id="pointer" value="Violin" /></td>
</tr>
<tr>
<td>Egg </td><td><input type="checkbox" name="am0_3" id="pointer" value="Egg" /></td>
</tr>
<tr>
<td>Harpa </td><td><input type="checkbox" name="am0_4" id="pointer" value="Harpa" /></td>
</tr>
<tr>
<td>Piano </td><td><input type="checkbox" name="am0_5" id="pointer" value="Piano" /></td>
</tr>
<tr>
<td>Munjiga </td><td><input type="checkbox" name="am0_6" id="pointer" value="Munjiga" /></td>
</tr>
<tr>
<td>Flöjt </td><td><input type="checkbox" name="am0_7" id="pointer" value="Flöjt" /></td>
</tr> </table>
</div>
<div id="hidden_1">
<p class="float"><strong>Musiker:</strong><br /><input type="text" name="art_2" size="35" /></p>
<p class="float"><strong>Välj instrument:</strong> (Håll nere Ctrl-knappen för att markera flera samtidigt)</p>
<div class="instr_list">
<table cellspacing="0" id="inner2">
</table>
</div>
</div>
<div id="hidden_2">
<p class="float"><strong>Musiker:</strong><br /><input type="text" name="art_3" size="35" /></p>
<p class="float"><strong>Välj instrument:</strong> (Håll nere Ctrl-knappen för att markera flera samtidigt)</p>
<div class="instr_list">
<table cellspacing="0" id="inner3">
</table>
</div>
</div>
<div id="hidden_3">
<p class="float"><strong>Musiker:</strong><br /><input type="text" name="art_4" size="35" /></p>
<p class="float"><strong>Välj instrument:</strong> (Håll nere Ctrl-knappen för att markera flera samtidigt)</p>
<div class="instr_list">
<table cellspacing="0" id="inner4">
</table>
</div>
</div>
<div id="hidden_4">
<p class="float"><strong>Musiker:</strong><br /><input type="text" name="art_5" size="35" /></p>
<p class="float"><strong>Välj instrument:</strong> (Håll nere Ctrl-knappen för att markera flera samtidigt)</p>
<div class="instr_list">
<table cellspacing="0" id="inner5">
</table>
</div>
</div>
<div id="hidden_5">
<p class="float"><strong>Musiker:</strong><br /><input type="text" name="art_6" size="35" /></p>
<p class="float"><strong>Välj instrument:</strong> (Håll nere Ctrl-knappen för att markera flera samtidigt)</p>
<div class="instr_list">
<table cellspacing="0" id="inner6">
</table>
</div>
</div>
<div id="hidden_6">
<p class="float"><strong>Musiker:</strong><br /><input type="text" name="art_7" size="35" /></p>
<p class="float"><strong>Välj instrument:</strong> (Håll nere Ctrl-knappen för att markera flera samtidigt)</p>
<div class="instr_list">
<table cellspacing="0" id="inner7">
</table>
</div>
</div>
<div id="hidden_7">
<p class="float"><strong>Musiker:</strong><br /><input type="text" name="art_8" size="35" /></p>
<p class="float"><strong>Välj instrument:</strong> (Håll nere Ctrl-knappen för att markera flera samtidigt)</p>
<div class="instr_list">
<table cellspacing="0" id="inner8">
</table>
</div>
</div>
<div id="hidden_8">
<p class="float"><strong>Musiker:</strong><br /><input type="text" name="art_9" size="35" /></p>
<p class="float"><strong>Välj instrument:</strong> (Håll nere Ctrl-knappen för att markera flera samtidigt)</p>
<div class="instr_list">
<table cellspacing="0" id="inner9">
</table>
</div>
</div>
<div id="hidden_9">
<p class="float"><strong>Musiker:</strong><br /><input type="text" name="art_10" size="35" /></p>
<p class="float"><strong>Välj instrument:</strong> (Håll nere Ctrl-knappen för att markera flera samtidigt)</p>
<div class="instr_list">
<table cellspacing="0" id="inner2">
</table>
</div>
</div>
<p><a href="Javascript: AddArtist();" id="add_artist">+ Lägg till artist</a></p>
</div>
<p class="title">Filinformation</p>
<p><strong>Låtens titel:</strong><br /><input type="text" name="title" id="n1" size="35" /></p>
<p><input name="userfile" type="file" id="pointer" /></p>
<p><input type="submit" id="button" name="upload_mp3" value="LADDA UPP" onmouseover="ButtonHover('button');" onmouseout="ButtonRest('button');" onclick="ButtonHandle('true');" /></p>
</form>
</div><img src="SYS_template/artistpics/bingo.jpg?1169045359" alt="Bingo" /><br /><img src="SYS_template/artistpics/MEDIUM_bingo.jpg?1169045359" alt="Bingo" /><br /><img src="SYS_template/artistpics/MINI_bingo.jpg?1169045359" alt="Bingo" /> <hr />
<hr />
<a href="">Artistbild</a>
<a href="">Bakgrundstext</a>
<a href="">Ladda upp musik</a>
<a href="">Användaruppgifter</a>
<a href="">Diarium</a>
<a href="">Recensioner</a>
<a href="">Zail</a>
</div>
</div>
</div>
<!-- SIDE BAR -->
<div id="side_bar"></div>
</body>
</html>
Ops, Den första blev visst fel
Peter SMedlem sedan dec. 20025 483 inlägg Några saker att börja med:
- javascript:void AddArtist()
- Du har minst två element med samma id (inner2)
Sedan verkar inte IE vilja att man tilldelar en tabell med innerHTML på det viset. En lösning kan vara
<table...>
<tr>
<td>
[red]<div id="inner2"></div>[/red]
</td>
</tr>
</table>
vicMedlem sedan apr. 2006244 inlägg aha, ja nu funkar det! Varför är void så viktigt just där? Vad är fördelen med att ha javascriptet i href="" istället för vid onclick=""?
Peter SMedlem sedan dec. 20025 483 inlägg Egentligen är det bättre att ha JS i onclick, det tillåter nämligen följande
// se till att f() returnerar false
<a href="sida_för_icke-js.html" onclick="return f()"></a>
Är JS aktiverat navigeras inte besökaren till sida_för_icke-js.html. Är däremot JS inaktiverat, eller inte stödjs, kommer inte f() att köras och besökaren leds till ovan nämnda sida där man kan visa en alternativ version eller annat trevligt.
Anledningen till void är att undvika eller "tysta ned" returvärdet från det som körs.
Peter S skrev:
Sedan verkar inte IE vilja att man tilldelar en tabell med innerHTML på det viset. En lösning kan vara
<table...>
<tr>
<td>
[red]<div id="inner2"></div>[/red]
</td>
</tr>
</table>
Tjena,
Jag har problem med samma sak nu. En kalander som laddas in med Ajax, som ger "Okänt körningsfel" i IE7.
Såhär ser koden ut:
<table cellpadding="5" cellspacing="0" id="calendar-header" style="margin: 0 auto;">
<thead>
<tr>
<th colspan="8" class="monthname">Juni 2008</th>
</tr>
<tr>
<td>Måndag</td>
<td>Tisdag</td>
<td>Onsdag</td>
<td>Torsdag</td>
<td>Fredag</td>
<td>Lördag</td>
<td>Söndag</td>
<td style="border-right: 1px #000 solid;">Vecka</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="8" style="height: 10px;"> </td>
</tr>
<tr>
<td colspan="4" style="text-align: left;"><a href="#"><img src="./pics/arrow.left.gif" alt="left-arrow" style="width: 24px; height: 24px" /></a></td>
<td colspan="4" style="text-align: right;"><a href="#"><img src="./pics/arrow.right.gif" alt="right-arrow" style="width: 24px; height: 24px" /></a></td>
</tr>
</tfoot>
<tbody id="calendar-body">
<tr>
<td>[red]<!-- calendar object goes here -->[/red]</td>
</tr>
</tbody>
</table>
Tanken är att mitt innehåll skrivs ut mellan <tbody> och </tbody>, det som finns i just nu är bara för att sidan ska validera.
Hur löser jag det här på ett bättre sätt?
Tack!
Snabb kommentar:
IE:s oförmåga att skapa tabeller med innerHTML är en känd bugg.
Man får använda en serie av createElement och dessutom se till att man på det viset också har med tbody som ett separat steg.
