Javascript pomoc

mlukac89 · veljača 2015 11:09 25

Pozz

Dali je moguce preko javascript uzet varijable iz php-a za update pregleda slike ?

Nisam nikad radio sa javascript pa nezz

imam ovako

<script type="text/javascript">
function update_views()
{
	alert('You are clicking on me')
           // znaci napravit ovdje funkciju da kad kliknem na link od slike da napravi update u bazi 1 ip 1 pregled u 24 sata

}
</script>

<?php

// svi templati
 $temps = $templates->show_latest_temps();

foreach ($temps as $temp) {

$ip = $general->get_ip(); // ip adresa

$tid = $temp['id']; 		 // template id
$old_view = $temp['views'];	 // trenutni pregledi
$new_view = $old_view + 1;   // dodaj pregled
$update_views = $templates->update_temp_view($tid, $new_view, $ip); // update

$img = substr($temp['small_image'], 3);
$big_img = substr($temp['big_image'], 3);

echo '<div class="works-box">
		<a href="'.$big_img.'" rel="prettyPhoto" title="'.$temp['name'].'" onclick="update_views();">
			<img src="'.$img.'" width="135" height="135" alt="'.$temp['name'].'" title="'.$temp['name'].'" />
		</a>
	  </div>';
}

?>

bozoou · veljača 2015 11:24 25

Ajax ti treba…on ti prosljeđuje upit (parametre) sa client side (JS) prema server strani (PHP). Na serveru odradiš što želiš sa dobivenim parametrima i rezultat toga (neke dobivene parametre) možeš opet vratiti na client side.

Sa jQueryem ti to izgleda ovako:

$.ajax({
	  type: "POST",
	  url: 'script.php',  
	  data: {ime:'pero',prezime:'perić'},
	  dataType:'json',
	  complete:function(data)
		{
		alert('gotov request');
		},
	  success: function(data)
		{
		alert('uspješno gotov request!');
		}
	});

Nakon što ti se trigira gornja funkcija, na serveru ti se pokreće skripta: “script.php”

$ime=$_POST['ime'];
$prezime=$_POST['prezime'];

//radi što želiš sa dobivenim podacima

//vraćaš rezultat najbolje kao JSON object:
echo json_encode($neki_array_s_podacima); 
//taj rezultat ti je data varijabla na client side

mlukac89 · veljača 2015 11:43 25

A vidi meni treba ovaj dio koda da mi odradi

$ip = $general->get_ip(); // ip adresa

$tid = $temp['id']; 		 // template id
$old_view = $temp['views'];	 // trenutni pregledi
$new_view = $old_view + 1;   // dodaj pregled
$update_views = $templates->update_temp_view($tid, $new_view, $ip); // update

Znaci da uzme te varijable sto je moguće jedino iz foreach-a i da kad kliknem na sliku da mi podigne view za +1 za 1 ip po 24 sata, znaci broji samo uniq hitove. Ovo mi se cini komplicirano s ajaxom ali opet nezz kako da preko php-a napravim kad kliknem link da mi napravi +1 jer mi klik na malu sliku otvara veliku preko jquery-a http://prntscr.com/69lpxr

bozoou · veljača 2015 12:37 25

Ne možeš bez ajaxa komunicirati client side i server side (bez reloada stranice). Što znači da ne možeš niti jednu akciju korisnika prenesti na neku logiku koju želiš raditi na serveru. U ovom slučaju klik na sliku.

Nije to niš komplicirano, ako znaš napisati običnu funkciju na client ili server strani. A koliko vidim, gore imaš JS funkciju update_views(), tako da valjda barataš toliko.
Sad samo u tu funkciju stavljaš ajax request, a na serveru radiš što želiš kad stigne taj ajax request. Koji dio ti tu nije točno jasan, tj. što ti je prekomplicirano? Reci što točno zapinje, objasnim…

Btw…džabe ti sav web develop ako ne prihvatiš ajax koji je must have U kamenom dobu si bez toga

shimi · veljača 2015 12:57 25

Mozes da stavis php value u neki hidden input i onda da ga dohvatis u javascriptu.

mlukac89 · veljača 2015 13:17 25

Prvo sto mi nije jasno je to sto neznam ni ajax ni js ni jquery

