Js + php = błędy Opcje

[primo]

Witam,

połączyć js + php to dla mnie męka pańska. Dlatego też zwracam się do Was z prośbą, abyście oblukali co w tym kodzie jest nie tak. Mnie już pomysłów brak.

To jest ok kod Js:

[PHP] pobierz, plaintext 
<?php
function highlight(a){
  document.all['list_l'+a].style.backgroundColor='#6a8c94';
  document.all['list_d'+a].style.backgroundColor='#5c8189';
  document.all['list_e'+a].style.backgroundColor='#6a8c94';
}
function dehighlight(a){
  document.all['list_l'+a].style.backgroundColor='#5c8189';
  document.all['list_d'+a].style.backgroundColor='#3d6b75';
  document.all['list_e'+a].style.backgroundColor='#5c8189';
}
?>
[PHP] pobierz, plaintext 

[PHP] pobierz, plaintext 
<?php
<tr>
<td class="list_dark" onmouseover=&#092;JavaScript: highlight();\" onmouseout=\"JavaScript: dehighlight();\" id="list_d0" bgcolor=#3d6b75 width=40 valign=middle align=right><font class="list_date"><nobr>'.++$zliczanie.'</nobr></font></td>
<td class="list_light" onmouseover=&#092;"JavaScript: highlight();\" onmouseout=\"JavaScript: dehighlight();\" id="list_" bgcolor=#5c8189 width=468 align=left valign=middle><font class="list_o_title"><a class="list_title" href="index.php?op=5&id='.$this_id.'">'.$tytul_pl.'</font><br><font class="list_o_title">'.$tytul_ang.'</font></td></a>
</tr>
</table>
</td>
<td class="list_light" onmouseover=&#092;"JavaScript: highlight();\" onmouseout=\"JavaScript: dehighlight();\" id="list_e0" rowspan=2 bgcolor=#5c8189 width=50 valign=middle align=right>
 echo '<img src="images/'.$nosnik_vhs.'" border=0 width=23 height=21><img src="images/'.$nosnik_dvd.'" border=0 width=23 height=21>';?></td>
<td bgcolor=#FFCC66 width=4 valign=top><img src="images/list_corner_2.gif" width=4 height=4></td>
 
</tr>
[PHP] pobierz, plaintext 

zgodnie z definicją funkcji oczekuje jakiegoś obiektu, ale nie mam pojęcia co ma nim być

Ten post edytował primo 10.02.2006, 20:09:59

[revyag]

Po pierwsze masz bałagan w kodzie, popraw sobie.
Po drugie używaj document.getElementById() zamiast document.all
Po trzecie wywołujesz funkcje bez parametru, a w definicji funkcji on jest.

[primo]

ten bałagan wtargnął tylko tutaj, coś się przeformatowało przy wrzucaniu do bazy.
document.getElementById() to mam zmienić w ciele funkcji jak rozumiem -- może jakiś link do opisu tej funkcji kolega ma
zielonego pojęcia nie mam co powinno być argumentem tej funkcji.

[Fipaj]

no, to chyba oczywiste. ID elementu :]
i używaj poprawnego bbcode

Kod

document.getElementByID("idmojegoelementu").costamcostam

strasznie leniwy jesteś ;]

[revyag]

Wygląda to tak jakby ta tabelka była generowana jakąś funkcją. Pokaż jej kod. To ona jest odpowiedzialna za wstawianie do zdarzenia onclick funkcji highlight i dehighlight i robi to źle.
W zdarzeniach onclick nie trzeba stosować konstrukcji:

[HTML] pobierz, plaintext 
onclick="javascript:funkcja()"
[HTML] pobierz, plaintext 

wystarczy tyle:

[HTML] pobierz, plaintext 
onclick="funkcja()"
[HTML] pobierz, plaintext 

Poza tym używaj odpowiedniego bbcode, do javascript CODE.

Używając getElementById byłoby to tak:

Kod

function highlight(a) {
    document.getElementById('list_l'+a).style.backgroundColor='#6a8c94';
    document.getElementById('list_d'+a).style.backgroundColor='#5c8189';
    document.getElementById('list_e'+a).style.backgroundColor='#6a8c94';
}

[primo]

najmocniej przepraszam za swoje niedbalstwo. Poprawię się.

oto ten kod:

