Javascript pomoc

Pozz

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

Nisam nikad radio sa javascript pa nezz :slight_smile:

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>';
}

?>

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

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 :blush: jer mi klik na malu sliku otvara veliku preko jquery-a http://prntscr.com/69lpxr

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? :slight_smile: 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 :slight_smile:

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

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

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.

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 ? :confused:
Recimo da ti stigne ID slike sa client side na server side, što ćeš točno napraviti sa tim ID-em?

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

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!

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>

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>

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

<?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>

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

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…

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

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…

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>

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?

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>

Copyright © 2020 WM Forum - AboutContact - Sponsored by: Mydataknox & Profit Monkey