Druga stvar je vidis da su ovi podaci koji mi trebaju templateID i views u foreach petlji dakle ne mogu ih koristit van nje. A klikom na malu sliku mi se otvori cijela slika velika i ovakav link http://localhost/ml-webdesign/index.php#prettyPhoto/0/ i zbog toga dodatka prettyPhoto sto mi uveca sliku ne mogu ni da preko geta ni posta uvatim templateID koji mi je potreban da ga spremim u bazu.

bozoou · veljača 2015 14:59 25

Nije ajax gradivo pa da ga moraš znati, učiti…samo uzmeš funkciju koju sam ti dao.
Od jQuery-a opet netrebaš znati ništa, nego samo kopirati tu funkciju koju sam ti dao.
Od javascripta opet netrebaš znati ništa više, nego zadat jednu jedinu akciju na klik miša. A to buš morao zadat kak god da okreneš…a to je pak osnove osnova. Ako išta znaš od programiranja, onda ćemo lako postaviti jednu funkciju na akciju klika miša.

Btw. jel znaš php? …jer nebu se samo upisalo u bazu ?
Recimo da ti stigne ID slike sa client side na server side, što ćeš točno napraviti sa tim ID-em?

mlukac89 · veljača 2015 20:41 25

gledaj ovako imam u bazi
table "templates"
polja : id, name, small_image, big_image, date_added, status, link

table "template_views"
polja : id, templateID, views, ip, time

dakle tu mi je problem jer neznam kako da uzmem id od slike i spremim u template_views->templateID

Znam radit s bazom i radim PDO mysql i koristim klase u php-u samo me da oprostiš jebe ovaj id od slike, prvo sam napravio da mi kad otvorim sliku otvori u index.php?id=idslike ali mi onda nestane index.php pa bi moro jos jednu stranicu pravit.

Prvi put mi je da radim ovako i taj jquery me jebe maximalno. Znaci treba mi samo kad se klikne na sliku da mi izvuce id od slike iz foreach petlje i spremi u 1 varijablu da mogu dodat id u bazu template_views->templateID

bozoou · veljača 2015 10:36 26

Ajmo redom.

1.napravi skriptu: 'zabiljezi_pogled.php’
2. kad se klikne na sliku, trigiraj funkciju update_views()
3. ta funkcija treba izgledat:

function update_views()
{
var ID=...  ; // <--pobrini se da pridruzis id slike ovoj varijabli !!!
$.ajax({
	  type: "POST",
	  url: 'zabiljezi_pogled.php',  
	  data: {id_slike:ID},
	  dataType:'json'
	});
}

ČETIRI: skripta ‘zabiljezi_pogled.php’ treba izgledat:

<?php
$ID=$_POST['id_slike'];
//radi što želiš sa ID-em...upisuj u bazu..simte, tamte...
?>

PET: ne zaboravi inkludati jQuery u zaglavnje dokumenta:

 src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'

ŠEST: pazi u kojem direktoriju ti se nalazi skripta '‘zabiljezi_pogled.php’, može biti bilo gdje naravno, ali gore u točci 3. moraš staviti taj isti path kod definiranja url-a.

.
.
PS. moderatorima forima,
ovo autonumeriranje ne radi kako spada i vrlo često ide prilično na živce!

mlukac89 · veljača 2015 14:34 26

Napravio sve kako si napiso pregledo 100 puta i opet isti ■■■■■ sad jos i ne otvara sliku nego dobijem ovaj error http://prntscr.com/6a2dk6

<?php

// ispis svih templata
$temps = $templates->show_latest_temps();

foreach ($temps as $temp) 
{
	$tempID = $temp['id']; // id od slike

	?>

	<script type="text/javascript">
		function update_views()
		{
		var ID=$tempID; // <--pobrini se da pridruzis id slike ovoj varijabli !!!
		$.ajax({
			  type: "POST",
			  url: 'zabiljezi_pogled.php',  
			  data: {id_slike:ID},
			  dataType:'json'
			});
		}
	</script>

	<?php

	$img = substr($temp['small_image'], 3);
	$big_img = substr($temp['big_image'], 3);

	// prikaz svih templatea u boxovima
	echo '<div class="works-box">
			<a href="#" rel="prettyPhoto" title="'.$temp['name'].'" onclick="update_views()">
				<img src="'.$img.'" width="135" height="135" alt="'.$temp['name'].'" title="'.$temp['name'].'" />
			</a>
		  </div>';
}


?>

zabiljezi_pogleda.php

<?php

$ID=$_POST['id_slike'];
 //radi što želiš sa ID-em...upisuj u bazu..simte, tamte...

