Ako neko ima vremena i volje da mi pomogne sa sledecim problemom.
Skoro sam poceo da radim jedan sajt koristeci AJAX tehnologiju.
Evo dokle sam stigao:
E sad, sajt lepo radi sa IE i Mozzilom ali sa Operom radi samo delimicno.
Bice vam jasnije ako otvorite sajt sa gornjim Browserima i klknete na neki od poteza sa desne strane.
IE i Mozzila lepo izbacuju tekst o otvaranjima sa leve strane (ispod table), medjutim Opera nece.
ovo je kod cele stranice. Izvinjavam se sto je malo duzi.
<html>
<head>
<title>GensUnaSumus.com - Full Access to Biggest Online Chess Database Only Here</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<LINK href="../images/stil.css" type=text/css rel=stylesheet>
<style type="text/css">
<!--
.style4 {color: #993300}
.style5 {color: #996633}
.style7 {color: #999966}
-->
</style>
<script src="../images/dinmeni.js"></script>
<SCRIPT TYPE="text/javascript" LANGUAGE="javascript">
var aktivan = 0;
window.onload = init;
function init() {
if (window.Event) {
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = getXY;
}
</script>
<script language="javascript">
var od = false;
var slika = "";
var pami, pamj;
var helpzaglavlje = false;
function PotezPocetak(i, j)
{
var tabla = document.getElementById("tabla");
var vrste = tabla.getElementsByTagName("tr");
var kolona = vrste[j].getElementsByTagName("td");
if (!od)
{
od = true;
slika = kolona.innerHTML;
pami = i;
pamj = j;
}
else
{
od = false;
kolona.innerHTML = slika;
kolona = vrste[pamj].getElementsByTagName("td");
kolona[pami].innerHTML = " ";
}
//alert(kolona.innerHTML);
}
function NapraviHelpZaglavlje()
{
var tabla = document.getElementById("helpzaglavlje").getElementsByTagName("tbody")[0];
var vrste = document.createElement("TR");
var kolona1 = document.createElement("TD");
// kolona1.setAttribute("colSpan",2);
kolona1.setAttribute("align","left");
kolona1.setAttribute("bgColor","#F69D9D");
kolona1.innerHTML = " <a href='javascript:history.back();'><img src='../images/back.gif' border=0>One move back</a> | <a href='explorer.php'><img src='../images/new.gif' border=0>Reset</a>";
var kolona2 = document.createElement("TD");
kolona2.setAttribute("align","right");
kolona2.setAttribute("bgColor","#F69D9D");
kolona2.innerHTML ="<a href='ex_help.php'><img src='../images/help.gif' border=0>Help</a> ";
var vrste2 = document.createElement("TR");
var kolona21 = document.createElement("TD");
kolona21.setAttribute("height",1);
kolona21.setAttribute("bgColor","#000000");
kolona21.setAttribute("colSpan",2);
vrste.appendChild(kolona1);
vrste.appendChild(kolona2);
vrste2.appendChild(kolona21);
tabla.appendChild(vrste);
tabla.appendChild(vrste2);
helpzaglavlje = true;
}
function ObrisiTabelu()
{
var tabla = document.getElementById("unosubazu");
var vel = tabla.rows.length;
for(i=0;i<vel-3;i++)
{
tabla.deleteRow(-1);
}
tabla = document.getElementById("unosubazu").getElementsByTagName("tbody")[0];
var vrste = document.createElement("TR");
var kolona = document.createElement("TD");
kolona.setAttribute("colSpan",3);
kolona.setAttribute("align","center");
kolona.innerHTML = "<span class='txt'>Searching...Please Wait</span>";
vrste.appendChild(kolona);
tabla.appendChild(vrste);
var tabla = document.getElementById("ecokodtabela");
var vel = tabla.rows.length;
for(i=0;i<vel;i++)
{
tabla.deleteRow(-1);
}
}
</script>
<!-- AJAX script --->
<script type="text/javascript">
//var url = "resiphp.php"; // The server-side script
var br_poteza = 1;
var id_pred_fen = -1;
var navig = 1;//1 partije - 2 eco
function handleHttpResponse()
{
if (http.readyState == 4)
{
if(http.status==200)
{
var results=http.responseText;
if (navig == 1)//
{
ObradiRezultat(results);
return;
}
if (navig == 2)//
{
ObradiRezultatECO(results);
return;
}
}
}
}
function Start(id_pr_fen, nav)
{
navig = nav;
if (id_pr_fen != -1 && nav == 1)
{
ObrisiTabelu();
if (!helpzaglavlje) NapraviHelpZaglavlje();
}
if (nav == 1)//
{
url = "resiphp.php?br_poteza="+br_poteza+"&id_pred_fen="+id_pr_fen;
id_pred_fen = id_pr_fen;
}
if (nav == 2)//
{
url = "resiphpECO.php?br_poteza="+br_poteza+"&id_pred_fen="+id_pr_fen;
}
http.open("GET", url, true);
http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
http.onreadystatechange = handleHttpResponse;
http.send(null);
}
function getHTTPObject()
{
var xmlhttp;
try
{
xmlhttp = new XMLHttpRequest();
// xmlhttp.overrideMimeType('text/xml');
}
catch (trymicrosoft)
{
try
{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (othermicrosoft)
{
try
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (failed)
{
xmlhttp = false;
}
}
}
if (!xmlhttp)
alert("Error initializing XMLHttpRequest!");
return xmlhttp;
}
var http = getHTTPObject(); // We create the HTTP Object
</script>
<script language="javascript">
function ObradiRezultat(rez)
{
var tabla = document.getElementById("unosubazu");
var vel = tabla.rows.length;
if (vel > 3)
tabla.deleteRow(-1);
var nizpovrstama=rez.split("#");
for(i=0;i<nizpovrstama.length-1;i++)
{
nizpokolonama=nizpovrstama.split("*");
DodajUTabelu(nizpokolonama[0], nizpokolonama[1], nizpokolonama[2], nizpokolonama[3]);
}
br_poteza = br_poteza + 1;
// alert(id_pred_fen);
if (id_pred_fen != -1)
Start(id_pred_fen, 2);
}
function ObradiRezultatECO(rez)
{
var tabla = document.getElementById("ecokodtabela");
var vel = tabla.rows.length;
var nizpovrstama=rez.split("#");
for(i=0;i<nizpovrstama.length-1;i++)
{
nizpokolonama=nizpovrstama.split("*");
DodajUECOTabelu(nizpokolonama[0], nizpokolonama[1], nizpokolonama[2]);
}
var tabla = document.getElementById("ecokodtabela").getElementsByTagName("tbody")[0];
var vrste = document.createElement("TR");
var kolona1 = document.createElement("TD");
kolona1.setAttribute("bgColor", "#000000");
kolona1.setAttribute("height",1);
kolona1.setAttribute("colSpan",2);
vrste.appendChild(kolona1);
tabla.appendChild(vrste);
}
</script>
<!-- kraj AJAX script --->
<script language="javascript">
function DodajUTabelu(move, number, result, pred_fen)
{
if (move == "1-0" || move == "0-1" || move == "1/2")
return;
while(document.getElementById("unosubazu") == null)
{
window.setTimeout('DodajUTabelu(move, number, result, pred_fen)', 100);
}
if (br_poteza%2 == 0)
{
tackice = ". . . ";
br_za_prikaz = Math.floor(br_poteza/2);
}
else
{
tackice = ". ";
br_za_prikaz = Math.floor(br_poteza/2)+1;
}
if (move.charAt(0) == 'R') move = move.replace("R", "<img src='../images/R.gif' border=0 width=14 height=14> ");
if (move.charAt(0) == 'N') move = move.replace("N", "<img src='../images/N.gif' border=0 width=14 height=14> ");
if (move.charAt(0) == 'B') move = move.replace("B", "<img src='../images/B.gif' border=0 width=14 height=14> ");
if (move.charAt(0) == 'Q') move = move.replace("Q", "<img src='../images/Q.gif' border=0 width=14 height=14> ");
if (move.charAt(0) == 'K') move = move.replace("K", "<img src='../images/K.gif' border=0 width=14 height=14> ");
var tabla = document.getElementById("unosubazu").getElementsByTagName("tbody")[0];
var vrste = document.createElement("TR");
var kolona1 = document.createElement("TD");
kolona1.setAttribute("height", "25");
kolona1.setAttribute("align","left");
var kolona2 = document.createElement("TD");
kolona2.setAttribute("height", "25");
kolona2.setAttribute("align","center");
var kolona3 = document.createElement("TD");
kolona3.setAttribute("height", "25");
kolona1.innerHTML = "<a href='javascript:Start("+pred_fen+", 1);'>"+br_za_prikaz+tackice+move+"</a>";
kolona2.innerHTML = "<span class='BodyText'>"+number+"</span>";
var nizpobporner = result.split("-");
var pob = parseInt(nizpobporner[0]);
var ner = parseInt(nizpobporner[1]);
var por = parseInt(nizpobporner[2]);
1. kod koji si postavio je neupotrebljiv zato što nije ubačen u [ code ] [ /code ] tagove, tako da je forum renderovao slovo 'i' u uglastim zagradama kao italic
2. nisi napisao šta treba da se desi kada kliknemo na potez sa desne strane.. konkretno meni u operi 8.54 radi neko učitavanje ajaxom ali ako ne opišeš grešku, onda ne znam šta da gledam
Predložio bih ti da, ako kačiš cele stranice, to dodaš kao fajl uz poruku, a da samo bitne isečke izdvojiš na forumu u code tagovima.
Ovako su male šanse da se neko uopšte potrudi da pogleda nepreglednu dugačku poruku koju si poslao, koja uzgred sadrži kod koji ne radi zbog onoga što sam pomenuo pod 1.
Sve to bi znao da si pročitao pravilnik, tačka 8. pominje ovo što sam rekao pod 1.
Gojko Vujovic:
2. nisi napisao šta treba da se desi kada kliknemo na potez sa desne strane.. konkretno meni u operi 8.54 radi neko učitavanje ajaxom ali ako ne opišeš grešku, onda ne znam šta da gledam
Potrebno je da ti izbaci spisak otvaranje ispod sahovske table.
Ok, vidim da dodaješ html elemente on the fly, ali to će ti doneti mnogo problema sa crossbrowser kompatibilnošću, a da ne pominjemo ako kasnije poželiš da izmeniš html kod, vrlo lako može da se desi da ceo taj javascript prestane da radi.
Mnogo elegantnija opcija je korišćenje skrivenih layera kojima dodaješ sadržaj po potrebi izmenom innerhtml property-ja, i menjaš vidljivost css-om. Pogledaj kako na ES-u radi box za privatnu poruku.. mnogo jednostavnije, a upravo funkcionalnost koja ti treba. Gledam tvoj kod i dođe mi žao vremena koje si uložio praveći javascriptom tabelu, setujući elemente, itd. Bolje da imaš php backend koji vraća kao rezultat gotovu tabelu, a ti je u javascriptu samo ubacuješ u sadržaj layera i prikažeš taj layer po potrebi.
Grešku po meni ne treba tražiti u određenoj liniji tvog koda, već u pristupu kojim si krenuo da radiš to u javascriptu. Može to mnogo jednostavnije.
Zeleo sam namerno da php izbaci samo gole podatke.
Racunam, manje podataka za prenos brzi sajt (mada nisam neki ekspert).
Mozda si u pravu za css ali ne snalazim se bas najbolje sa layerima pa mi je lakse da koristim tabele.
Evo kako sam bio zamislio rad sajta.
Posle klika na recimo 1.e4 startuje se f-ja Start() koja startuje resiphp.php koji daje podatke o sledecim potezima
i tada se formira tabela sa desne strane sahovske table. To radi kako treba. Po formranju te tabele ponovo se startuje
f-ja Start() koja treba da startuje skript resiphpeco.php. E ja mislim da tu dolazi do neke greske jer mi nista ne vraca kao rezultat a zasto ne znam. Koristeci alert() dosao sam do zakljucka da skript ne vraca http.readyState == 4.
Ne znam da li si rešio problem. Sada sam skinuo Opera 9 i setio se da ovo testiram, jer sam bio ovo testirao u Operi 8 nije radilo ni učitavanje ni desnog ni levog menija, uklanjanjem slanja headera proradilo je, ali sada vidim u Operi 9 ne radi levi meni, pokušaj tako što ćeš XMLHttpRequest objekat kreirati u okviru Start funkcije, dakle pre http.open() dodaj:
Code:
http = getHTTPObject();
kako bi se resetovao prethodni zahtev, mada čini mi se da bi to trebalo sa abort() (http.abort()), nisam siguran.