Show / Hide script

Salut,

- Se da un text oarecare, sa zicem niste detalii ale unui produs. Vreau sa afisez o imagine cu mesajul "apasa aici sa vezi detaliile".

- La apasare, sa apara detaliile efective in loc de acea imagine, insa pe loc, fara sa fie nevoie de reload-ul paginii.

- Vreau sa inregistrez in baza de date de cate ori apasa cineva pe acea imagine, pentru a vedea detaliile (deci practic la apasarea pe imagine sa execut si un update in tabela corespunzatoare. update-ul nu trebuie sa se faca daca omul nu apasa pe imagine).


Multumesc anticipat pentru orice sfat care ma poate ajuta in rezolvarea problemei.


Mihai.

o solutie simpla ar fi cu un pic de javascript:
la onclick pe acea imagine se ataseaza 3 actiuni
1. proprietatea style.display a imaginii devine "none"
2. style.display a boxului de text (care ar trebui sa fie prezent in html dar cu display none din stil) devine "block"
3. se face o cerere asincrona catre un script care are in spate un php care numara clickurile (ex: www.site.ro/numara-plus/id-produs.. care face un increment randului corespunzator produsului din db);

se poate face totul in ajax (adica inclusiv inlocuirea imaginii cu textul respectiv), dar sunt macar doua minusuri pentru care eu n-as alege asa: schimbarea o sa aiba un delay ceva mai mare decat la prima varianta + o sa fie mai greu de indexat textul cu descrierea din spate;

sunt convins ca pot sa existe si solutii mai bune din anumite puncte de vedere, dar asta ar fi raspunsul meu rapid la ipoteza exprimata;

bafta,

multumesc pentru raspunsul rapid @gabriel.stancu insa m-ai pierdut definitiv pe la punctul 3, adica la "cererea asincrona catre un script care are in spate un php care numara clickurile" :) e clar ca trebuie sa ma mai documentez in privinta asta.

am uitat sa fac o mica precizare, utila poate acelora care pot sa imi mai dea cate o sugestie: nu ma intreseaza indexarea textului respectiv in google.

de ce nu faci un div hidden...si faci un link la care ii pui onClick=functie(), iar functie() va face acel div hidden, visible.... iar in acea functie deschizi si un url in care faci update la tabela in baza de date...

Nu le am prea bine cu javascript, dar cred ca se poate deschide un url in background fara sa fie ,,deranjat" vizitatorul.

Ajax: iei o librarie JS ca JQuery, sau prototype.js.
pe pagina pui doar fragmentul, iar cand se da click pe imagine se cere de la server prin Ajax si restul.
scriptul preia IDul produsului, incrementeaza indicatorul de vizualizari in baza de date si intoarce textul complet.

nu e mare filozofie, un programator bun rezolva treaba asta in 30 minute maxim.

punctul 3 incerca sa spunca undeva intr-o zona ascunsa din pagina incarci continutul altei pagini (care poate sa nu afiseze nimic, dar care sa opereze in db) in momentul clickului pe imagine (asincrona = nu e sincronizata cu incarcarea htmlului principal, ci e "triggeruita" de clickul pe imagine, click care poata sa vina la diverse momente de timp sau poate chiar sa nu vina);
uite aici un link despre cum poti face asta cu jquery: http://api.jquery.com/load/

@finaldestiny: daca incarci intr-un div ascuns acea pagina care opereaza in db.. ea va fi incarcata in html de prima data indiferent daca vizitatorul da click sau nu pe imagine; prin urmare contorul in db va fi incrementat la fiecare incarcare de pagina (chiar si la cele la care nu se citesc descrierile), deci rezultatul va fi "numarul de afisari ale paginii" si nu "numarul de citiri ale descrierii"

@meetzah:
O functie pe care am scris-o mai demult in js.

Citat:

---

function toggleDiv(id) {
var elem = document.getElementById(id);
if (elem.style.display == 'block') {
elem.style.display = 'none';
}
else {
document.getElementById(id).style.display='none';
elem.style.display = 'block';
}
}

---

Daca folosesti jQuery:

Citat:

---

$('#numediv').toggle();

---

Pentru ultima liniuta poti folosi ajax, tot cu jQuery:

Citat:

---

function updateDb(data){
$.ajax({
type: "POST",
url: "/calea_catre_script.php",
data: "data=" + encodeURIComponent(data) ,
success : function (data){
$("#numediv").html(data).show();
}
});
}

---

Poti sa scoti success si/sau data si sa prelucrezi pe php datele despre user;
Apelarea o faci onclick.

PS: E tarziu si e duminica... sper ca am inteles ce vrei :)

Gabriel, multumesc pentru ajutorul acordat. Am sa incerc astazi sa implementez functia si trebuie sa reusesc, intr-un fel sau altul.

Va doresc o saptamana frumoasa si profitabila.

Daca vrei sa nu folosesti jQuery (nu mai folosesti la nimic altceva in pagina si pentru a nu mari dimensiunea), pentru punctul 3 poti sa folosesti:

Cod:

---

function GetXmlHttpObject()
{
var xmlHttp=null;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
return xmlHttp;
}

function updateDb ()
{
var xmlHttp;
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
  {
  alert ("Your browser does not support AJAX!");
  return;
  }

var url="paginaUpdateDb.php";

xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}

---

si in completare la ce s-a spus mai sus...
in db trebuie sa tii o mapare intre fiecare imagine pentru care contorizezi si numarul de clickuri si de fieacare data cand trimiti requestul catre scriptul care iti face update pe contor sa trimiti si identificatorul imaginii pe care o contorizezi.

iti recomand sa folosesti jquery pentru ca este cea mai rapida si usoara librarie de folosit.
Plus ca poti pune calea de la .js pe cea de la google si vizitatorii vor avea sigur scriptu cachuit inainte sa vina la tine pe site.

Am jquery deja pe site si incerc sa gasesc o implementare a ceea ce-mi trebuie mie prin modelele oferite pe site-ul lor. Dion pacate nu stiu foarte bine cum sa caut :(

Iti recomand jQuery tools: http://flowplayer.org/tools/index.html ar trebui sa gasesti pentru afisare/ascundere, pentru inregistrare click-uri nu cred ca te va ajuta.