echo '<h1> id slike je ' . $ID . '</h1>';


?>

I u indexu imam includan jquery

ako ce sta pomoc ovo je skripta koja aktivira sliku da se otvori

<script type="text/javascript" charset="utf-8">

$(document).ready(function(){
	$("a[rel^='prettyPhoto']").prettyPhoto({
		animation_speed: 'fast', /* fast/slow/normal */
		opacity: 0.80, /* Value between 0 and 1 */
		show_title: true, /* true/false */
		allow_resize: true, /* Resize the photos bigger than viewport. true/false */
		default_width: 500,
		default_height: 344,
		theme: 'facebook', /* light_rounded / dark_rounded / light_square / dark_square / facebook / pp_default */
		horizontal_padding: 20
	});
});
</script>

shimi · veljača 2015 14:40 26

Slabo si ti skontao sta ti je on rekao… Evo ti hint:

<?php

// ispis svih templata
$temps = $templates->show_latest_temps();

foreach ($temps as $temp) 
{
	$tempID = $temp['id']; // id od slike

	$img = substr($temp['small_image'], 3);
	$big_img = substr($temp['big_image'], 3);

	// prikaz svih templatea u boxovima
	echo '<div class="works-box">
			<a href="#" rel="prettyPhoto" title="'.$temp['name'].'" onclick="update_views()" data-id="'.$tempID.'">
				<img src="'.$img.'" width="135" height="135" alt="'.$temp['name'].'" title="'.$temp['name'].'" />
			</a>
		  </div>';
}

?>

	<script type="text/javascript">
		function update_views()
		{
		var ID = $(this).data('id');; // <--pobrini se da pridruzis id slike ovoj varijabli !!!
		
		$.ajax({
			  type: "POST",
			  url: 'zabiljezi_pogled.php',  
			  data: {id_slike:ID},
			  dataType:'json'
			});
		}
	</script>

mlukac89 · veljača 2015 15:12 26

Ista stvar ko i na slici gore pa ■■■■■ ti vise

shimi · veljača 2015 18:01 26

<?php

// ispis svih templata
$temps = $templates->show_latest_temps();

foreach ($temps as $temp) 
{
	$tempID = $temp['id']; // id od slike

	$img = substr($temp['small_image'], 3);
	$big_img = substr($temp['big_image'], 3);

	// prikaz svih templatea u boxovima
	echo '<div class="works-box">
			<a href="#" rel="prettyPhoto" title="'.$temp['name'].'" class="update_views" data-id="'.$tempID.'">
				<img src="'.$img.'" width="135" height="135" alt="'.$temp['name'].'" title="'.$temp['name'].'"/>
			</a>
		  </div>';
}

?>

	<script type="text/javascript">
	
	  $( ".update_views" ).click(function() {
		
		var ID = $(this).data('id');; 

		$.ajax({
			  type: "POST",
			  url: 'zabiljezi_pogled.php',  
			  data: {id_slike:ID}
			});
		});

	</script>

mlukac89 · veljača 2015 19:22 26

Jos uvijek isti error ko na slici, al nema veze icu drugacijim putem i rjeseno jebo ti ovo drkanje,

bozoou · veljača 2015 19:25 26

Nebi štel zvučat grubo, ali jedini pravi put ti je da pohvataš osnove programiranja. Baviti se templateima a nemati pojma s čime radiš je valjda nešto najgore što si netko želi priuštiti u životu. Zato i imaš ove živčane momente…a imat ćeš ih dok god ne izabereš pravilan put. Raditi na slijepo je naprosto nemoguće…

mlukac89 · veljača 2015 21:48 26

Znam ali kad te nesta muci tri dana i po goglu sam stalno i nebi napravio da si žuna, a mogo sam jednostavno ko sto i jesam stavio link <a href="index.php?page=works&id=’.$id.’> i problem rjesen otvori mi se cijeli template s podacima na desnoj strani u works.php a tu onda preko id-a izvuce sve o tom templatu + dodam view. Jest da je ono kad kliknes pa ti se otvori kompletna slika ljepse al sta je tu je ;D

bozoou · veljača 2015 14:39 27

Sve jasno, ja te samo savjetujem da se neke korake jednostavno ne isplati preskakati…jer buš takva tri dana muke često susretao.

Za početak, meni nije jasno što se dešava s tvojom stranicom kad klikneš na sliku… dali ti znaš napraviti da kad se klikne na sliku da browser izbaci alert, “Kliknuto je na sliku”. I da to sve odradi bez ikakvog errora?
Ako imaš to, možemo dalje…