[PHP] pobierz, plaintext 
<?php
echo'<center><font class="list_header">Lista tytułów w kategorii akcja - sztuk ('.ile_z_gatunku('akcja','tak').')</font><br><img src="images/gray_a6b8bd.gif" width=100 height=3></center>';
$zliczanie= 0;
$zliczanie = $page * 20;
while($row = $bd->pobierzTablice())
{
$this_id = $row[0];
$tytul_pl = $row[1];
$tytul_ang = $row[2];
$okladka = $row[4];
$aktorzy = $row[5];
$aktorzy = explode(', ', $aktorzy);
$foto=$row[4];
$name=$row[4];
 
$nosnik_dvd = ($row[8] == 'tak') ? 'dvd_mini.gif' : 'blank.gif';
$nosnik_vhs = ($row[9] == 'tak') ? 'vhs_mini.gif' : 'blank.gif';
?>
[PHP] pobierz, plaintext 

później jest już tylko html i ta odrobina kodu Js.

Wygląda to tak jakby ta tabelka była generowana jakąś funkcją. Pokaż jej kod. To ona jest odpowiedzialna za wstawianie do zdarzenia onclick funkcji highlight i dehighlight i robi to źle.

też tak myślę, ale nie mam pojęcia co na to poradzić, kompletnie nie kumam o co chodzi z tym ID elementu. Nigdy czegoś takiego nie nadawałem w kodzie.

[revyag]

Ten kod nie generuje tabelki. Chyba sam to widzisz.

[primo]

[PHP] pobierz, plaintext 
<?php
echo'<table border=0 cellpadding=0 cellspacing=0 width=578>
 
<tr>
<td bgcolor=#FF9900 width=4 valign=top><img src="images/list_corner_dark_1.gif" width=4 height=4></td>
<td bgcolor=#FFCC66 width=520 rowspan=2>
<table border=0 cellpadding=3 cellspacing=0>
<tr>
<td class="list_dark" onmouseover=\"highlight(a);\" onmouseout=\"dehighlight(a);\" id="list_d'.$zliczanie.'" bgcolor=#3d6b75 width=40 valign=middle align=right><font class="list_date"><nobr>'.++$zliczanie.'</nobr></font></td>
<td class="list_light" onmouseover=\"highlight(a);\" onmouseout=\"dehighlight(a);\" id="list_l'.$zliczanie.'" bgcolor=#5c8189 width=468 align=left valign=middle><font class="list_o_title"><a class="list_title" href="index.php?op=5&id='.$this_id.'">'.$tytul_pl.'</font><br><font class="list_o_title">'.$tytul_ang.'</font></td></a>
</tr>
</table>';
 
?>
[PHP] pobierz, plaintext 

[HTML] pobierz, plaintext 
</td>
<td class="list_light" onmouseover=\"highlight(a);\" onmouseout=\"dehighlight(a);\" id="list_e" rowspan=2 bgcolor=#5c8189 width=50 valign=middle align=right><?php echo '<img src="images/'.$nosnik_vhs.'" border=0 width=23 height=21><img src="images/'.$nosnik_dvd.'" border=0 width=23 height=21>';?></td>
<td bgcolor=#FFCC66 width=4 valign=top><img src="images/list_corner_2.gif" width=4 height=4></td>
 
</tr>
<tr>
<td bgcolor=#FF9900 width=4 valign=bottom><img src="images/list_corner_dark_3.gif" width=4 height=4></td>
<td bgcolor=#FFCC66 width=4 valign=bottom><img src="images/list_corner_4.gif" width=4 height=4></td>
</tr>
<tr><td colspan=4 bgcolor=#FFFFCC height=1></td></tr></td></tr></table>
[HTML] pobierz, plaintext 

wprowadziłem małe zmiany.

Funkcja oczekuje argumentu, a więc dostarczam go:

Kod

onmouseover="highlight('.$a.');" onmouseout="dehighlight('.$a.');" id="list_d'.$a.'"
onmouseover="highlight('.$a.');" onmouseout="dehighlight('.$a.');\" id="list_l'.$a.'"
onmouseover="highlight('.$a.');" onmouseout="dehighlight('.$a.');" id="list_e'.$a.'"

gdzie:

[PHP] pobierz, plaintext 
<?php
$a = 0;
$a = ++$a;
?>
[PHP] pobierz, plaintext 

ale nadal występują błędy Js:

'document.getElementById[...]style' - jest pusty lub nie jest obiektem

co to oznacza

Ten post edytował primo 10.02.2006, 21:21:33

[revyag]

Wiesz co ten kod jest straszny
Podam Ci kawałek kodu dla jednej kolumny, bo nie chce wszystkiego wklejać. Reszta analogicznie.
Według mnie powinno być tak:

[PHP] pobierz, plaintext 
<?php
echo '<td class="list_dark" onmouseover=\"highlight('.$zliczanie.');\" ';
?>
[PHP] pobierz, plaintext 

[primo]

jak widzisz doszliśmy do takich samych wniosków w tym samym momencie, jednakże co z elementem id Do niego też powinien być przekazywany argument Czy ktoś coś z tego rozumie

[revyag]

1. Podaj cały błąd, który konsola js wyrzuca.
2. Zmień $a na this

[PHP] pobierz, plaintext 
<?php
echo 'onmouseover=\"highlight(this);\"';
?>
[PHP] pobierz, plaintext 

[primo]

oprócz tego:
'document.getElementById[...]style' - jest pusty lub nie jest obiektem
zwraca tylko wiersz, znak i url - ale nic to nie mówi odnośnie skryptu.

Po zmiania na this: onmouseout="dehighlight('.this.');" -- nie zwróciło nic. Za każdym razem sprawdzam kod wygenerowany i this nic nie zwraca, a $a zwraca wszędzie - odnośnie tego samego tytułu - cyfrę. Kolejny tytuł o 1 wyżej.

[revyag]

....
napisz tak jak podalem.
this - w javascript wskazuje na aktualny element, a potraktowałeś to jako zmienną, w dodatku nieprawidłowo zapisaną, php.
Jak nie pyknie to odezwij się do mnie na gg, bo tu czata nie będziemy robić.

[primo]

Reasumując.

Coś drgnęło i poszło do przodu. Wprawdzie nie zgodnie z podsuniętymi wskazówkami, ale bez nich ani rusz. Co teraz mamy:

Kod

function highlight(a){
    document.getElementById(a).style.backgroundColor = '#FFFFCC';
    document.getElementById(a).style.backgroundColor = '#FFCC66';
    document.getElementById(a).style.backgroundColor = '#FFFFCC';
}
function dehighlight(a){
  document.getElementById(a).style.backgroundColor='#FFCC66';
  document.getElementById(a).style.backgroundColor='#003399';
  document.getElementById(a).style.backgroundColor='#FFCC66';
}

to raz.

[PHP] pobierz, plaintext 
<?php
<a href="index.php?op=5&id='.$this_id.'" title="Zobacz stronę filmu: '.$tytul_pl.'"><td class="list_dark" onmouseover="highlight(id)" onmouseout="dehighlight(id)" id="list_d'.$a.'" bgcolor=#FF9900 width=40 valign=middle align=right><font class="list_date"><nobr>'.++$zliczanie.'</nobr></font></td>
<td class="list_light" onmouseover="highlight(id)" onmouseout="dehighlight(id)" id="list_l'.$a.'" bgcolor=#FFCC66 width=468 align=left valign=middle><a href="index.php?op=5&id='.$this_id.'" title="Zobacz stronę filmu: '.$tytul_pl.'" class="list_title" title="Zobacz stronę filmu: '.$tytul_pl.'"">'.$tytul_pl.'</a><br><font class="list_o_title">'.$tytul_ang.'</font></td></a>
?>
[PHP] pobierz, plaintext 

Według mnie już jest ok. Z tym, że nie mam pojęcia dlaczego zaczyna to działać tylko i wyłącznie wtedy, gdy zmienną w funkcji Js jest w nawiasie (id). Nie zadziałało, gdy dałem this. W takiej postaci działa, jednakże podświetla tylko jedną komórkę tabeli (1 z lewej się podświetla, jednakże nie wraca do koloru przed zmianą).
Nie ma błędów Js teraz. Co zrobić, aby id="list_c'.$a.'" było przekazywane jako wartość argumentu do id

[Alkagar]

Witam,
na JS to ja sie bardzo nie znam ale mam taką małą sugestie

Kod

document.getElementById(a).style.backgroundColor = '#FFFFCC';
document.getElementById(a).style.backgroundColor = '#FFCC66';
document.getElementById(a).style.backgroundColor = '#FFFFCC';

Ten kod nie ma za bardzo sesu wedlug mnie i na pewno nie bedzie dzialal tak jak trzeba gdyż zmienia on kolor jednego elementy trzy raz wiec zobaczyc bedziesz mogl tylko ostatnia zmiane.

To takie moje przemyślenia na szybko, nie wiem czy jeszcze potrzebne bo dawno nikt nic tu nie pisal, ale....


I przy okazji mam pytanie tez wynikające z problemów połączenia php i JS.

Do bazy danych zapisuje tekst z pola 'textarea' i jest wszystko pieknie. Po wyswietleniu tego na ekranie mam wszystko w jednej lini i tez jest dobrze ale problem jest gdy patrze do źrodła - tam mam każdą linie w nowej lini. Dodam że tą zmienna potrzebuje przekazać jako prarametr funkcji w JS i tu jest problem bo z tego co zauwazylem to w źrodle dzieli mi ta zmienna na linie i wywala oczywiście błąd. Czy jest możliwość sformatowania tego tekstu w taki sposob by był on wyswietlany w jednej lini nawet w zrodle?
Ewentualnie wymyslilem ze można by zakodować tą zmienną funkcja base64_encode() i wtedy dobrze przekazuje do funkcji tylko ze nie moge jej w JS-ie odkodowac, nie wiem czy sa nawet jakieś funkcje kodujące w JS :-(.
Jestem otwarty na wszelkie sugestie.

Pozdrawiam,
Alk

[primo]

zgadza się - skrypt zmienia kolor 3 razy - odbywa się to w 3 komórkach na raz i stąd 3-krotność.
Problem nadal aktualny.

[Alkagar]

Napisałem ci taką małą pomoc, mam nadzieje że naprowadzi cie na 'trop' tego co potrzebujesz bo osobiście nie do końca rozumie co chcesz zrobić . Co do tego zmieniania koloru to Ty zmieniasz tym kodem trzy razy kolor tego samego elementu czy taki sam efekt osiagniesz jak zastosujesz tylko ostatnie polecenie.

Kod

<script language="JavaScript">
function hightlight(a, b)
{    
    document.getElementById(a).style.backgroundColor = b;
}
</script>
//Zastosowanie w czystym HTML-u
<table>
<tr><td onMouseOver="hightlight('wiersz1', 'red');" onMouseOut="hightlight('wiersz1', 'blue');" id='wiersz1'>Tekst Pierwszy</td></tr>
<tr><td onMouseOver="hightlight('wiersz2', 'red');" onMouseOut="hightlight('wiersz2', 'blue');" id='wiersz2'>Tekst Drugi</td></tr>
</table>


//Zastosowanie w php
<?
echo('<table>');
for($i=1; $i<5; $i++)
{
    echo("<tr id='co".$i."' onMouseOver=\"hightlight('co".$i."', 'red');\" onMouseOut=\"hightlight('co".$i."', 'green');\" ><td > Costam co chcesz</td></tr>");    
}
echo('</table>');
?>

Zastosowalem tutaj jedną funkcje bo tak mi sie wydaje ze ladniej wyglada . Nie jest to napisane bardzo pro ale w kazdym razie działa

Mam nadzieje że troche pomogłem
Pozdrawiam,
Alk

[primo]

dzięki wielkie za podpowiedź, ale nie skorzystałem.

Udało się wg mojego planu. Oto rozwiązanie:

Kod

function highlight(a){
 document.all['list_l'+a].style.backgroundColor='#FFFFCC';
 document.all['list_d'+a].style.backgroundColor='#FFCC66';
 document.all['list_e'+a].style.backgroundColor='#FFFFCC';
}
function dehighlight(a){
 document.all['list_l'+a].style.backgroundColor='#FFCC66';
 document.all['list_d'+a].style.backgroundColor='#FF9900';
 document.all['list_e'+a].style.backgroundColor='#FFCC66';
}

jak widać wróciłem do starego sposobu.

A oto co zmieniłem w kodzie php:

[PHP] pobierz, plaintext 
<?php
 
<a href="index.php?op=5&id='.$this_id.'" title="Zobacz stronę filmu: '.$tytul_pl.'"><td class="list_dark" onmouseover="highlight('.$a.')" onmouseout="dehighlight('.$a.')" id="list_d'.$a.'" bgcolor=#FF9900 width=40 valign=middle align=right><font class="list_date"><nobr>'.++$zliczanie.'</nobr></font></td>
<td class="list_light" onmouseover="highlight('.$a.')" onmouseout="dehighlight('.$a.')" id="list_l'.$a.'" bgcolor=#FFCC66 width=468 align=left valign=middle>...
... echo'<td class="list_light" onmouseover="highlight('.$a.')" onmouseout="dehighlight('.$a.')" id="list_e'.$a.'" rowspan=2 bgcolor=#FFCC66 width=50 valign=middle align=right>...
?>
[PHP] pobierz, plaintext 

a oto efekt mych starań: EFEKT STARAŃ

w ie działa, nad firefox pracuę.

Ten post edytował primo 13.02.2006, 16:56:47