Jag undrar hur man kan kan knyta samman PHP-kod och JavaScript, tex använda PHP-variabler i Java-koden.
Jag har en statisk nyhetssida, som jag skulle vilja koppla till en databas och göra mer dynamisk. Problemet är att jag inte vet hur jag ska kunna använda värden jag plockat ut i php in i JavaScriptet.
Nedan är koden för den statiska sidan, som jag vill anpassa till en dynamisk lösning.
<html>
<head>
<link href="content/inc/global.css" rel="stylesheet" type="text/css">
<script>
function toggle(e) { // kollar om lagret är på eller av
if (e.style.display == "none")
{
e.style.display = "block";
}
else
{
e.style.display = "none";
}
}
function setDisplay() //sätter none på alla så man slipper kolla fler gånger ovan
{
nyhet1.style.display="none";
nyhet2.style.display="none";
}
</script>
<script src="content/inc/setheight.js" language="javascript" type="text/javascript"></script>
</head>
<body onLoad="goSetHeight();setDisplay()">
<table width="514" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="right"><A href="javascript:window.print();"><img src="images_tour/button_skrivut.gif" width="51" height="17" hspace="0" vspace="0" border="0"></a> <a href="javascript:window.history.go(-1);"><img src="images_tour/button_back.gif" alt="Tillbaka" width="69" height="17" hspace="0" vspace="0" border="0"></a></td>
</tr>
<tr>
<td valign="top"> </td>
</tr>
<tr>
<td valign="top">
<!--Content, start-->
<div class="divborder">
<table width="100%" border="0" cellpadding="4" cellspacing="1" bordercolor="#EFEFEF">
<tr class="bluetop">
<td bgcolor="#EFEFEF"><strong>Nyheter 2005</strong></td>
</tr>
<tr>
<td align="center" style="width:100%; height:2px; background-color='#E3EAF4'"></td>
</tr>
<tr><!--background-image: url(../../images_tour/form/form_newsheadbg.gif)-->
<td valign="top" onMouseOver="this.style.backgroundColor='#E3EAF4'" onMouseOut="this.style.backgroundColor='white'">
<strong>2005-09-13</strong> <a href="#" onClick="toggle(nyhet1);goSetHeight();">Nya
avgifter på trafik</a>
<div id="nyhet1" class="news" onClick="nyhet1.style.display='none'" title="Klicka för att stänga nyheten!">
<strong><img src="images_tour/form/form_news_close.gif" width="10" height="9" hspace="0" vspace="0" border="0" style="float:right;margin-right:-5px; margin-top:-5px;">Nyhet
1</strong><br>
Lor illum qui tions enim ipsustio od del diam aci blam ing et
ulputate voloboreet dolorper sustincil et vulluptat lut nos euisl
utpat nonsenim vero del exerci etue minim duisit luptat. Dolore
modolore min ut dolenibh et ercilis exeraessi.</div></td>
</tr>
<tr>
<td align="center" style="width:100%; height:2px; background-color='#E3EAF4'"></td>
</tr>
<tr onMouseOver="this.style.backgroundColor='#E3EAF4'" onMouseOut="this.style.backgroundColor='white'">
<td valign="top"> <strong>2005-09-10</strong> <a href="#" onClick="toggle(nyhet2);goSetHeight()">Nya
pass till hösten</a>
<div id="nyhet2" class="news" onClick="toggle(nyhet2)" title="Klicka för att stänga nyheten!">
<strong><img src="images_tour/form/form_news_close.gif" width="10" height="9" hspace="0" vspace="0" border="0" style="float:right;margin-right:-5px; margin-top:-5px;">Nyhet
2</strong><br>
Quat prat, susci tis aliquis nis dolore velit, sustrud dolor sit
wisi ercillan et nulluptatio dolore cor sim diam ing exer accum
adion veliqui bla feum duissectet volut am ing eugue tate tat
lore cor adigna facil dolenit, conse elenim er augue do dolenisim
vel dunt lum zzrilla am, quat.<br>
</div></td>
</tr>
</table>
</div></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
</html>
1. Använd kod-/php-taggarna ([kod]kod här[/kod]) när du postar kod.
2. Var är PHP-koden du vill använda dig av?
3. Var i JavaScript-koden skall PHP-koden vara?
OK, det gick lite snabbt när jag klistrade in koden... ledsen för det.
I funktionen setDisplay() nedan skulle jag ju vilja sätta alla beroende på hur många nyheter det är tex. Nyheterna ligger i en databas och antalet kan jag ju genom php utläsa. Men hur får jag in det i javaScriptet? Är inte så haj på javascript som du märker...
<html>
<head>
<link href="content/inc/global.css" rel="stylesheet" type="text/css">
<script>
function toggle(e)
{ // kollar om lagret är på eller av
if (e.style.display == "none")
{
e.style.display = "block";
}
else
{
e.style.display = "none";
}
}
function setDisplay() //sätter none på alla så man slipper kolla fler gånger ovan
{
nyhet1.style.display="none";
nyhet2.style.display="none";
}
</script>
<script src="content/inc/setheight.js" language="javascript" type="text/javascript"></script>
</head>
<body onLoad="goSetHeight();setDisplay()">
<table width="514" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="right"><A href="javascript:window.print();"><img src="images_tour/button_skrivut.gif" width="51" height="17" hspace="0" vspace="0" border="0"></a> <a href="javascript:window.history.go(-1);"><img src="images_tour/button_back.gif" alt="Tillbaka" width="69" height="17" hspace="0" vspace="0" border="0"></a></td>
</tr>
<tr>
<td valign="top"> </td>
</tr>
<tr>
<td valign="top">
<!--Content, start-->
<div class="divborder">
<table width="100%" border="0" cellpadding="4" cellspacing="1" bordercolor="#EFEFEF">
<tr class="bluetop">
<td bgcolor="#EFEFEF"><strong>Nyheter 2005</strong></td>
</tr>
<tr>
<td align="center" style="width:100%; height:2px; background-color='#E3EAF4'"></td>
</tr>
<tr><!--background-image: url(../../images_tour/form/form_newsheadbg.gif)-->
<td valign="top" onMouseOver="this.style.backgroundColor='#E3EAF4'" onMouseOut="this.style.backgroundColor='white'">
<strong>2005-09-13</strong> <a href="#" onClick="toggle(nyhet1);goSetHeight();">Nya
avgifter på trafik</a>
<div id="nyhet1" class="news" onClick="nyhet1.style.display='none'" title="Klicka för att stänga nyheten!">
<strong><img src="images_tour/form/form_news_close.gif" width="10" height="9" hspace="0" vspace="0" border="0" style="float:right;margin-right:-5px; margin-top:-5px;">Nyhet
1</strong><br>
Lor illum qui tions enim ipsustio od del diam aci blam ing et
ulputate voloboreet dolorper sustincil et vulluptat lut nos euisl
utpat nonsenim vero del exerci etue minim duisit luptat. Dolore
modolore min ut dolenibh et ercilis exeraessi.</div></td>
</tr>
<tr>
<td align="center" style="width:100%; height:2px; background-color='#E3EAF4'"></td>
</tr>
<tr onMouseOver="this.style.backgroundColor='#E3EAF4'" onMouseOut="this.style.backgroundColor='white'">
<td valign="top"> <strong>2005-09-10</strong> <a href="#" onClick="toggle(nyhet2);goSetHeight()">Nya
pass till hösten</a>
<div id="nyhet2" class="news" onClick="toggle(nyhet2)" title="Klicka för att stänga nyheten!">
<strong><img src="images_tour/form/form_news_close.gif" width="10" height="9" hspace="0" vspace="0" border="0" style="float:right;margin-right:-5px; margin-top:-5px;">Nyhet
2</strong><br>
Quat prat, susci tis aliquis nis dolore velit, sustrud dolor sit
wisi ercillan et nulluptatio dolore cor sim diam ing exer accum
adion veliqui bla feum duissectet volut am ing eugue tate tat
lore cor adigna facil dolenit, conse elenim er augue do dolenisim
vel dunt lum zzrilla am, quat.<br>
</div></td>
</tr>
</table>
</div></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
</html>