Ajax php pass href onclick info to db

Hi,

This i s a follow up question on this case: http://www.experts-exchange.com/Programming/Languages/Scripting/AJAX/Q_25385933.html#a28460369

I have a picture album that works on php. I've also added a Highslide java function to the album, so that users can view the pictures using either Highslide or php.

Here is the scenario when using my php side of picture album:

When user clicks on picture a page showing the picture opens and a call the function:
updatelastreadphoto($eventid,$pid,$count_views,$count_picture);

In the updatelastreadphoto.php the pictures info and users info is passed to the database.

So this is what I want to do with the java Highslide too.

I have this set up:
So when user clicks on the picture using Highslide I should also insert information to the db but this is the thing I can't figure out how to do it?

Help me out here.

Regards,

Toby
<script type="text/javascript">

 hs.Expander.prototype.onInit = function()
{

	var src = this.a.href;
   countImageClickThroughAjax(src);
}

function countImageClickThroughAjax(src) 
{
	//alert(src);
    $.ajax({
        url: "index.php?id=".src,
        cache: false,
        dataType: "json", // the datatype can vary depending on what you are returning
        success: function(data)
        {
			//updatelastreadphoto(src, '$eventid','$pid','$count_views');
        }
        error: function(data)
        {

        }
    });
}	
	
</script>

Open in new window

ToubeAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

hieloCommented:
line 14 of your post should use a "+" symbol to concatenate the src value, NOT a dot. The dot is for php. It should be:
 url: "index.php?id=" + src,


Then on the server, you can extract that value by doing:
<?php
...
$eventid=$_GET['id'];
...
updatelastreadphoto($eventid,$pid,$count_views,$count_picture);

?>

NOTE: if $_GET['id'] doesn't give you the value, then try using $_POST['id']
0
ToubeAuthor Commented:
Thanks for your quick reply hielo.

Tried your suggestion but I still cant get it to work. The $eventid=$_GET['id']; only outputs the urls first id value.
0
hieloCommented:
>>The $eventid=$_GET['id']; only outputs the urls first id value.
What do you mean "first..."

Your url is coded as:
url: "index.php?id="+src,

So, there should be only ONE id. It sounds like you are expecting more than one, but you are sending just one. You cannot expect your php script to automagically retrieve more than one when you are sending just one.
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

ToubeAuthor Commented:
Sorry for my unclear comments. What I meant was that I already call the $_GET['id'] on index.php file. And the id is outputting the album year as it should do.

The Highslide author adviced me by the following line:

In index.php, write up the PHP code to register the click in your database. All your Highslide, jQuery and JavaScript code is finished now.

Any ideas?
0
hieloCommented:
>>All your Highslide, jQuery and JavaScript code is finished now.
That tells me that (according to the author), your jquery is now passing all the data it needs to pass to the server (your php page).

From your jquery code you are passing just id:
 url: "index.php?id="+src,

So what you need to do is ask the author if in fact that is all you need.

On your problem description I see you have:
updatelastreadphoto($eventid,$pid,$count_views,$count_picture);

where are these:
$pid,$count_views,$count_picture

supposed to come from? (You tell me. I am not familiar with Highslide nor with your project). I suspect that if you can answer that accurately, we can get to the bottom of this.

If the jquery is supposed to pass those as well, then your url should NOT be simply this:
 url: "index.php?id="+src,

but instead it should be something more complete - SIMILAR to:
 url: "index.php?id=" + src + "&pid=Value1&count_views=Value2&count_picture=Value3",
0
ToubeAuthor Commented:
Hi,

here's the code from where the pictures thumbnails are shown and where the links to larger images are:

