Knyta samman PHP och JavaScript

6 svar · 510 visningar · startad av kicki_an 15 sep. 2005

kicki_anMedlem sedan jan. 200556 inlägg

15 sep. 2005 09:01#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>

Peter SMedlem sedan dec. 20025 484 inlägg

15 sep. 2005 09:25#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?

kicki_anMedlem sedan jan. 200556 inlägg

15 sep. 2005 12:50#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>

Peter SMedlem sedan dec. 20025 484 inlägg

15 sep. 2005 14:02#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>

kicki_anMedlem sedan jan. 200556 inlägg

15 sep. 2005 14:39#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\""; 
		} 
	} 
?>
}

Peter SMedlem sedan dec. 20025 484 inlägg

15 sep. 2005 14:45#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>

kicki_anMedlem sedan jan. 200556 inlägg

15 sep. 2005 15:07#7

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