0

This post is a kind of a multi-part question, but essentially i'm loading in an array of objects with my products. What I want to do is to create a list of buttons like this:

<?php foreach($records as $product): ?>

    <div><?php echo $product->name; ?></div>

<?php endforeach;  ?>

On each button click I want information to change to the corresponding product. My question is, what is the best way of accessing this php array in Javascript? Should I convert it into json?

Secondly, what do I use in prototype to make all of those div tags have click events, and how will I identify the product? Should I retrieve the order number of the button clicked and get the information from the json? So, if the 3rd button in the array is clicked I get the 3rd entry in the json?

I'm trying to learn prototype because I like the effects scriptaculuous offers over jquery.

hakre
  • 193,403
  • 52
  • 435
  • 836
Adam
  • 8,849
  • 16
  • 67
  • 131

2 Answers2

0

Regardless of the javascript toolkit you are using, to access HTML elements, use the id= attribute to uniquely identify them, and class= to put them into a common group. Then use your chosen toolkit's corresponding functions to retrieve them.

<div id="product1" class="product">Product 1</div>
<div id="product2" class="product">Product 2</div>
<div id="product3" class="product">Product 3</div>

For jQuery you would use, say, to get the element with id product1:

var el = $("#product1");

and so on. In prototype this is simply

var el = $("product1");

To get all of the products you can get them by their class. In jQuery:

var all = $(".product");

and prototype:

var all = $$(".product");

See the docs for all the details. In particular check $ and $$.

Michael Slade
  • 13,802
  • 2
  • 39
  • 44
0

I would recommend against going with Prototype. I was an early adopter of Prototype+Scriptaculous and did a lot of work with it. By 2009 it became obvious that they lost the mindshare of the development community and that jQuery had won. Reluctantly I moved to jQuery.

I found the jQuery syntax cleaner, the documentation better, the community larger and many more available resources, which would include the availability of people to answer questions like yours.

While Scriptaculous is great, there are just as many effect plug-ins for jQuery that are on-par. That being said, here's how to solve your problem...

Yes, I would define things using JSON.

This creates a new button: 

var inputId = "myInput";
var elementName = "Price";
var elementValue = "1.99";

$(element).insert(new Element("input", {type:'button', id:inputId, name:elementName, className:'FBButton', value:elementValue }))

This hooks up the event:

$(inputId).observe('click', function() {...your code ...});

Here's a link to a JSON/Prototype-based form generator that I wrote long ago but never ended up using. You're free to steal the code.

http://preview.moveable.com/JM/jameslab/JSONForm/

Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176
  • Thanks. I guess I'll stick with jquery since I'm familiar with it. What is the best method of getting my php array into javascript/jquery? just add tags within the script tags? – Adam May 08 '12 at 20:09