These $pid,$count_views,$count_picture are values from a database query and are used when user has clicked on thumbnail using php not Highslide album and when large picture has opened the $pid,$count_views,$count_picture values are sent to updatelastreadphoto.php file and this files updates the pictures info to the db.
echo ('<table style="width: 100%; font-size: 11px;">');

	     echo ('<tr>');

	     $index = 0;
	     $j = 0;
	     //$img = 0;
	     //$picturesperpage = 20;

   	   	 $img = $startvalue + $img;

	     while($index < $imagesinthispage){

		 $imageid_ = mysql_result($result, $index, photoid);
		 $pid = mysql_result($result, $index, photoid);
		 $thumbnail_ =  mysql_result($result, $index, thumbnailname);
		 $phototext_ =  mysql_result($result, $index, phototext);
		 $text_ = html_entity_decode($phototext_);
		 $text_original = html_entity_decode($phototext_);
    	 $text_ = substr($text_,0,20);
    	 $count_ = strlen($phototext_);
    	 $date = mysql_result($result, $index, addtime);
    	 $updatedtime = mysql_result($result, $index, date);
		 $filename_1 = mysql_result($result, $index, filename);
		 $count_views = mysql_result($result, $index, count_views);

	       echo "<td onmouseover=\"this.style.background='#720606'\"
			onmouseout=\"this.style.background='transparent'\" style=\"color: #ffffff; border: 1px solid #e4900d;\" align=\"center\">";
			if ($album_view == 1) // user uses the Highslide option show highslide pictures onclick event
			{
				echo "<a class=\"highslide\" onClick=\"return hs.expand(this, {src:'albumi/$folder_/$filename_1'})\" href=\"$year&amp;show=$event&amp;img=$img&amp;main_page=$page&amp;count=1\">";
				//updatelastreadphoto($eventid,$pid,$count_views);
			}
			else
			{
			echo "<a href=\"index.php?id=$year&amp;show=$event&amp;img=$img&amp;main_page=$page&amp;count=1\">";
			}
			if ($updatedtime == $thismonth && $date > '00.00.0000')
			{
			echo "<img src=\"albumi/$folder_/$thumbnail_\" style=\"border: 1px solid red; size: 100%; padding: 1px;\" alt=\"Kuva lisätty $date\" title=\"Kuva lisätty $date\" /></a><div style=\"font-size: 10px;\">"; echo $text_; if ($text_ != "" && $count_ > 20){echo "...";} else{echo "";} echo "</div><div class=\"highslide-caption\" style=\"font-size: 10px;\">$text_original</div></td>";
			}
			else
			{
			echo "<img src=\"albumi/$folder_/$thumbnail_\" style=\"border: none; size: 100%; padding: 5px;\" alt=\"$text_original\" title=\"$text_original\" /></a><div style=\"font-size: 10px;\">"; echo $text_; if ($text_ != "" && $count_ > 20){echo "...";} else{echo "";} echo "</div><div class=\"highslide-caption\" style=\"font-size: 10px;\">$text_original</div></td>";
			}
	       $j++;
		   $index++;
		   $img++;
		   if($j == 5)
		   {
		   	echo ('</tr><tr>');

		   	$j = 0;
	       }
	  } // while end

	  echo('<td></td></tr>');
  echo('</table>');

Open in new window

0
hieloCommented:
immediately after line 6:
       var src = this.a.href;

put:
alert( src );

what do you get?
0
hieloCommented:
where's your page.
0
ToubeAuthor Commented:
Hi,

I get this: check attachment.

Login here:
http://www.tobiasfransman.net

user: guest
pass: guest321
alert.jpg
0
hieloCommented:
on that popup you posted, basically what you need is everything to the left of the "?", isn't it?

I suspect what you need is:
url: "index.php" + src.substring( str.indexOf("?")),

Then on the server you should be able to do:
$id=$_GET['id'];
$event=$_GET['show'];
$img=$_GET['img'];
$page=$_GET['main_page'];
$count=$_GET['count'];
0
ToubeAuthor Commented:
Ok thanks,

but what do you mean with str.indexOf("?")) what should I replace the "?" with?
0
hieloCommented:
The attachment you posted shows a full url with various parameters. I suspect that in your ajax call you need to pass all those parameters again:
function countImageClickThroughAjax(src) 
{
        //alert(src);
    $.ajax({
       url: "index.php" + src.substring( str.indexOf("?")),
        cache: false,
        dataType: "json", // the datatype can vary depending on what you are returning
        success: function(data)
        {
                        //updatelastreadphoto(src, '$eventid','$pid','$count_views');
        }
        error: function(data)
        {

        }
    });
}

Open in new window