mlukac89 · veljača 2015 16:37 27

Kao sto rekoh ne jebe mene to nego taj jquery dodatak “prettyPhoto” jer u link ide <a href="#" rel="prettyPhoto" onclick="pozovi javascript">mala slika</a> i onda mi otvori ovakav link index.php#prettyPhoto/0/ za drugu sliku index.php#prettyPhoto/1/ trecu index.php#prettyPhoto/2/

 <!DOCTYPE html>
  <html lang="hr">
<head>
	<title>test klik</title>
	<meta charset="UTF-8">

	<script type="text/javascript">
		function otvori_sliku()
		{
			alert("Kliknuto je na sliku");
		};
	</script>

</head>

<body>
	<a href="#" onclick="otvori_sliku()">ime slike</a>
</body>
</html>

a ja tu vec imam sliku malu i ona ima ID, e sad kad bi mogo taj ID uzet onda nema problema, nesta kao onclick uhvati id slike s time da taj sugavi prettyPhoto mi baci ID slike a ne index.php#prettyPhoto/2/ nego index.php?tid=id slike

// ispis svih templata
$temps = $templates->show_latest_temps();
echo '<div class="works-wrapper">';
foreach ($temps as $temp) 
{
	$tempID = $temp['id'];

	$img = substr($temp['small_image'], 3);
	$big_img = substr($temp['big_image'], 3);

	// prikaz svih templatea u boxovima
	echo '<div class="works-box">
			<a href="#" rel="prettyPhoto" title="'.$temp['name'].'">
				<img src="'.$img.'" width="135" height="135" alt="'.$temp['name'].'" title="'.$temp['name'].'" />
			</a>
		  </div>';
}
echo '</div>';

jedino da je vamo promjenit

    <script type="text/javascript" charset="utf-8">

$(document).ready(function(){
	$("a[rel^='prettyPhoto']").prettyPhoto({ // u "a[rel^='id slike']"
		animation_speed: 'fast', /* fast/slow/normal */
		opacity: 0.80, /* Value between 0 and 1 */
		show_title: true, /* true/false i vamo nesta  */
		allow_resize: true,
		default_width: 500,
		default_height: 344,
		theme: 'facebook', 
		horizontal_padding: 20
	});
});
</script>

bozoou · veljača 2015 14:14 28

Ocke, znaš alert trigirati kad se klikne na sliku, i nemaš nikakv error u ovoj točci…ajmo dalje

Sad trebamo trigirati alert koji će reći nešto tipa: “Ja sam aler box, a ti si kliknuo na sliku sa ID-em 54”

Da bi to dodao, trebamo vidjeti gdje se stvara ova linija HTML-a:

<a href="#" onclick="otvori_sliku()">ime slike</a>

…ja to u tvom kodu ne vidim, a to bi trebalo biti negdje tu:

// prikaz svih templatea u boxovima
echo '<div class="works-box">
		<a href="#" rel="prettyPhoto" title="'.$temp['name'].'">
			<img src="'.$img.'" width="135" height="135" alt="'.$temp['name'].'" title="'.$temp['name'].'" />
		</a>
	  </div>';

jel taj dio koda generira gornji html?

P.S. jel taj prettyPhoto slučajno reloada stranicu prilikom otvaranja slike?

mlukac89 · ožujak 2015 10:31 1

Da taj dio koda izlistava male slike 135x135px znaci ovo < img > prikazuje sliku samo a id dobijem sa $temp[‘id’]. A link sam stavio zbog toga prettyPhoto i da trigira funkciju onlick().

<img src="'.$img.'" width="135" height="135" alt="'.$temp['name'].'" title="'.$temp['name'].'" />

Evo dio iz headera tj dijela koji aktivira funckiju prettyPhoto

		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
	<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript" charset="utf-8">

$(document).ready(function(){
	$("a[rel^='prettyPhoto']").prettyPhoto({  // znaci ovo moras dodat u link da bi aktiviro funkciju rel="prettyPhoto"
		animation_speed: 'fast', /* fast/slow/normal */
		opacity: 0.80, /* Value between 0 and 1 */
		show_title: true, /* true/false */
		allow_resize: true, /* Resize the photos bigger than viewport. true/false */
		default_width: 500,
		default_height: 344,
		theme: 'facebook',
		horizontal_padding: 20
	});
});
</script>