Explore our sites

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I am using PHP and MySQL to loop through products and generating HTML code that consists of an img tag with an onClick event that calls a Javascript function. I want to pass PHP variables via the onClick event to a Javascript function. I'm using jQuery and thought it would be a good idea to use PHP's json_encode() function and jQuery's jquery-json plugin.

My PHP code looks like this:

$onclick = json_encode(array(
  'productid' => $productsRow['ProductID'],
  'description' => $productsRow['Description']
));
echo "<a href=\"javascript:;\" onClick=\"changepic('" . htmlentities($onclick) . "')\">";
echo "<img src=\"products/$thumbnailfilename\" width=\"100\" height=\"100\">";
echo "</a>";

As you can see my Javascript function is called changepic(). I've left out a bit of code that is irrelevant to this question (i.e. the database access code and deciding where the thumbnail image is).

My Javascript code is:

function changepic(productarray) {
  var productid = $.evalJSON(productarray).productid;
  var productdesc = $.evalJSON(productarray).description;
  alert(productid);
}

I'm not really doing anything yet with the PHP variables that I'm passing to the Javascript array, I'm just trying to get it to work first! My ultimate aim is to use jQuery to insert the product description into a <div>

A sample product detail might look like this:

ProductID: 30c7508008ac7597619ad9b90a97b40f
Description: <p>Wide and Narrow Bands<br>
Set with Top-Quality Diamonds</p><p>

As you can see the description contains HTML code, as well as a newline after the <br> tag.

The HTML that is generated looks like this:

<a href="javascript:;" onClick="changepic('{&quot;productid&quot;:&quot;30c7508008ac7597619ad9b90a97b40f&quot;,&quot;description&quot;:&quot;&lt;p&gt;Wide and Narrow Bands&lt;br&gt;\r\nSet with Top-Quality Diamonds&lt;\/p&gt;&quot;}')"><img src="products/tn-30c7508008ac7597619ad9b90a97b40f.jpg" width="100" height="100"></a>

When I run this I get a Javascript error:

Event thread: click
Uncaught exception: SyntaxError: JSON.parse: Unescaped control char in string: "<p>Wid
Error thrown at line 18, column 2 in changepic(productarray) in http://isis/carats/view-collection.php?collectionid=32d0c7b8774f7f82a2d7c7d053286cfc:
var productid = $.evalJSON(productarray).productid;
called from line 1, column 0 in <anonymous function>(event) in http://isis/carats/view-collection.php?collectionid=32d0c7b8774f7f82a2d7c7d053286cfc:
changepic('{"productid":"30c7508008ac7597619ad9b90a97b40f","description":"<p>Wide and Narrow Bands<br>\r\nSet with Top-Quality Diamonds<\/p>"}')

From what I can see I've done something wrong with encoding the JSON string. I've done some Googling and found some people that say no encoding is necessary (I tried that and the product description was taken as HTML and showed up in the page), others say to use addslashes() and some say htmlentities().

Do I need to do something in the Javascript function to decode it before I try to use it with evalJSON()?

share|improve this question
 
You could try simplifying it and just using a csv string instead of json. json is normally used for message passing and not needed here. print your values out in something like this format changepic("30c7508008ac7597619ad9b90a97b40f,<p>Wide and Narrow Bands<br>\r\nSet with Top-Quality Diamonds</p>") –  Codeguy007 Nov 9 '12 at 4:47
 
What's wrong with your code is that you're escaping html entities; by the time $.evalJSON sees this string, it sees gibberish; it wants to see something like {"productid":"..."} but instead it sees a bunch of mysterious &quot;s it doesn't understand. –  acheong87 Nov 9 '12 at 5:07
 
I think you're right, I'm over-complicating things. No need for JSON in this example, I just need to have two parameters for the Javascript function, one for product ID and the other product description. Then, because the description contains HTML which must be encoded, I'll just urlencode() it in the PHP and decodeURIComponent() in the Javascript. –  user1381228 Nov 11 '12 at 22:01
add comment

3 Answers

up vote 0 down vote

I usually just do this,

var foo = <?php echo json_encode($foo); ?>;

and I don't really see how this can result in any sort of an "injection" attack as long as json_encode is doing its job.

share|improve this answer
 
Your suggestion puts the PHP variable directly into the Javascript code, which might be ok in some situations but I have multiple products on the page and I'm trying to write a generic Javascript function that will work no matter which product is clicked on, hence the passing of the product details to the script. –  user1381228 Nov 11 '12 at 21:40
 
@user1381228 - I think you misunderstood. I was trying to present a very generic example. I think your original PHP code is fine except the htmlentities($onclick). Just make that $onclick and you're good to go. –  acheong87 Nov 12 '12 at 2:47
add comment
up vote 0 down vote

I don't understand why you are getting into so much mess.. here is the solution and it works

$onclick = json_encode(array(
'productid' => $productsRow['ProductID'],
'description' => $productsRow['Description']
));
echo "<a id='test' href='' var='$onclick'>";
echo "<img src=\"products/$thumbnailfilename\" width=\"100\" height=\"100\">";
echo "</a>";

Here is your jquery:

$(function(){

   $("#test").click(function(){
   var img = jQuery.parseJSON(($(this).attr("var")));
   alert(img.description);
});

});

Now since you have the json object you can create div tag and put the variables inside or put the content on already existing div tag. I am sure you know what to do here.

Dins

share|improve this answer
add comment
up vote 0 down vote

I think I was over-complicating things, I didn't really need to use JSON at all.

I got this working by changing my PHP code to this:

$productid = $productsRow['ProductID']
$description = rawurlencode($productsRow['Description']);
echo "<a href=\"javascript:;\" onClick=\"changepic('$productid','$description')\">";

Then my Javascript looks like this:

function changepic(productid, description) {
    description = decodeURIComponent(description);
    alert(description);
}

This works fine so now I can continue and actually do something useful in the Javascript function.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.