0
ToubeAuthor Commented:
Aah.. stupid of me. When adding this the Highslide stops working and when clicking on thumbnail it goes straight to the php side for full image.
0
hieloCommented:
I went to your page, but I have not clue where/what to click to see what you are seeing [It would be nice if there was an english version :)]
0
ToubeAuthor Commented:
uups sorry, you can find the albums here:
http://www.tobiasfransman.net/user/albumi/index.php?id=2010&show=27

and when you click on thumbnail it now should open the Highslide java version of full size picture but it goes to the php side of full image.
0
hieloCommented:
>>and when clicking on thumbnail it goes straight to the php side for full image.
That typically indicates that you have some sort of javascript error that caused the javascript interpreter to halt execution of your script. It it halts execution, then the links will navigate.

In your case you removed the
success:...
and the error:....
options from the ajax all, BUT left the trailing comma after "json"
        dataType: "json",

Fix it:
function countImageClickThroughAjax(src)
{

    $.ajax({
        url: "index.php" + src.substring( str.indexOf("?")),
        cache: false,
        dataType: "json" // the datatype can vary depending on what you are returning
    });
}

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
ToubeAuthor Commented:
Jeps, fixed it still same issue.
0
ToubeAuthor Commented:
Any clues?
0
ToubeAuthor Commented:
Ok let's say that I would get working where would I put these on the server side:

$id=$_GET['id'];
$event=$_GET['show'];
$img=$_GET['img'];
$page=$_GET['main_page'];
$count=$_GET['count'];

And when I click on a thumbnail the Highslide opens the full size image so how do I on the php side call the upon these attributes?
0
hieloCommented:
>>Ok let's say that I would get working where would I put these on the server side:
in index.php of course. That's what this is supposed to do:
 url: "index.php" + src.substring( str.indexOf("?")),

It sends the parameters you see in the attachment you provided to index.php

However, the problem here is that I am not seeing the effect of Highslide. I am not sure if you even got to work in the first place. If you did, how did you manage to break it.
0
ToubeAuthor Commented:
Hmm.. this starting to a really hard nut to break. I didn't get it working because I'm not sure how to call it.
0
hieloCommented:
>>I didn't get it working because I'm not sure how to call it.
Hmmm. This is somewhat contradicting to the statement you have on your other "solved" problem:

"...My problem is when users uses the highslide javalibrary for viewing the pictures nothing is sent to the url ...."

What I understand from that is that you at least got the Highslide working - meaning that you got the pictures to show in the "popup", but the only thing lacking now is to update the db to find out which one got clicked.

However, your last update is contradicting what I understood from your previous statement/post.

For the sake of clarity, is this what you are using:
http://highslide.com/

Were you able to get Highslide to work by itself? Yes or No

Going forward, perhaps you should focus your efforts into getting a simple page with just two pictures working (this will simply the markup and will be easier to follow). Once you have the Highslide demo working, then we can focus on updating your db.

The updating of the db needs to be done through ajax, BUT before you do that you need to get Highslide working to begin with. When I started posting on this problem, my understanding was that Highslide was already working and you only needed help with the ajax part. So we need some clarifications first.

Regards,
Hielo
0
ToubeAuthor Commented:
Hi Hielo,

I had a friend who is pretty skillful when it comes web languages and he help me out and got it working from your base.

Here's how he did it:

In the updateviecount.php file I then call the
$id=$_GET['id'];
$event=$_GET['show'];
$img=$_GET['img'];
$page=$_GET['main_page'];
$count=$_GET['count'];

and do insertion to the db.

Thanks again for your help apreciate it.

until next time.

Regards,

Toby
<script type="text/javascript">
    hs.Expander.prototype.onInit = function()
{

	var src = this.a.href;
    var params = "updateviewcount.php" + src.substring(src.indexOf("?"));
	//alert(params);
   	countImageClickThroughAjax(params);
}

</script>

<script type="text/javascript">

function countImageClickThroughAjax(src)
{
    $.ajax({
        url: "http://www.tobiasfransman.net/user/albumi/pages/content/" + src,
        cache: false,
	dataType: "json" // the datatype can vary depending on what you are returning
    });
}

</script>

Open in new window

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
AJAX

From novice to tech pro — start learning today.