pravim nekakvu web aplikaciju koja radi u kombinaciji PHP-a i JavaScripta, a oslanja se na AJAX. ono što mi nije jasno je kako napraviti čuveni "Loading..." efekt (poput Gmaila). u kom trenutku prikazati taj DIV, a kad ga ukloniti? na koje događaje da obratim pažnju? hvala!
efekat "Loading..."
Zaključano
Zakačeno
U neki elemenat(npr. div) staviš tekst "loading" i menjaš mu css osobunu dislay (block/none) ili visibility (visible/hidden), ukoliko želiš da imaš i efekat kao da se taj elemenat uvećava, u određenim intervalima menjaj width elementa. Elemenat prikazuj kada korisnik klikne na neku akciju, a ukloni ga kada se ta akcija završi, možeš dodati i npr. da se po završetku akcije promeni tekst u elementu (označi da je akcija završena) i/ili promeni boja elementa i pritom možeš napraviti malu pauzu u uklanjanju elementa, zatim možeš napraviti i signaliziranje greške...
Jednostavnije možeš napraviti neku sliku (animaciju) i njoj menjati display ili visibility osobine.
Jednostavnije možeš napraviti neku sliku (animaciju) i njoj menjati display ili visibility osobine.
Potpis
Banned - Not available
Ja sam video na nekim mestima, dok pise loading, sadrzaj ispod se ne moze selektovati.
Koja je teorija?
Koja je teorija?
Potpis
routing protocols enable routers to route routed protocols!
izmenjeno 1 put, poslednji put Br@nkoR 10.03.2006. u 14:11
Izmene poruke
- Br@nkoR10.03.2006. u 14:11zapis iz teksta poruke
Nisam ima prilike da vidim to, ali verovatno koriste nešto kao one skripte za zabranu selektovanja teksta:
Ja sam uglavnom radio ukoliko je forma u pitanju da disable-ujem je (u toku izvršenja neke akcije).
Code:
<body onselectstart="return false;" onmousedown="return false;" ...
<body onselectstart="return false;" onmousedown="return false;" ...
Ja sam uglavnom radio ukoliko je forma u pitanju da disable-ujem je (u toku izvršenja neke akcije).
Potpis
Banned - Not available
izmenjeno 1 put, poslednji put lukeguy 10.03.2006. u 15:40
Izmene poruke
- lukeguy10.03.2006. u 15:40zapis iz teksta poruke
okej, to mi je jasno što se tiče animiranja DIV elementa na stranici preko JS-a. ono što i dalje ne razumem je na koju konkretno akciju treba da obratim pažnju?
konkretno, želim da pomoću XML HTTP Request objekta dobijem neke podatke iz baze na osnovu kojih će javascript dinamički generisati neke DIV elemente, a da "Loading..." stoji od trenutka kad krene refresh tog dela stranica, pa sve dok elementi ne budu prikazani. pretpostavljam da se DIV prikazuje u trenutku klika na "refresh", ali kada nestaje? koji događaj signalizira da je učitavanje gotovo i da su elementi prikazani? ako sakrijem DIV na kraju JS sekcije (poslednja linija tog bloka u skriptu), da li to garantuje i da je browser u tom trenutku završio sa iscrtavanjem stranice, tj. da su svi elemenit prikazani kako valja i na svom mestu? (nešto poput onload događaja za window...)
konkretno, želim da pomoću XML HTTP Request objekta dobijem neke podatke iz baze na osnovu kojih će javascript dinamički generisati neke DIV elemente, a da "Loading..." stoji od trenutka kad krene refresh tog dela stranica, pa sve dok elementi ne budu prikazani. pretpostavljam da se DIV prikazuje u trenutku klika na "refresh", ali kada nestaje? koji događaj signalizira da je učitavanje gotovo i da su elementi prikazani? ako sakrijem DIV na kraju JS sekcije (poslednja linija tog bloka u skriptu), da li to garantuje i da je browser u tom trenutku završio sa iscrtavanjem stranice, tj. da su svi elemenit prikazani kako valja i na svom mestu? (nešto poput onload događaja za window...)
OK, ajde ovako, ne znam kako ti izgleda kod, ali..
Imaš tvoj div:
Korisnik klikne na neki link(buttom) i pritom poziva određenu js funkciju u toj funkciji ti kreiraš XMLHttpRequest objekat. Pre nego što se objekat kreira (može i posle) ti promeniš display osobinu div-a loading bar:
Da bi se znalo da li je izvršen zahtev koisti se readyState, kada se objekat kreira njegova vrednost je 0, kada se pozove "open" on je 1, a kada se izvrši zahtev on je 4, dakle potrebno je da posmatraš kada je on ima vrednost 4.
A pomoću onreadystatechange možeš kreirati povratnu funkciju, odnosno funkciju koja će biti pozvana kada se zahtev izvrši:
Gore sam zaboravio, možeš proveravati i status servera.
Ukoliko sve uspešno, vratiće 200, ukoliko stranica, koju si pozvao, ne postoji vratiće 404...
Pogledaj npr. primer koji sam postavio u ovoj temi:
https://www.elitesecurity.org/t154633
ako sakrijem DIV na kraju JS sekcije (poslednja linija tog bloka u skriptu)
Uglavnom sam ovo koristio što sam i gore objasnio.
da li to garantuje i da je browser u tom trenutku završio sa iscrtavanjem stranice, tj. da su svi elemenit prikazani kako valja i na svom mestu?
Hmm... pošto ti je to bitno, ti možeš ispitivati pomoću js da li postoje ti elementi i da li sadrže podatke dobijene pomoću XMLHttpRequest-a
Imaš tvoj div:
Code:
<div id="loadingBar" style="display: none">loading...</div>
<div id="loadingBar" style="display: none">loading...</div>
Korisnik klikne na neki link(buttom) i pritom poziva određenu js funkciju u toj funkciji ti kreiraš XMLHttpRequest objekat. Pre nego što se objekat kreira (može i posle) ti promeniš display osobinu div-a loading bar:
Code:
function blaBla() {
document.getElementByid('loadingBar').style.display = 'block';
var req = new XMLHttpRequest(); // + za IE
...
}
function blaBla() {
document.getElementByid('loadingBar').style.display = 'block';
var req = new XMLHttpRequest(); // + za IE
...
}
Da bi se znalo da li je izvršen zahtev koisti se readyState, kada se objekat kreira njegova vrednost je 0, kada se pozove "open" on je 1, a kada se izvrši zahtev on je 4, dakle potrebno je da posmatraš kada je on ima vrednost 4.
Code:
...
if (req.readyState == 4) {
// prikaži sadržaj
// ukloni loadingBar
}
...
...
if (req.readyState == 4) {
// prikaži sadržaj
// ukloni loadingBar
}
...
A pomoću onreadystatechange možeš kreirati povratnu funkciju, odnosno funkciju koja će biti pozvana kada se zahtev izvrši:
Code:
...
req.onreadystatechange = showContent;
...
function showContent() {
// prikaži sadržaj
// ukloni loadingBar
}
...
req.onreadystatechange = showContent;
...
function showContent() {
// prikaži sadržaj
// ukloni loadingBar
}
Gore sam zaboravio, možeš proveravati i status servera.
Code:
req.status
req.status
Ukoliko sve uspešno, vratiće 200, ukoliko stranica, koju si pozvao, ne postoji vratiće 404...
Pogledaj npr. primer koji sam postavio u ovoj temi:
https://www.elitesecurity.org/t154633
Citat:
ako sakrijem DIV na kraju JS sekcije (poslednja linija tog bloka u skriptu)
Uglavnom sam ovo koristio što sam i gore objasnio.
Citat:
da li to garantuje i da je browser u tom trenutku završio sa iscrtavanjem stranice, tj. da su svi elemenit prikazani kako valja i na svom mestu?
Hmm... pošto ti je to bitno, ti možeš ispitivati pomoću js da li postoje ti elementi i da li sadrže podatke dobijene pomoću XMLHttpRequest-a
Potpis
Banned - Not available
Citat:
Br@nkoR: Hmm... pošto ti je to bitno, ti možeš ispitivati pomoću js da li postoje ti elementi i da li sadrže podatke dobijene pomoću XMLHttpRequest-a
hvala ti na odgovoru! ovo gore mi je u stvari ključno. sa XML HTTP Request-om sam radio, tako da znam mehanizme provere koje si naveo. fora je u tome što XMLHTTP brzo završi svoj posao, a onda ide složeniji JS kod koji formira DIV elemente, formatira ih, popunjava i na kraju prikazuje. tek u tom trenutku želim da nestane "Loading...", tako da ću na kraju skripta samo skloniti DIV.
ovo je offtopic: zanima me zbog čega si stavio display: none/block? ja koristim visibility: hidden/visible. razlika u standardima?
Citat:
lukeguy: ovo je offtopic: zanima me zbog čega si stavio display: none/block? ja koristim visibility: hidden/visible. razlika u standardima?
Češće koristim display, pa sam zato i napisao.
Potpis
Banned - Not available
okej, hvala ti! mislim da si me uputio na pravu stranu. :)
Da ne otvaram novu temu, zeleo bih da ubacim ovaj efekat loading u moju stranicu. Odradio bih to sam da sam skontao kako ali ne snalazim se bas najbolje u Ajaxu. Skinuo sam skriptu i namestio je da mi klikom na link u tabeli u prvom td-u prikazuje neku stranicu u drugom td-u.
Kod u tabeli(u prvom td-u je link a u drugom zeljena stranica koja se prikazuje kad se klikne na link):
Evo js koda:
Ocigledno gde je ovo u js:
Kod u tabeli(u prvom td-u je link a u drugom zeljena stranica koja se prikazuje kad se klikne na link):
Code:
.....
<tr>
<td>
<a href="javascript:ajaxpage('ajaxfiles/del-nero.php', 'desnakolona'); loadobjs('ajaxfiles/css.css')"><font size="2" color="#006ab1" face="verdana, arial, sans-serif" onmouseover="this.style.color='skyblue'" onmouseout="this.style.color='#006ab1'">LINK</font></a>
</td>
<td id="desnakolona"></td>
</tr>
.....
<tr>
<td>
<a href="javascript:ajaxpage('ajaxfiles/del-nero.php', 'desnakolona'); loadobjs('ajaxfiles/css.css')"><font size="2" color="#006ab1" face="verdana, arial, sans-serif" onmouseover="this.style.color='skyblue'" onmouseout="this.style.color='#006ab1'">LINK</font></a>
</td>
<td id="desnakolona"></td>
</tr>
Evo js koda:
Code:
var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""
function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}
function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}
function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}
var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""
function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}
function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}
function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}
Ocigledno gde je ovo u js:
Code:
function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}
treba da dodam to za loading.gif. Kad se pojavljuje i kad nestaje.
function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}
bas tamo treba dodati:
a on ce vec sam odrediti taj trenutak kada treba da se promeni sadrzaj, na osnovu svog readyState-a i page status-a.
Code:
function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
else
document.getElementById(containerid).innerHTML= "<img src=\"ajax-loader.gif\" />";
}
function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
else
document.getElementById(containerid).innerHTML= "<img src=\"ajax-loader.gif\" />";
}
a on ce vec sam odrediti taj trenutak kada treba da se promeni sadrzaj, na osnovu svog readyState-a i page status-a.
Radi! Hvala ti puno!