webForumDet fria alternativet
Logga in / Bli medlem

Knyta samman PHP och JavaScript

PHP

6 svar · 512 visningar · startad av kicki_an

Medlem sedan jan. 200556 inlägg
Trådstart#1

Hejsan!

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>

Medlem sedan dec. 20025 483 inlägg
#2

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?

Medlem sedan jan. 200556 inlägg
#3

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>&nbsp;<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">&nbsp;</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> &nbsp; &nbsp; <a href="#" onClick="toggle(nyhet1);goSetHeight();">Nya 
avgifter p&aring; 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> &nbsp; &nbsp; <a href="#" onClick="toggle(nyhet2);goSetHeight()">Nya 
pass till h&ouml;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>&nbsp;</td>
</tr>
</table>
</body>
</html>
Medlem sedan dec. 20025 483 inlägg
#4

Om vi antager att antalet nyheter läses in i variabeln $antal, då

<script type="text/javascript">

function setDisplay()
{
<?
$antal = 10;

for ($i = 0; $i < $antal; ++$i){
    echo " nyhet" . $i . ".style.display = ";
    if (($i + 1) % $antal != 0){
		echo "\n\t";
    } else {
		echo "\"none\"";
    }
}
?>

}
</script>
Medlem sedan jan. 200556 inlägg
#5

Hejsan!

Lysande, precis vad jag var ute efter, men tyvärr resulterar mina försök att använda det i att det blir "fel på sidan".

Kan du se vad felet är i min kod...?

function setDisplay()  //sätter none på alla så man slipper kolla fler gånger ovan
{
	<? 
	$check_news = mysql_query("SELECT * FROM news WHERE status='1'") or die ("Error: " . mysql_error());
	$antal=mysql_num_rows($check_news);

	for ($i = 0; $i < $antal; ++$i)
	{ 
		echo " nyhet" . $i . ".style.display = "; 
		if (($i + 1) % $antal != 0)
		{ 
			echo "\n\t"; 
		} else 
		{ 
			echo "\"none\""; 
		} 
	} 
?>
}
Medlem sedan dec. 20025 483 inlägg
#6

Möjligtvis att det inte finns någon nyhet0. Då

<script type="text/javascript">

function setDisplay()
{
<?
$check_news = mysql_query("SELECT * FROM news WHERE status='1'") or die ("Error: " . mysql_error());
$antal=mysql_num_rows($check_news); 

for ($i = 1; $i <= $antal; ++$i){
    echo " nyhet" . $i . ".style.display = ";
    if ($i % $antal != 0){
		echo "\n\t";
    } else {
		echo "\"none\"";
    }
}
?>

}
</script>
Medlem sedan jan. 200556 inlägg
#7

Du är ju lysande!
Allt fungerar enormt bra nu tack vare dig!!!

268 ms totalt · 4 externa anrop · v20260731065814-full.51f67c91
127 ms — deklarationer (db)
0 ms — hämta statistik (cache)
138 ms — hämta tråd, inlägg och bilagor (db)
126 ms — ändringar (db)